Heatmap, bullet & more

The specialty types reuse the same data definition. Each series is still { name, data }, with a rendering suited to its job.

Heatmap

Each series is a row, each category a column; cell color interpolates from light to the series color across the value range. Labels adapt their text color to cell luminance:

live

LemonadeJS

import Charts from '@lemonadejs/charts';

const App = () => html`<${Charts} type="heatmap"
    categories="${['Mon', 'Tue', 'Wed', 'Thu', 'Fri']}"
    series="${[
        { name: 'Morning', data: [12, 18, 22, 15, 9] },
        { name: 'Afternoon', data: [22, 28, 34, 26, 18] },
        { name: 'Evening', data: [8, 12, 19, 31, 38] },
        { name: 'Night', data: [3, 4, 6, 12, 22] },
    ]}" labels />`;

borderradius rounds the cells; the base color follows the selected palette or the first series’ color.

Bullet

The KPI strip: a measure bar over qualitative plotbands, with a target plotline:

live

LemonadeJS

import Charts from '@lemonadejs/charts';

const App = () => html`<${Charts} type="bullet"
    series="${[{ name: 'Sales YTD', data: [72] }]}"
    ymin="${0}" ymax="${100}"
    plotbands="${[{ from: 0, to: 50 }, { from: 50, to: 80, color: 'rgba(99,110,130,.2)' }]}"
    plotlines="${[{ value: 85 }]}" />`;

Sparkline

sparkline strips all chrome (axes, legend, gridlines) for inline line/area/bar micro-charts that live inside a sentence, a table cell, or a dashboard tile:

html`<${Charts} type="line" sparkline height="${40}"
    series="${[{ data: [4, 6, 5, 9, 7, 8, 10] }]}" />`

With labels it appends the last value: the classic KPI cell.

Packed bubble

Groups of { name, value } points packed into clusters, one cluster color per series:

const series = [
    { name: 'North', data: [{ name: 'NY', value: 40 }, { name: 'BOS', value: 22 }] },
    { name: 'South', data: [{ name: 'MIA', value: 26 }, { name: 'DAL', value: 34 }] },
];
html`<${Charts} type="packedbubble" series="${series}" labels />`

Pictogram and waffle

Value-as-repeated-glyphs (isotype). icon picks a preset (person, square, circle, capsule, star, heart), or accepts a raw SVG path:

live

LemonadeJS

import Charts from '@lemonadejs/charts';

const App = () => html`<${Charts} type="pictogram" icon="person"
    series="${[{ data: [
        { name: 'Satisfied', value: 72 },
        { name: 'Neutral', value: 45 },
        { name: 'Unhappy', value: 18 },
    ] }]}" labels />`;

• total: the value that fills every glyph (default 100 = percentages).
• columns / iconcount: glyphs per row / total grid size; e.g. iconcount="${100}" makes the 10×10 waffle grid (also available directly as type="waffle").

Word cloud

{ name, value } points sized by value, laid out to fill the plot:

const series = [{ data: [
    { name: 'Lemonade', value: 90 }, { name: 'Reactive', value: 64 },
    { name: 'Charts', value: 52 }, { name: 'Components', value: 46 },
] }];
html`<${Charts} type="wordcloud" series="${series}" />`