Annotations, reference lines & axes

Context props are arrays: declarative, serializable, and live like every other prop.

Plot lines, bands and callouts

live

import Charts from '@lemonadejs/charts';

const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
const traffic = [45, 52, 48, 60, 55, 63, 92, 85, 78, 74, 70, 66];

const App = () => html`<${Charts} type="line" categories="${months}"
    series="${[{ name: 'Traffic', data: traffic }]}"
    smooth markers="${false}"
    plotbands="${[{ from: 40, to: 60, color: 'rgba(87,129,99,.12)', label: 'Target' }]}"
    plotlines="${[{ value: 80, dashed: true, label: 'SLA' }]}"
    annotations="${[{ x: 6, y: traffic[6], text: 'Launch' }]}" />`;

plotlines: [{ value, color?, label?, dashed?, width?, axis? }] horizontal (or axis: 'x' vertical) reference lines.
plotbands: [{ from, to, color?, label?, axis? }] shaded ranges. Also the zone mechanism for gauge and bullet charts.
annotations: [{ x, y, text, color? }] callouts pinned to data points (x is the category index).

Titles and axes

html`<${Charts} type="bar" series="${series}"
    title="Quarterly results" subtitle="FY 2026, consolidated"
    xtitle="Quarter" ytitle="Revenue" y2title="Margin %"
    ymin="${0}" ymax="${250}" />`

gridlines: horizontal y-gridlines (on by default).
labelrotation: force an x-label angle; unset auto-rotates when crowded.
ylog: logarithmic y-axis (positive values only).
xtype / xformat: continuous or datetime x-axes with custom tick formatting.

Number formatting

Values format compactly by default (1.2k, 3.4M). The formatting props compose:

html`<${Charts} series="${series}"
    valueprefix="$"          // $120
    valuesuffix=" USD"       // 120 USD
    compact="${false}"       // full numbers
    thousands                // 1,234 (when not compact)
    decimals="${1}"          // fixed decimal places
    valueformat="${(n) => n.toFixed(2) + ' t'}"  // full override
/>`

valueformat wins over everything; it applies to axis ticks, bar labels and tooltip values alike.

Tooltips

The styled tooltip follows the cursor (tooltip, on by default). On bar and stacked charts, sharedtooltip lists every series for the hovered column with a crosshair. Set it false for per-point tooltips. For full control, tooltipformat receives { title, rows } and returns the body:

html`<${Charts} series="${series}"
    tooltipformat="${({ title, rows }) =>
        title + ': ' + rows.map((r) => r.name + ' ' + r.value).join(', ')}" />`