demo D269

Slope chart in ESM

Two points per line so the direction of change from one period to the next is the message

type: 'slope', x, series, y

This draws two points per line so the direction of change from one period to the next is the message. It makes rise and fall between two moments obvious across many items, so the slope of each line carries the story.

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.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.71.0/lattice-grid.min.css">

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

<script type="module">
  import { createChart } from '@toclocoinc/lattice-grid/modules/charts';
  import '@toclocoinc/lattice-grid/modules/chart-slope';  // opt in to the slope type

  const grid = createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    columns: [
      { field: 'region', title: 'Region', filter: { type: 'set' } },
      { field: 'period', title: 'Year', filter: { type: 'set' } },
      { field: 'score', title: 'Score', type: 'number', total: 'avg' },
    ],
    rows,  // two rows a region, one per year: region, period, score
  });

  // series draws one line per region across the two periods; the slope is the
  // story: up, down or flat.
  createChart({
    grid,
    container: document.getElementById('chart'),
    type: 'slope',
    x: 'period',
    series: 'region',
    y: 'score',
    title: 'Score, year on year',
  });
</script>