Lattice Grid Buy a licence

demo D37

Pie and donut in a cell

Composition per row, at 24 pixels, still legible

render: 'pie' | 'donut'

Building…
Loading a live grid…

The configuration

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/lattice-grid.min.css">

<div id="grid"></div>

<script type="module">
  import React from 'https://esm.sh/react@18';
  import { createRoot } from 'https://esm.sh/react-dom@18/client';
  import { createGrid } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/lattice-grid.esm.min.js';
  import createLatticeGrid from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/modules/react.esm.min.js';

  const LatticeGrid = createLatticeGrid({ React, createGrid });

  // The parts of a whole, drawn inside a cell from one array per row. The hole
  // is a fraction of the radius: larger reads as a ring and loses the small
  // slices, which is about as far as a cell-sized chart goes.
  const columns = [
    { field: 'service', title: 'Service', layout: { pin: 'start', width: 170 } },
    { field: 'team', title: 'Team', filter: { type: 'set' } },
    { id: 'mix-pie', field: 'mix', title: 'Pie', layout: { width: 110 },
      sort: { enabled: false }, filter: { enabled: false }, cell: { render: 'pie' } },
    { id: 'mix-donut', field: 'mix', title: 'Donut', layout: { width: 110 },
      sort: { enabled: false }, filter: { enabled: false }, cell: { render: 'donut', props: { hole: 0.55 } } },
    { id: 'mix-thin-donut', field: 'mix', title: 'Thin donut', layout: { width: 130 },
      sort: { enabled: false }, filter: { enabled: false }, cell: { render: 'donut', props: { hole: 0.72 } } },
    // The same four parts read against one shared axis, which stays legible where
    // a column of pies does not.
    { id: 'mix-the-same-stacked', field: 'mix', title: 'The same, stacked', layout: { width: 200 },
      sort: { enabled: false }, filter: { enabled: false }, cell: { render: 'stacked' } },
    { field: 'region', title: 'Region', filter: { type: 'set' } },
  ];

  const rows = [/* service records, each with a mix array of parts */];

  function App() {
    return (
      <LatticeGrid
        rowKey="id"
        selection="multiple"
        toolPanel={{ side: 'left', panels: ['columns', 'filters', 'views', 'quick'],
          actions: ['undo', 'redo', 'export', 'restore', 'maximise'], exportName: 'lattice-demo' }}
        columns={columns}
        rows={rows}
        style={{ height: '540px' }}
      />
    );
  }

  createRoot(document.getElementById('grid')).render(<App />);
</script>

Drawing a pie or donut chart inside a single cell

A pie or donut in a cell is a composition chart, share of total, drawn small enough to sit inside a normal row rather than a dashboard tile. A developer reaches for one wherever a row’s value is really a split, a support queue broken down by priority, a budget by department, a portfolio by asset class, and the split itself is the fact worth seeing at a glance next to the row’s other columns. Lattice Grid controls the shape with the render option on a column definition, set to 'pie' or 'donut', so a column of category breakdowns switches between a filled disc and a ringed one by changing a single string. The cell value is an array of segment values, drawn to a small canvas sized to the row height, commonly 24 pixels, so segment boundaries stay distinguishable rather than blurring into a smudge of colour. Because charts are canvas-based and scoped to the cell, only rows currently on screen are drawn, so a column of compositions scrolling through several thousand rows costs no more than any other rendered column, the same row virtualisation that keeps a JavaScript data grid responsive elsewhere in the sheet. Segment colours are set once per column, so a sheet of pie or donut cells stays visually consistent without per-row styling work.

Can you put a pie chart inside a table cell?

Yes. Set render: 'pie' or render: 'donut' on a column definition in Lattice Grid and pass an array of segment values as the cell’s data. The grid draws a small canvas chart sized to the row for each visible cell, so a table of accounts, categories or queues can show each row’s composition alongside its other fields, without a separate chart panel.

An in-cell renderer, not the charting module. This draws one SVG inside a cell, sized to the cell and costing what a cell costs as rows recycle. It is a different, older feature from the charts module, which draws full charts from the grid’s own filtered rows across thirty types and redraws them as the grid moves. Reach for a renderer when the shape belongs in the row; reach for charts when it belongs above the grid.

Related demos