Lattice Grid Buy a licence

demo D165

Pie, donut, sunburst, treemap in Angular

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 Angular version. A standalone component takes the whole configuration through one config input, surfaces grid events as outputs, and exposes the live grid on a getter for anything the inputs do not cover.

The configuration

import { Component, ViewChild } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { createGrid } from '@toclocoinc/lattice-grid';
import '@toclocoinc/lattice-grid/css';
import { createChart } from '@toclocoinc/lattice-grid/modules/charts';
import { LatticeGridComponent, provideLattice } from '@toclocoinc/lattice-grid/angular';

const 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' },
];

const rows = [/* circuit records */];



@Component({
  selector: 'app-root',
  standalone: true,
  imports: [LatticeGridComponent],
  template:
    '<div style="display:grid;grid-template-columns:repeat(2, 1fr);gap:14px;height:210px">' +
    '<div id="pie"></div>' +
    '<div id="donut"></div>' +
    '<div id="sunburst"></div>' +
    '<div id="treemap"></div>' +
    '</div>' +
    '<lattice-grid [config]="grid" (grid-ready)="onGridReady()" style="display:block;height:340px;margin-top:14px"></lattice-grid>',
})
export class AppComponent {
  @ViewChild(LatticeGridComponent) gridRef!: LatticeGridComponent;

  grid = {
    rowKey: 'id',
    columns: columns,
    rows: rows,
  };

  // The grid is created once the view has rendered, so the live instance
  // arrives on grid-ready rather than in ngAfterViewInit.
  onGridReady() {
    const grid = this.gridRef.grid;
    createChart({ grid, container: '#pie',      type: 'pie',      x: 'status', y: 'charge' });
    createChart({ grid, container: '#donut',    type: 'donut',    x: 'status', y: 'charge' });
    createChart({ grid, container: '#sunburst', type: 'sunburst', x: 'region', y: 'charge' });
    createChart({ grid, container: '#treemap',  type: 'treemap',  x: 'region', y: 'charge' });
  }
}

bootstrapApplication(AppComponent, {
  providers: [provideLattice({ createGrid })],
});

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