Pies & radial

Radial types render as a single <svg viewBox>, and the viewBox scales the scene natively, so the chart is responsive with no resize observer and no redraw loop. Per-slice paths give hover states and labels for free.

Pie and donut

Pie uses the first series; slices come from { name, value } points (or plain numbers plus categories as slice names):

live

import Charts from '@lemonadejs/charts';

const series = [{ data: [
    { name: 'Webform', value: 63 }, { name: 'Call', value: 20 },
    { name: 'Email', value: 8 }, { name: 'Webchat', value: 6 },
    { name: 'Other', value: 3 },
] }];

const App = () => html`<div>
    <${Charts} type="pie" series="${series}" labels gridlines="${false}" />
    <${Charts} type="pie" series="${series}" labels gridlines="${false}"
        innerradius="${0.6}" borderradius="${10}" title="Donut" />
</div>`;

innerradius: donut hole as a fraction (0–0.9) or percent (10–90).
borderradius: rounds donut segment corners.
labels: percentage labels on slices; label text color adapts to slice luminance automatically.
The focus palette (hero + neutral ramp) emphasises the leading slice; sort the data descending for best effect.

Radar

Categories become the spokes; each series is a polygon. Add area: true per chart for filled polygons:

live

import Charts from '@lemonadejs/charts';

const App = () => html`<${Charts} type="radar"
    categories="${['Speed', 'Power', 'Range', 'Cost', 'Eco']}"
    series="${[
        { name: 'Model S', data: [8, 9, 7, 4, 8] },
        { name: 'Model 3', data: [7, 7, 8, 8, 9] },
    ]}" legend />`;

Radial bar and polar area

radialbar: each value is a concentric ring (Apple-Watch style). With categories and multiple series it stacks per category.
polararea: equal-angle slices whose radius encodes the value.

Both take the same { name, value } or numeric data as pie.

Gauge

A single value on a dial. ymin/ymax set the scale, and plotbands paint the classic green/amber/red zones:

live

import Charts from '@lemonadejs/charts';

const App = () => html`<${Charts} type="gauge" title="Server load"
    series="${[{ name: 'Load', data: [73] }]}"
    ymin="${0}" ymax="${100}" valuesuffix="%"
    plotbands="${[
        { from: 0, to: 60, color: 'rgba(22,163,74,.35)' },
        { from: 60, to: 85, color: 'rgba(245,158,11,.4)' },
        { from: 85, to: 100, color: 'rgba(220,38,38,.4)' },
    ]}" />`;

Because series is live, a gauge wired to a state is a real-time meter: assign a new value and the needle moves.

Funnel and pyramid

Ordered { name, value } stages, widest first (funnel) or narrowest first (pyramid):

const series = [{ data: [
    { name: 'Visits', value: 1000 }, { name: 'Signups', value: 420 },
    { name: 'Trials', value: 180 }, { name: 'Deals', value: 60 },
] }];
html`<${Charts} type="funnel" series="${series}" labels />`