Bars, lines & areas

The cartesian family shares one grid: categories on the x-axis, values on y. Bars render in plain HTML + CSS (flex columns with percentage heights, responsive with zero JavaScript); lines and areas are a single scaling SVG.

Bar, grouped and stacked

live

import Charts from '@lemonadejs/charts';

const series = [
    { name: 'Product A', data: [120, 190, 80, 220] },
    { name: 'Product B', data: [80, 105, 130, 140] },
];

const App = () => html`<div>
    <${Charts} type="bar" categories="${['Q1', 'Q2', 'Q3', 'Q4']}"
        series="${series}" legend labels />
</div>`;

Variants are props, not new chart types:

type="stackedbar": stacks the series; add stackmode="percent" for a 100%-stacked chart.
horizontal: categories move to the y-axis.
horizontal mirror gives a population pyramid: the first series grows leftward with absolute labels.
ymin / ymax force the y-range; ylog gives a logarithmic y-axis.

Line, area, step and streamgraph

live

import Charts from '@lemonadejs/charts';

const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
const series = [
    { name: 'Users', data: [42, 51, 60, 55, 71, 68, 84, 90, 82, 95, 102, 110] },
    { name: 'Average', data: [40, 44, 47, 50, 55, 58, 63, 68, 71, 76, 82, 86], dashed: true },
];

const App = () => html`<${Charts} type="line" categories="${months}"
    series="${series}" smooth markers="${false}" legend labels />`;

smooth draws spline curves; step draws stairs (true/'before' or 'mid').
area fills under the line; markers adds point dots (on by default).
dashed: true on a series draws it dashed (good for targets/averages).
type="stackedarea" stacks the fills; type="streamgraph" centers them.

Continuous and datetime x-axes

By default the x-axis is categorical. Set xtype="datetime" (ISO date categories) or xtype="linear" for continuous axes, and xformat for custom tick labels.

Combo charts and a second axis

Per-series overrides make combos: give a series its own type, and put it on the right axis with axis: 'right':

live

import Charts from '@lemonadejs/charts';

const series = [
    { name: 'Revenue', type: 'bar', data: [120, 190, 80, 220] },
    { name: 'Margin %', type: 'line', axis: 'right', data: [18, 26, 12, 31] },
];

const App = () => html`<${Charts} type="bar"
    categories="${['Q1', 'Q2', 'Q3', 'Q4']}" series="${series}"
    ytitle="Revenue" y2title="Margin" legend />`;

Scatter and bubble

Points are [x, y] pairs (bubble adds a size: [x, y, z]):

const series = [
    { name: 'Measured', type: 'scatter',
      data: [[1.2, 11], [2.1, 14], [2.8, 13], [3.9, 17], [5.1, 16]] },
    { name: 'Trend', type: 'line', smooth: true,
      data: [[1, 10], [2, 13], [3, 14], [4, 16], [5, 17]] },
];
html`<${Charts} type="scatter" series="${series}" xtitle="Epoch" ytitle="Cost" />`

Waterfall, histogram and pareto

live

import Charts from '@lemonadejs/charts';

const App = () => html`<div>
    <${Charts} type="waterfall" title="Cash flow"
        categories="${['Start', 'Sales', 'Refunds', 'Fees', 'Net']}"
        series="${[{ data: [120, 45, -30, -15, 25] }]}" labels legend="${false}" />
    <${Charts} type="pareto" title="Complaints"
        categories="${['Late ship', 'Damage', 'Wrong item', 'Billing', 'Other']}"
        series="${[{ name: 'Complaints', data: [17, 42, 9, 24, 6] }]}" />
</div>`;

waterfall: positive/negative deltas walk from start to net.
histogram: pass raw samples in one series; bin count via bins (unset = Sturges’ rule).
pareto: bars sorted descending plus the cumulative-% line on the right axis.

Statistical and range types

candlestick / ohlc: points are [open, high, low, close] per category.
boxplot: points are [min, q1, median, q3, max].
arearange / columnrange: points are [low, high] pairs.
dumbbell: [from, to] pairs; lollipop: a slim single-series bar with a dot.

Zoom and navigator

For dense line/bar data, zoom enables drag-select along x (with a reset button) and navigator adds an overview strip with a draggable window; see Interactivity.