Easily embed Chart.js charts in Flask apps via jinja from the backend
Project description
FlaskGraph
FlaskGraph makes it dead simple to drop Chart.js charts into your Flask app without touching JavaScript. You just write Python, pass it to your template, and you're done.
🔧 Installation
pip install flaskgraph
⚡ Quickstart
1. Import & Use in Flask
from flaskgraph import graph
@app.route("/")
def dashboard():
chart = graph.bar(
['Jan', 'Feb', 'Mar'],
{"Appointments": [27, 35, 12]}, # pass data as dict for descriptive tooltip
legend=False,
label_color='standard',
grid=False,
colortheme='sky'
)
return render_template("dashboard.html", chart=chart)
2. In Your Template
Include Chart.js in your HTML <head>:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
Render the chart inside a container with a set width (the canvas is included automatically):
<div style="width: 100%; max-width: 600px;">
{{ chart|safe }}
</div>
📊 Supported Chart Types
graph.bar(labels, data, ...)
graph.line(labels, data, ...)
graph.donut(labels, data, ...)
graph.scatter(labels, data, ...)
Each method returns a fully ready-to-render HTML <canvas> with a Chart.js config script.
🎨 Parameters
| Parameter | Type | Description |
|---|---|---|
labels |
list | X-axis labels |
data |
list | Y-axis values |
label_color |
str | Label color: "standard", "dark", or "light" |
legend |
bool | Show/hide the legend |
grid |
bool | Show/hide background grid lines |
colortheme |
str | One of the predefined themes below |
🌈 Available Color Themes
blue, green, red, yellow, orange,
purple, pink, teal, sky, lime,
slate, gray, zinc,
neon-green, neon-pink, neon-blue
✅ Example
revenue = graph.line(
['Q1', 'Q2', 'Q3', 'Q4'],
[5000, 7000, 4000, 6500],
label_color='dark',
legend=True,
grid=True,
colortheme='lime'
)
<div style="max-width: 700px;">
{{ revenue|safe }}
</div>
That's it. No JavaScript. No extra config.
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Filter files by name, interpreter, ABI, and platform.
If you're not sure about the file name format, learn more about wheel file names.
Copy a direct link to the current filters
File details
Details for the file flaskgraph-0.1.2.tar.gz.
File metadata
- Download URL: flaskgraph-0.1.2.tar.gz
- Upload date:
- Size: 3.7 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.1.0 CPython/3.13.1
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
ccc864879de17e5c6ec31166eebb7df8eaeb96cb07d03d47824b8ea707b9b36f
|
|
| MD5 |
761110eaf62a8c5ddaa51f8fbeddc868
|
|
| BLAKE2b-256 |
c355ba821741c67a62075e572f7af1ce78810184cc72a554e52ee33c6594e657
|
File details
Details for the file flaskgraph-0.1.2-py3-none-any.whl.
File metadata
- Download URL: flaskgraph-0.1.2-py3-none-any.whl
- Upload date:
- Size: 4.1 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.1.0 CPython/3.13.1
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
05c33c4b598cc74f28d74a01076d583e9ef887e97394e37aeffa7ca3074f73ec
|
|
| MD5 |
66ba8ce45d4690fcba0ac396045b09c5
|
|
| BLAKE2b-256 |
41aa9f1b529b7799359ac9a532e8594759a188c87f398a688077b6d358b26066
|
