Charts
Charts
Section titled “Charts”Syntax
Section titled “Syntax”| Form | Syntax | Usage |
|---|---|---|
| Chart.js | fence chart title="Title" type="bar" | Chart.js JSON chart. |
| Type JSON | "type": "line" | Type in the configuration. |
| Mind map | fence chart type="mindmap" | Mind map. |
| Vega-Lite | fence vega-lite title="Title" | Specification Vega-Lite. |
| Options | data, datasets, options, encoding, mark | Fields passed to the renderer. |
Reference documentation
Section titled “Reference documentation”| Engine | Reference |
|---|---|
| Chart.js | Chart.js documentation |
| Chart.js chart types | Chart.js chart types |
| Vega-Lite | Vega-Lite documentation |
| Vega | Vega documentation |
| Vega-Embed | Vega-Embed documentation |
Chart.js syntax
Section titled “Chart.js syntax”~~~chart title="Line chart" type="line"
{
"data": {
"labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
"datasets": [
{
"label": "Traffic",
"data": [42, 55, 61, 70, 88, 104],
"tension": 0.35,
"fill": true
}
]
}
}
~~~
Bar chart
Section titled “Bar chart”~~~chart title="Bar chart" type="bar"
{
"data": {
"labels": ["Docs", "API", "Ops", "Data"],
"datasets": [
{
"label": "Demandes",
"data": [18, 32, 24, 15]
}
]
}
}
~~~
Horizontal bar
Section titled “Horizontal bar”~~~chart title="Horizontal bar" type="bar"
{
"data": {
"labels": ["Research", "Writing", "Validation", "Publication"],
"datasets": [
{
"label": "Minutes",
"data": [25, 45, 20, 10]
}
]
},
"options": {
"indexAxis": "y"
}
}
~~~
Radar chart
Section titled “Radar chart”~~~chart title="Radar chart" type="radar"
{
"data": {
"labels": ["Clarity", "Speed", "Quality", "Automation", "Maintenance"],
"datasets": [
{
"label": "Avant",
"data": [45, 52, 58, 32, 40]
},
{
"label": "Apres",
"data": [82, 76, 88, 74, 79]
}
]
},
"options": {
"elements": {
"line": {
"borderWidth": 3
}
},
"scales": {
"r": {
"beginAtZero": true,
"grid": {
"color": "rgba(255,255,255,.14)"
},
"angleLines": {
"color": "rgba(255,255,255,.18)"
},
"pointLabels": {
"color": "#d8dee9"
}
}
}
}
}
~~~
Doughnut chart
Section titled “Doughnut chart”~~~chart title="Doughnut chart" type="doughnut"
{
"data": {
"labels": ["Guides", "Tutoriels", "References"],
"datasets": [
{
"data": [45, 35, 20]
}
]
}
}
~~~
Pie chart
Section titled “Pie chart”~~~chart title="Pie chart" type="pie"
{
"data": {
"labels": ["Stable", "A surveiller", "A refaire"],
"datasets": [
{
"data": [62, 24, 14]
}
]
}
}
~~~
Polar area
Section titled “Polar area”~~~chart title="Polar area" type="polarArea"
{
"data": {
"labels": ["HTML", "CSS", "Markdown", "Scripts", "Assets"],
"datasets": [
{
"data": [12, 19, 16, 9, 7]
}
]
}
}
~~~
Scatter plot
Section titled “Scatter plot”~~~chart title="Scatter plot" type="scatter"
{
"data": {
"datasets": [
{
"label": "Mesures",
"data": [
{ "x": -10, "y": 0 },
{ "x": 0, "y": 6 },
{ "x": 8, "y": 12 },
{ "x": 16, "y": 18 },
{ "x": 24, "y": 23 }
]
}
]
}
}
~~~
Bubble chart
Section titled “Bubble chart”~~~chart title="Bubble chart" type="bubble"
{
"data": {
"datasets": [
{
"label": "Charge",
"data": [
{ "x": 8, "y": 14, "r": 8 },
{ "x": 14, "y": 22, "r": 14 },
{ "x": 24, "y": 18, "r": 10 },
{ "x": 32, "y": 30, "r": 18 }
]
}
]
}
}
~~~
Mixed chart
Section titled “Mixed chart”~~~chart title="Mixed chart"
{
"type": "bar",
"data": {
"labels": ["S1", "S2", "S3", "S4"],
"datasets": [
{
"type": "bar",
"label": "Volume",
"data": [30, 42, 38, 51]
},
{
"type": "line",
"label": "Tendance",
"data": [28, 36, 43, 49],
"tension": 0.35
}
]
}
}
~~~
Mind map
Section titled “Mind map”~~~chart title="Mind map" type="mindmap"
Documentation
MkDocs Material
Annotations
Onglets
Admonitions
Extensions locales
Hexadecimal
n8n
Charts
Visualisations
Chart.js
Vega-Lite
Kroki
~~~
Vega-Lite syntax
Section titled “Vega-Lite syntax”~~~vega-lite title="Vega-Lite bar"
{
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"width": "container",
"height": 260,
"data": {
"values": [
{ "category": "A", "value": 28 },
{ "category": "B", "value": 55 },
{ "category": "C", "value": 43 },
{ "category": "D", "value": 91 }
]
},
"mark": "bar",
"encoding": {
"x": { "field": "category", "type": "nominal" },
"y": { "field": "value", "type": "quantitative" },
"color": { "field": "category", "type": "nominal", "legend": null }
}
}
~~~
Vega-Lite line
Section titled “Vega-Lite line”~~~vega-lite title="Vega-Lite line"
{
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"width": "container",
"height": 260,
"data": {
"values": [
{ "day": "Mon", "value": 12 },
{ "day": "Tue", "value": 18 },
{ "day": "Wed", "value": 17 },
{ "day": "Thu", "value": 26 },
{ "day": "Fri", "value": 31 }
]
},
"mark": { "type": "line", "point": true },
"encoding": {
"x": { "field": "day", "type": "ordinal" },
"y": { "field": "value", "type": "quantitative" }
}
}
~~~
Vega-Lite area
Section titled “Vega-Lite area”~~~vega-lite title="Vega-Lite area"
{
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"width": "container",
"height": 260,
"data": {
"values": [
{ "day": 1, "value": 10 },
{ "day": 2, "value": 18 },
{ "day": 3, "value": 16 },
{ "day": 4, "value": 28 },
{ "day": 5, "value": 34 }
]
},
"mark": { "type": "area", "line": true },
"encoding": {
"x": { "field": "day", "type": "quantitative" },
"y": { "field": "value", "type": "quantitative" }
}
}
~~~
Vega-Lite scatter
Section titled “Vega-Lite scatter”~~~vega-lite title="Vega-Lite scatter"
{
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"width": "container",
"height": 260,
"data": {
"values": [
{ "x": 1, "y": 4, "group": "A" },
{ "x": 2, "y": 7, "group": "A" },
{ "x": 3, "y": 6, "group": "B" },
{ "x": 4, "y": 11, "group": "B" },
{ "x": 5, "y": 14, "group": "C" }
]
},
"mark": "point",
"encoding": {
"x": { "field": "x", "type": "quantitative" },
"y": { "field": "y", "type": "quantitative" },
"color": { "field": "group", "type": "nominal" }
}
}
~~~
Vega-Lite bubble
Section titled “Vega-Lite bubble”~~~vega-lite title="Vega-Lite bubble"
{
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"width": "container",
"height": 260,
"data": {
"values": [
{ "x": 1, "y": 8, "size": 80, "group": "A" },
{ "x": 2, "y": 13, "size": 160, "group": "A" },
{ "x": 3, "y": 9, "size": 120, "group": "B" },
{ "x": 4, "y": 20, "size": 260, "group": "C" }
]
},
"mark": "circle",
"encoding": {
"x": { "field": "x", "type": "quantitative" },
"y": { "field": "y", "type": "quantitative" },
"size": { "field": "size", "type": "quantitative" },
"color": { "field": "group", "type": "nominal" }
}
}
~~~
Vega-Lite pie
Section titled “Vega-Lite pie”~~~vega-lite title="Vega-Lite pie"
{
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"width": 320,
"height": 320,
"data": {
"values": [
{ "category": "Docs", "value": 45 },
{ "category": "API", "value": 30 },
{ "category": "Ops", "value": 25 }
]
},
"mark": { "type": "arc", "innerRadius": 70, "stroke": "#111827" },
"encoding": {
"theta": { "field": "value", "type": "quantitative" },
"color": { "field": "category", "type": "nominal" }
}
}
~~~
Vega-Lite heatmap
Section titled “Vega-Lite heatmap”~~~vega-lite title="Vega-Lite heatmap"
{
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"width": "container",
"height": 260,
"data": {
"values": [
{ "day": "Mon", "hour": "08", "value": 2 },
{ "day": "Mon", "hour": "12", "value": 7 },
{ "day": "Mon", "hour": "18", "value": 5 },
{ "day": "Tue", "hour": "08", "value": 4 },
{ "day": "Tue", "hour": "12", "value": 9 },
{ "day": "Tue", "hour": "18", "value": 6 },
{ "day": "Wed", "hour": "08", "value": 3 },
{ "day": "Wed", "hour": "12", "value": 8 },
{ "day": "Wed", "hour": "18", "value": 7 }
]
},
"mark": "rect",
"encoding": {
"x": { "field": "day", "type": "ordinal" },
"y": { "field": "hour", "type": "ordinal" },
"color": { "field": "value", "type": "quantitative" }
}
}
~~~
Vega-Lite tick
Section titled “Vega-Lite tick”~~~vega-lite title="Vega-Lite tick"
{
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"width": "container",
"height": 180,
"data": {
"values": [
{ "score": 12 }, { "score": 18 }, { "score": 23 }, { "score": 25 },
{ "score": 26 }, { "score": 31 }, { "score": 38 }, { "score": 42 }
]
},
"mark": "tick",
"encoding": {
"x": { "field": "score", "type": "quantitative" }
}
}
~~~
Vega-Lite rule and text
Section titled “Vega-Lite rule and text”~~~vega-lite title="Vega-Lite rule and text"
{
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"width": "container",
"height": 220,
"data": {
"values": [
{ "x": 1, "y": 12, "label": "A" },
{ "x": 2, "y": 18, "label": "B" },
{ "x": 3, "y": 15, "label": "C" }
]
},
"layer": [
{
"mark": "rule",
"encoding": {
"x": { "field": "x", "type": "ordinal" },
"y": { "field": "y", "type": "quantitative" },
"y2": { "value": 0 }
}
},
{
"mark": { "type": "text", "dy": -8 },
"encoding": {
"x": { "field": "x", "type": "ordinal" },
"y": { "field": "y", "type": "quantitative" },
"text": { "field": "label" }
}
}
]
}
~~~