Charts
A chart is described by its numbers and the names of its fields. The library works out the scales, the ticks and the positions, so a chart is a table and a few elements that read from it, not a list of hand-placed coordinates.
{
"version": 1,
"seed": 1,
"canvas": { "width": 640, "height": 400 },
"data": {
"sales": [
{ "month": "Jan", "revenue": 120 },
{ "month": "Feb", "revenue": 180 },
{ "month": "Mar", "revenue": 150 }
]
},
"elements": [
{ "type": "axes", "table": "sales", "x": "month", "y": "revenue" },
{ "type": "bars", "table": "sales", "x": "month", "y": "revenue", "fill": "accent" }
]
}| Scale | For | What it does |
|---|---|---|
band | text categories (the default x of bars) | Each category gets its own slot, in the order it first appears. |
linear | numbers (the default y) | Nice steps (1, 2 or 5 times a power of ten). Starts at zero unless "zero": false. |
log | numbers above zero that span powers of ten | Whole powers of ten. Set with xScale or yScale. |
| Element | Reads | Draws |
|---|---|---|
axes | table, x, y | Axis lines, ticks, tick labels, field names as titles, optional grid. |
bars | table, x, y | One bar per row from the baseline. |
points | table, x, y | One dot per row. r in pixels. |
path | table, x, y | A polyline through the rows, in order or sorted by x. |
text | text, x, y | A label, with size, fill and align. |
legend | items | Swatches and labels, one per item, up to 8. |
Optional on every table element: frame (where the plot sits, as four fractions of the canvas), xScale, yScale, zero, and fill or stroke as a theme token.
Up to 4 tables, each of up to 1000 rows, with up to 8 fields per row. A field holds a number or a line of text up to 60 characters. A table that does not match its element (a missing field, text on a log axis, a value of zero on a log axis) is refused with the row that caused it.