Lattice Grid Buy a licence

demo D165

Pie, donut, sunburst, treemap in Svelte

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…

This is the Svelte version. A use action attaches the grid to a plain element, so no framework runtime is passed in and the component stays small, while the configuration is ordinary Svelte state.

The configuration

<script>
  import { createGrid } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.esm.min.js';
  import createLatticeAction from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/svelte.esm.min.js';
  import { createChart } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/charts.esm.min.js';

  const lattice = createLatticeAction({ createGrid });

  let pieEl, donutEl, sunburstEl, treemapEl;

  const config = {
    rowKey: 'id',
    columns: [
      { field: 'circuit', title: 'Circuit', layout: { width: 180 } },
      { field: 'region', title: 'Region', filter: { type: 'set' } },
      { field: 'status', title: 'Status', filter: { type: 'set' } },
      { field: 'bandwidth', title: 'Bandwidth', type: 'number' },
      { field: 'charge', title: 'Monthly charge', type: 'number',
        format: { style: 'currency', currency: 'GBP' }, total: 'sum' },
    ],
    rows,  // an array of circuit records
    // onGrid hands over the live grid the moment it is created. The same charge as
    // a composition: pie and donut split it by status, sunburst and treemap by
    // region. Every chart is built from the grid, so all four follow its filters.
    onGrid: (grid) => {
      createChart({ grid, container: pieEl,      type: 'pie',      x: 'status', y: 'charge' });
      createChart({ grid, container: donutEl,    type: 'donut',    x: 'status', y: 'charge' });
      createChart({ grid, container: sunburstEl, type: 'sunburst', x: 'region', y: 'charge' });
      createChart({ grid, container: treemapEl,  type: 'treemap',  x: 'region', y: 'charge' });
    },
  };
</script>

<svelte:head>
  <link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.min.css">
</svelte:head>

<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; grid-auto-rows: 210px">
  <div bind:this={pieEl}></div>
  <div bind:this={donutEl}></div>
  <div bind:this={sunburstEl}></div>
  <div bind:this={treemapEl}></div>
</div>
<div use:lattice={config} style="height: 340px; margin-top: 14px"></div>

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