---
title: "Treemap, Sunburst and Sankey Charts in JavaScript"
description: "Treemap, sunburst and icicle charts from parent-linked points, and sankey, chord and arc diagrams from from/to/value links. Two data shapes cover both."
source: https://lemonadejs.com/charts/docs/hierarchy-flow/
---

# Treemap, sunburst and sankey charts

Two data shapes cover this whole family: **parent-linked nodes** for
hierarchies and **`{ from, to, value }` links** for flows. Both live in a
regular series' `data` array.

## Treemap

Flat `{ name, value }` points tile the plane; add `parent` to nest:

<!--example-->

```js
import Charts from '@lemonadejs/charts';

const series = [{ data: [
    { name: 'Compute', value: 42 }, { name: 'Storage', value: 26 },
    { name: 'Network', value: 14 }, { name: 'Support', value: 10 },
    { name: 'Other', value: 8 },
] }];

const App = () => html`<${Charts} type="treemap" series="${series}" labels />`;
```

## Sunburst and icicle

The same parent-linked shape renders as concentric rings (sunburst) or
horizontal slabs (icicle). Branch nodes take `value: 0`, so their size is
the sum of their children:

<!--example-->

```js
import Charts from '@lemonadejs/charts';

const series = [{ data: [
    { name: 'Web', value: 0 }, { name: 'API', value: 0 },
    { name: 'Pages', parent: 'Web', value: 30 },
    { name: 'Assets', parent: 'Web', value: 18 },
    { name: 'Auth', parent: 'API', value: 12 },
    { name: 'Data', parent: 'API', value: 24 },
    { name: 'Cache', parent: 'Data', value: 9 },
] }];

const App = () => html`<div>
    <${Charts} type="sunburst" series="${series}" labels />
    <${Charts} type="icicle" series="${series}" labels />
</div>`;
```

Deeper levels lighten automatically from the root color, so the hierarchy
reads at a glance with any [palette](/charts/docs/palettes/).

## Sankey

Links are `{ from, to, value }`. Nodes are inferred from the link ends,
laid out in columns, with flow widths proportional to value:

<!--example-->

```js
import Charts from '@lemonadejs/charts';

const series = [{ data: [
    { from: 'Coal', to: 'Power', value: 25 },
    { from: 'Gas', to: 'Power', value: 20 },
    { from: 'Solar', to: 'Power', value: 10 },
    { from: 'Power', to: 'Homes', value: 30 },
    { from: 'Power', to: 'Industry', value: 25 },
    { from: 'Gas', to: 'Homes', value: 8 },
] }];

const App = () => html`<${Charts} type="sankey" series="${series}" labels />`;
```

## Chord and arc diagram

The same link shape, different layouts:

- **chord** is a dependency wheel: nodes around a circle, ribbons between
  them sized by value. Good for trade/traffic matrices.
- **arcdiagram**: nodes on a line, arcs above it. Good when node order
  matters (timelines, sequences).

```js
const series = [{ data: [
    { from: 'US', to: 'EU', value: 30 }, { from: 'US', to: 'Asia', value: 20 },
    { from: 'EU', to: 'Asia', value: 25 }, { from: 'Asia', to: 'US', value: 35 },
] }];
html`<${Charts} type="chord" series="${series}" labels />`
```