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">
<style>
  #grid > div { height: 540px; }
</style>
<div id="grid"></div>

<script type="module">
  import * as Vue from 'https://esm.sh/vue@3';
  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/vue.esm.min.js';

  const LatticeGrid = createLatticeGrid({ vue: Vue, createGrid });

  Vue.createApp({
    components: { LatticeGrid },
    data() {
      return {
        config: {
          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' } },
            // The whole distribution in one cell, drawn straight from the row.
            { 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
        },
      };
    },
    template: '<lattice-grid v-bind="config" />',
  }).mount('#grid');
</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