demo D38
Stacked bars
Several series in one cell, sharing a scale across the column
render: 'stacked'
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-request-mix', field: 'mix', title: 'Request mix', layout: { width: 280 },
sort: { enabled: false }, filter: { enabled: false }, cell: { render: 'stacked' } },
// The parts, so the bar is never the only place a number lives.
{ field: 'mix.0', title: 'Cache', type: 'number', layout: { width: 100 }, format: { suffix: '%' } },
{ field: 'mix.1', title: 'Origin', type: 'number', layout: { width: 100 }, format: { suffix: '%' } },
{ field: 'mix.2', title: 'Edge', type: 'number', layout: { width: 100 }, format: { suffix: '%' } },
{ field: 'mix.3', title: 'Error', type: 'number', layout: { width: 100 }, format: { suffix: '%', decimals: 1 } },
{ field: 'status', title: 'Status', layout: { width: 130 },
cell: { render: 'pill', props: { variant: {
map: { healthy: 'success', degraded: 'warning', failing: 'danger' },
default: 'neutral',
} } } },
],
rows, // rendering demo rows
});
</script>Rendering stacked bar segments inside a single cell
A stacked bar packs several series into one cell, each segment sized against a scale shared across the column, so a row’s breakdown, spend by category, storage by type, votes by option, reads as a single shape rather than a run of separate numbers. A developer reaches for this where a table needs to show composition alongside magnitude, not just that a total is large, but which parts make it up, without a column per series. Lattice Grid controls this with render: 'stacked' on a column definition, taking the row’s series as an array or keyed object of values and drawing the segments to a canvas sized to the cell. Because the scale is shared down the column rather than recalculated per row, segment widths stay comparable from one row to the next, so scanning a column of stacked bars shows relative composition at a glance. As with the grid’s other canvas-based cell renderers, only rows on screen are drawn, so a stacked bar column behaves the same in a JavaScript data grid holding a few dozen rows as one holding a hundred thousand, courtesy of row virtualisation. Each segment carries its own colour and an accessible label, so the underlying values remain available to assistive technology even though the bar itself is drawn, not built from DOM elements per segment.
How do you show a breakdown of values inside one table cell?
Set render: 'stacked' on a column definition in Lattice Grid and give each row an array or object of values for that column, one entry per segment. The grid draws the segments to a canvas sized to the cell, scaled against the column’s shared maximum, so a table can show a row’s total and its composition together without adding a column per series.
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.