Lattice Grid Buy a licence

demo D35

Sparklines

Line, area and column charts inside a cell

render: 'line' | 'area' | 'column'

Building…
Loading a live grid…

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: 'traffic-requests-line', field: 'traffic', title: 'Requests, line', layout: { width: 190 },
        sort: { enabled: false }, filter: { enabled: false }, cell: { render: 'line' } },
      { id: 'traffic-requests-area', field: 'traffic', title: 'Requests, area', layout: { width: 190 },
        sort: { enabled: false }, filter: { enabled: false }, cell: { render: 'area' } },
      { id: 'traffic-requests-column', field: 'traffic', title: 'Requests, column', layout: { width: 190 },
        sort: { enabled: false }, filter: { enabled: false }, cell: { render: 'column' } },
      // Pinned to a shared scale. Left to its own extremes every cell fills
      // its own width, and two rows an order of magnitude apart draw the
      // same picture.
      { id: 'latency-p95-latency-shared-scale', field: 'latency', title: 'p95 latency, shared scale', layout: { width: 220 },
        sort: { enabled: false }, filter: { enabled: false }, cell: { render: 'line', props: { min: 0, max: 900 } } },
      { field: 'region', title: 'Region', filter: { type: 'set' } },
    ],
    rows,  // rendering demo rows
  });
</script>

Drawing line, area and column sparklines inside a cell

A sparkline is a small trend chart drawn inside a single cell rather than a separate panel, showing the shape of a series, a stock’s last thirty closes, a server’s hourly load, an account’s monthly spend, without the axis labels and legends a full chart carries. A developer reaches for one wherever a table needs to show change over time alongside a row’s other fields, rather than sending the reader to a separate view to see whether a number is trending up or down. Lattice Grid controls the shape with the render option, set to 'line', 'area' or 'column', so a column of daily revenue figures can switch from a line trend to a filled area or a column-per-point bar chart by changing one string on the column definition. Each sparkline draws to a small canvas sized to the cell, so the cost stays proportional to the points actually plotted rather than the row count, and a JavaScript data grid with a sparkline column scrolling through several thousand rows only renders the chart for rows currently on screen thanks to row virtualisation. Colour, stroke width and fill are set once per column rather than per cell, so a sheet of a thousand trend lines stays visually consistent without per-row styling work.

How do you show a trend line inside a table cell?

Set render: 'line' (or 'area' or 'column') on a column definition in Lattice Grid and pass the row’s series as the cell value, an array of numbers. The grid draws a small canvas-based chart sized to the cell for each visible row, so a table of accounts or metrics can show each row’s recent trend alongside its other fields.

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