chart
Render a chart without JavaScript, CSS, external services, or external assets.
The data argument can be a list of {Label, Value} tuples, [Label, Value]
lists, or maps with label and value keys and an optional color. Numeric
values can be numbers or strings. It can also be a map where each key is a
label and each value is its chart value:
For example:
{% chart type="pie"
title=_"Responses"
data=[["Yes", 42], ["No", 8]] %}
{% chart type="pie" data=[
%{ "label": _"Yes", "value": "42", "color": "#4477aa" },
%{ "label": _"No", "value": "8" }
] %}
{% chart type="pie" data=%{"Yes": 42, "No": 8} %}
If data is not supplied, the labels and values lists are zipped. Values
must be finite numbers. Generated data tables include the same color swatches
as categorical charts, so every value can be matched to its chart mark.
Supported types are pie, donut, horizontal_bar, vertical_bar, and
line. The optional arguments are:
| Argument | Description |
|---|---|
title | Accessible chart title and table caption. |
data | Label/value rows or a map of labels to values. Row maps can set color. |
labels | Labels to zip with values when data is not supplied. |
values | Values to zip with labels when data is not supplied. |
width | View box width, clamped between 64 and 4096. Defaults to 400. |
height | View box height, clamped between 64 and 4096. Defaults to 240. |
color | One hexadecimal RGB color. Data points use brightness variations of this color. |
palette | List of hexadecimal RGB colors. Later points use shades when the list is exhausted. Invalid colors are ignored. |
colors | Backwards-compatible alias for palette. |
sort | Sort with -value, +value, -label, or +label. A missing sign means ascending; the bare flag means -value. |
class | Additional classes on the generated figure. |
label_header | Header for the label column in the data table. |
value_header | Header for the value column in the data table. |
hide_table | Do not generate a table. Use only when the data is already shown in a table. |
legend | auto by default. With a hidden table, pie and donut charts get a color key. Set to true or false to override. |
show_labels | Show outside labels with leader lines. Enabled by default for pie and donut charts; set to false to hide them. |
label_min_percent | Combine pie and donut values below this percentage into Other. Defaults to 0. |
max_pie_values | Number of highest original pie or donut values to retain before combining the rest into Other. Defaults to 50; clamped between 1 and 1000. |
aria_describedby | Id of an existing table or description for the SVG. |
Color selection uses color, palette, colors, the optional
site.chart_palette configuration, and finally the built-in palette, in
that order. The configured palette is a comma or whitespace separated list.
For security and predictable rendering, at most 1000 data points are used,
labels are truncated, zero values are omitted from pie and donut charts, and
those charts retain a bounded number of highest values and combine the rest
into Other. The Other category stays at the low-value end of the ordering
instead of being sorted by its aggregate value.
Arbitrary SVG/CSS is not accepted, and the component is
never cached independently. The component only renders supplied data and does
not perform data access or authorization.