Lattice Grid Buy a licence

demo D165

Pie, donut, sunburst, treemap: JavaScript Data Grid Demo

Composition, flat and hierarchical

type: 'pie' · 'donut' · 'sunburst' · 'treemap'

The same monthly spend drawn four ways over a grid grouped by nation and then by city. The pie, the donut and the treemap each split the total by nation; the sunburst draws both levels at once, with the four nations in the middle and the cities that make them up around the outside.

Building…
Loading a live grid…

The configuration

<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.103.2/lattice-grid.min.css">
<script src="https://cdn.latticegrid.dev/lattice-grid@1.103.2/lattice-grid.min.js"></script>

<div id="grid" style="height: 340px"></div>
<div id="chart" style="height: 320px"></div>

<script type="module">
  import { createChart } from '@toclocoinc/lattice-grid/modules/charts';

  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    columns: [
      { field: 'region', title: 'Region', filter: { type: 'set' } },
      { field: 'status', title: 'Status', filter: { type: 'set' } },
      { field: 'bandwidth', title: 'Bandwidth', type: 'number' },
      { field: 'utilisation', title: 'Utilisation', type: 'number', format: { decimals: 1, suffix: '%' } },
      { field: 'charge', title: 'Monthly charge', type: 'number',
        format: { style: 'currency', currency: 'GBP' }, total: 'sum' },
    ],
    rows,  // circuits: region, status, bandwidth, utilisation, charge
  });

  // A chart reads the grid's filtered rows and redraws when the grid changes.
  // pie and donut read x and y flat; sunburst and treemap read the same pair
  // and nest a hierarchy. Swap the type to draw each one.
  createChart({
    grid,
    container: document.getElementById('chart'),
    type: 'donut',
    x: 'status',
    y: 'charge',
    title: 'Charge by status',
    // Name a colour per category. A status keeps its colour wherever it
    // appears, even in a filtered view that never draws every status here.
    scheme: { live: '#2a9d8f', provisioning: '#e9c46a', ceased: '#e76f51' },
    // Each legend entry also shows its own formatted total.
    legend: { values: true },
    // A figure drawn in the donut's own hole.
    centre: { value: 'total', label: 'Total charge' },
  });
</script>

Part-to-whole charts, and when a second level earns its place

A pie answers one question well: how does this total divide? Four slices, four shares, and the eye compares them without reading a number. A donut answers the same question and gives the middle back for a total or a label. A treemap answers it with area instead of angle, which holds up better when the shares are lopsided, because a thin slice and a thin rectangle are not equally hard to see.

A sunburst is the one that earns a second level. Its inner ring is the same split the pie draws, and each outer segment is a part of the segment it sits against, shaded from its parent’s colour. On this page the inner ring is four nations and the outer ring the cities inside them, so you can see that one nation dominates the spend and, without changing chart, which cities inside it are responsible. That is the question a pie cannot answer, and it is why a sunburst over a single flat field is just a pie with a hole in it.

The hierarchy comes from the grid, not from the chart. Group the grid by nation and then by city and the sunburst draws the group tree it finds. Change the grouping and the chart follows, because the chart is reading the same tree the grid is showing rather than being given its own copy of the data.

When should you use a sunburst instead of a pie?

Use a sunburst when the categories nest and you want both levels in one picture: spend by nation and then by city, revenue by region and then by product. Use a pie when there is only one level, because a sunburst with nothing to nest draws a single ring and gives you nothing a pie would not have.

Why is a treemap easier to read than a pie when the shares are uneven?

Area is easier to compare than angle, and a small rectangle keeps a shape and a label where a thin slice becomes a sliver. A treemap also uses its rectangle fully, so it stays readable in a short wide panel where a pie would shrink to fit the height.

Related demos