---
title: "Heatmap, Bullet and Sparkline Charts in JavaScript"
description: "Heatmap matrices, bullet KPI charts, inline sparklines, packed bubbles, pictograms, waffle grids and word clouds, all on the same data definition."
source: https://lemonadejs.com/charts/docs/extras/
---

# Heatmap, bullet and sparkline charts

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:

<!--example-->

```js
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](/charts/docs/palettes/) or the first series' `color`.

## Bullet

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

<!--example-->

```js
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:

```js
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:

```js
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:

<!--example-->

```js
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:

```js
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}" />`
```