Chart components

Chart/plot components (ECharts). Inline data only — no hosted-file/URL mode, see the reference below for why.

Bar Chart ::bar-chart

Renders a bar chart, comparing a value across discrete categories. `labels`+`values`, two comma-separated lists — e.g. labels="Jan,Feb,Mar" values="120,150,170".

Prop Type Required Description
labels string yes Comma-separated category labels, e.g. "Jan,Feb,Mar". Pairs with `values`.
values string yes Comma-separated numbers, e.g. "120,150,170". Pairs with `labels`.
title string no Optional chart title.

Line Chart ::line-chart

Renders a line chart, a trend over an ordered sequence (e.g. time). `labels`+`values`, two comma-separated lists — e.g. labels="Jan,Feb,Mar" values="120,150,170".

Prop Type Required Description
labels string yes Comma-separated x-axis labels, e.g. "Jan,Feb,Mar". Pairs with `values`.
values string yes Comma-separated numbers, e.g. "120,150,170". Pairs with `labels`.
title string no Optional chart title.

Scatter Chart ::scatter-chart

Renders a scatter plot — the relationship between two numeric values, both axes numeric (unlike bar-chart/line-chart). `xValues`+`yValues`, two comma-separated number lists — e.g. xValues="160,165,170" yValues="55,60,68".

Prop Type Required Description
xValues string yes Comma-separated numbers for the x axis, e.g. "160,165,170". Pairs with `yValues`.
yValues string yes Comma-separated numbers for the y axis, e.g. "55,60,68". Pairs with `xValues`.
title string no Optional chart title.

Pie Chart (donut) ::pie-chart

Renders a donut chart — proportions of a whole. Use this instead of bar-chart when the point is "what share of the total" rather than "compare these values". `labels`+`values`, two comma-separated lists — e.g. labels="Chrome,Safari,Firefox" values="65,19,8".

Prop Type Required Description
labels string yes Comma-separated slice labels, e.g. "Chrome,Safari,Firefox". Pairs with `values`.
values string yes Comma-separated numbers, e.g. "65,19,8". Pairs with `labels`.
title string no Optional chart title, centered in the donut.

Radar Chart ::radar-chart

Renders a radar (spider) chart — one entity scored across several dimensions at once (e.g. a product rated on speed/price/quality/support/design). Use this when bar-chart would need too many side-by-side bars to show a multi-dimensional profile at a glance. `labels`+`values`, two comma-separated lists — e.g. labels="Speed,Price,Quality,Support" values="8,6,9,7".

Prop Type Required Description
labels string yes Comma-separated dimension names, e.g. "Speed,Price,Quality". Pairs with `values`.
values string yes Comma-separated scores, e.g. "8,6,9". Pairs with `labels`.
title string no Optional chart title, also used as the single series name.

Funnel Chart ::funnel-chart

Renders a funnel chart — a sequence of stages narrowing down (e.g. Visitors → Signups → Paying customers). Use this instead of bar-chart when the point is drop-off between ordered stages, not comparing independent categories. Stages render in the order given, not resorted by value. `labels`+`values`, two comma-separated lists, widest stage first — e.g. labels="Visitors,Signups,Paying" values="1000,320,90".

Prop Type Required Description
labels string yes Comma-separated stage names, widest first, e.g. "Visitors,Signups,Paying". Pairs with `values`.
values string yes Comma-separated numbers, e.g. "1000,320,90". Pairs with `labels`.
title string no Optional chart title, centered above the funnel.

Gauge Chart ::gauge-chart

Renders a single-metric gauge (a KPI dial) — e.g. uptime %, quota used, a score against a target. Use this for one number against a range, not a comparison of several values (see bar-chart) or a proportion of a whole (see pie-chart). No data URL mode — a gauge is always exactly one value.

Prop Type Required Description
value number yes The value to show on the gauge.
min number no Range minimum. Defaults to 0.
max number no Range maximum. Defaults to 100.
title string no Optional chart title.