DarkLineDashboard
Ocean Line
Cyan-teal filled area line on a deep navy canvas. The go-to for infrastructure and ops dashboards.
Theme tokens
- Background
- #0c1a2e
- Font
- Inter / 12px
- Mode
- dark
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": "line",
"width": 800,
"height": 400,
"format": "png",
"devicePixelRatio": 4,
"theme": {
"palette": [
"#22d3ee",
"#38bdf8",
"#60a5fa",
"#818cf8",
"#34d399",
"#4ade80"
],
"backgroundColor": "#0c1a2e",
"fontFamily": "Inter",
"fontSize": 16,
"gridColor": "rgba(34, 211, 238, 0.1)",
"mode": "dark"
},
"data": {
"labels": [
"00:00",
"04:00",
"08:00",
"12:00",
"16:00",
"20:00",
"24:00"
],
"datasets": [
{
"label": "Requests/sec",
"data": [
1240,
980,
2840,
4120,
4780,
3960,
2100
],
"borderColor": "#22d3ee",
"backgroundColor": "rgba(34, 211, 238, 0.12)",
"fill": true,
"tension": 0.4,
"borderWidth": 2,
"pointRadius": 3,
"pointBackgroundColor": "#22d3ee"
}
]
},
"options": {
"color": "#67e8f9",
"layout": {
"padding": {
"left": 8,
"right": 8,
"top": 6,
"bottom": 10
}
},
"plugins": {
"legend": {
"display": false
},
"title": {
"display": true,
"text": "API Throughput (24h)",
"color": "#cffafe",
"font": {
"size": 14,
"weight": "bold"
}
}
},
"scales": {
"x": {
"grid": {
"display": false
},
"border": {
"display": false
},
"ticks": {
"color": "#0e7490"
}
},
"y": {
"grid": {
"color": "rgba(34, 211, 238, 0.08)"
},
"border": {
"display": false
},
"ticks": {
"color": "#0e7490"
}
}
}
}
}