LineChart
The built-in linechart tag — a line chart from JSON data and series. Usage, the data/series shape, and a live example.
A line chart for trends over time or any ordered axis. Give it the rows in data (a JSON
array of objects) and the lines in series (a JSON array of {name, color}), and name the
x-axis field with dataKey. It renders in the browser (it’s Recharts-backed) and hydrates into
an interactive island.
Use it as {% linechart %} in Markdown, or call it from Python logic
(loops, snippets) via component('aardvark', 'linechart', …).
A basic line chart
Each series entry names a key in the row objects and the color to draw it; dataKey is the
x-axis field.
{% linechart h=260 dataKey='month' withLegend=true data='[
{"month":"Jan","Signups":120,"Active":80},
{"month":"Feb","Signups":180,"Active":110},
{"month":"Mar","Signups":160,"Active":135},
{"month":"Apr","Signups":240,"Active":190}
]' series='[{"name":"Signups","color":"indigo.6"},{"name":"Active","color":"teal.6"}]' %}
component('aardvark', 'linechart', h=260, dataKey='month', withLegend=True,
data='[{"month":"Jan","Signups":120,"Active":80}, …]',
series='[{"name":"Signups","color":"indigo.6"},{"name":"Active","color":"teal.6"}]')
Attributes
| Attribute | Valid values | Description |
|---|---|---|
data |
JSON array of row objects | The chart rows. |
series |
JSON array of {name, color} |
One line per entry; name is a key in each row, color a Mantine color. |
dataKey |
string | The row field used for the x-axis. |
h |
integer (px, default 300) |
Chart height. |
curveType |
monotone (default), bump, linear, natural, step, stepBefore, stepAfter |
Line interpolation. |
unit |
string | Unit appended to axis/tooltip values. |
withLegend |
bool (default false) |
Show the legend. |
Good to know. The chart is drawn in the browser, because it sizes itself to the live
container — so it appears once the page’s JavaScript has run, and the page’s Markdown twin and
the whole-site PDF carry no chart. A data or series value that is not valid JSON, or is
JSON but not an array, warns during the build and draws an empty chart rather than stopping
the build. Charts need the charts component library declared in the theme, with
@mantine/charts installed; this site declares it, so the tag works here as written.
Good to know. The chart is drawn in the browser, because it sizes itself to the live
container — so it appears once the page’s JavaScript has run, and the page’s Markdown twin and
the whole-site PDF carry no chart. A data or series value that is not valid JSON, or is
JSON but not an array, warns during the build and draws an empty chart rather than stopping
the build. Charts need the charts component library declared in the theme, with
@mantine/charts installed; this site declares it, so the tag works here as written.
CSS Selectors
Target the rendered element through its island marker —
[data-aardvark-island="LineChart"] (or the more specific
[data-aardvark-lib="charts"][data-aardvark-island="LineChart"] when several
libraries share the page) — or through the Mantine Styles API classes
(.mantine-LineChart-root and its inner parts):
/* Every rendered LineChart carries this island marker */
[data-aardvark-island="LineChart"] { }
/* Scope by library + island when you have several libraries in play */
[data-aardvark-lib="charts"][data-aardvark-island="LineChart"] { }
/* Mantine Styles API class on the root element */
.mantine-LineChart-root { }
.mantine-LineChart-container { }
.mantine-LineChart-axis { }
.mantine-LineChart-line { }
Injecting Attributes
attr={…} forwards raw HTML attributes — including event handlers — straight onto the rendered element, so you can wire DOM behavior the tag does not expose. The handler can be a full multi-line script, not just one expression — this one logs the value to the console and shows it in an alert:
{% linechart h=260 dataKey='month' withLegend=true data='[
{"month":"Jan","Signups":120,"Active":80},
{"month":"Feb","Signups":180,"Active":110}
]' series='[{"name":"Signups","color":"indigo.6"},{"name":"Active","color":"teal.6"}]' attr={'onclick': '''
const value = this.innerText;
console.log('attr demo value:', value);
alert(value);
'''} %}
component('aardvark', 'linechart', h=260, dataKey='month', withLegend=True,
data='[{"month":"Jan","Signups":120,"Active":80},{"month":"Feb","Signups":180,"Active":110}]',
series='[{"name":"Signups","color":"indigo.6"},{"name":"Active","color":"teal.6"}]',
attr={'onclick': '''
const value = this.innerText;
console.log('attr demo value:', value);
alert(value);
'''})