LightBarDashboard
Azure Bar
Light-background bar chart with a rich blue palette. Clean enough for emails, structured enough for dashboards.
Theme tokens
- Background
- #f8fafc
- Font
- Inter / 12px
- Mode
- light
API snippet
POST this to /api/v1/render to render this template programmatically.
POST /api/v1/render HTTP/1.1
Content-Type: application/json
Authorization: Bearer YOUR_API_KEY
{
"type": "bar",
"width": 800,
"height": 380,
"format": "png",
"devicePixelRatio": 4,
"theme": {
"palette": [
"#3b82f6",
"#6366f1",
"#8b5cf6",
"#06b6d4",
"#10b981",
"#f59e0b"
],
"backgroundColor": "#f8fafc",
"fontFamily": "Inter",
"fontSize": 16,
"gridColor": "rgba(30, 41, 59, 0.14)",
"mode": "light"
},
"data": {
"labels": [
"Week 1",
"Week 2",
"Week 3",
"Week 4",
"Week 5",
"Week 6"
],
"datasets": [
{
"label": "Organic",
"data": [
320,
410,
390,
480,
520,
610
],
"backgroundColor": "#3b82f6",
"borderRadius": 5,
"borderSkipped": false
},
{
"label": "Paid",
"data": [
180,
220,
260,
290,
310,
380
],
"backgroundColor": "#6366f1",
"borderRadius": 5,
"borderSkipped": false
}
]
},
"options": {
"color": "#334155",
"plugins": {
"legend": {
"position": "top",
"align": "start",
"labels": {
"color": "#334155",
"usePointStyle": true,
"padding": 16
}
},
"title": {
"display": true,
"text": "User Acquisition by Channel",
"color": "#0f172a",
"font": {
"size": 13,
"weight": "bold"
}
}
},
"scales": {
"x": {
"grid": {
"display": false
},
"border": {
"display": false
},
"ticks": {
"color": "#64748b"
}
},
"y": {
"grid": {
"color": "rgba(30, 41, 59, 0.14)"
},
"border": {
"display": false
},
"ticks": {
"color": "#64748b"
}
}
}
}
}