demo D37
Pie and donut in a cell
Composition per row, at 24 pixels, still legible
render: 'pie' | 'donut'
The configuration
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.css">
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.js"></script>
<div id="grid" style="height: 540px"></div>
<script>
const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
rowKey: 'id',
selection: 'multiple',
toolPanel: {
side: 'left',
panels: ['columns', 'filters', 'views', 'quick'],
actions: ['undo', 'redo', 'export', 'restore', 'maximise'],
exportName: 'lattice-demo',
},
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' } },
// The hole is a fraction of the radius. Larger reads as a ring and
// loses the small slices; this is about as far as 24 pixels goes.
{ 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 } } },
{ 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' } },
],
rows, // rendering demo rows
});
</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.