demo D163

Line, area, bar and scatter in ESM

The cartesian types, one dataset

type: 'line' · 'step' · 'area' · 'bar' · 'combo' · 'pareto'

This shows the cartesian chart types, line, step, area, bar, combo and pareto, drawn from one dataset. It lets you compare how each shape reads the same numbers, so you can pick the one that tells your story clearest. The line chart also emphasises one series over the rest, by weight rather than only by colour.

Building…

Loading a live grid…

This is the ES module version. The grid is imported straight from a CDN as a module, the same configuration as the vanilla tab without a global script tag, so it drops into any bundler or a bare module script.

The configuration

<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.min.css">

<div id="grid" style="height: 340px"></div>
<div id="chart" style="height: 320px"></div>

<script type="module">
  import { createGrid } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.esm.min.js';

  import { createChart } from '@toclocoinc/lattice-grid/modules/charts';

  const grid = createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    formatting: {
      // A bar/horizontalBar with no series key reads these to colour each
      // mark, and names the rule that fired in the legend.
      charge: [
        { id: 'under', label: 'Under budget', when: { op: 'lt', value: 200_000 }, style: { background: '#1a7f37', color: '#fff' } },
        { id: 'near', label: 'Near budget', when: { op: 'lt', value: 225_000 }, style: { background: '#b26a00', color: '#fff' } },
        { id: 'over', label: 'Over budget', when: { op: 'gte', value: 225_000 }, style: { background: '#c02c38', color: '#fff' } },
      ],
    },
    columns: [
      { field: 'region', title: 'Region', filter: { type: 'set' } },
      { field: 'status', title: 'Status', filter: { type: 'set' } },
      { field: 'bandwidth', title: 'Bandwidth', type: 'number' },
      { field: 'utilisation', title: 'Utilisation', type: 'number', format: { decimals: 1, suffix: '%' } },
      { field: 'charge', title: 'Monthly charge', type: 'number',
        format: { style: 'currency', currency: 'GBP' }, total: 'sum' },
    ],
    rows,  // circuits: region, status, bandwidth, utilisation, charge
  });

  // The cartesian types read x and y the same way. Swap the type for any of:
  // line, step, area, rangeArea, bar, horizontalBar, scatter, bubble. combo and
  // pareto take measures instead of a single y (see the dual-axis sample).
  createChart({
    grid,
    container: document.getElementById('chart'),
    type: 'bar',
    x: 'region',
    y: 'charge',
    title: 'Monthly charge by region, by budget rule',
  });

  // horizontalBar reads the labels option too: one label per bar, at its end.
  // createChart({ grid, container, type: 'horizontalBar', x: 'region', y: 'charge', labels: true, title: '…' });
</script>