demo D163

Line, area, bar and scatter in React

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 React version. The grid mounts through the createLatticeGrid adapter, which takes its configuration as ordinary props and hands back the live grid through a ref. The grid below is the same one every other tab runs.

The configuration

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

<div id="app"></div>

<script type="module">
  import React from 'https://esm.sh/react@18';
  import { createRoot } from 'https://esm.sh/react-dom@18/client';
  import { createGrid } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.esm.min.js';
  import { createLatticeReact } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/react.esm.min.js';
  import { createChart } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/charts.esm.min.js';

  const { LatticeGrid, LatticeChart } = createLatticeReact({ React, createGrid, createChart });

  const columns = [
    { field: 'circuit', title: 'Circuit', layout: { width: 180 } },
    { field: 'region', title: 'Region', filter: { type: 'set' } },
    { field: 'status', title: 'Status', filter: { type: 'set' } },
    { field: 'bandwidth', title: 'Bandwidth', type: 'number' },
    { field: 'charge', title: 'Monthly charge', type: 'number',
      format: { style: 'currency', currency: 'GBP' }, total: 'sum' },
  ];

  const rows = [/* circuit records */];
  // combo mixes marks and two axes, here bars of charge and a line of bandwidth.
  const comboMeasures = [
    { col: 'charge', fn: 'sum', type: 'bar', axis: 'left' },
    { col: 'bandwidth', fn: 'mean', type: 'line', axis: 'right' },
  ];

  function App() {
    const [grid, setGrid] = React.useState(null);

    // The cartesian family, each reading the live grid, so a filter or an
    // edit redraws every chart together.
    return (
      <>
        {grid && (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '14px', height: '210px' }}>
            <LatticeChart grid={grid} type="line" x="region" y="charge" />
            <LatticeChart grid={grid} type="step" x="region" y="charge" />
            <LatticeChart grid={grid} type="area" x="region" y="charge" />
            {/* rangeArea draws the min-to-max band of y at each x. */}
            <LatticeChart grid={grid} type="rangeArea" x="region" y="charge" />
            <LatticeChart grid={grid} type="bar" x="region" y="charge" />
            <LatticeChart grid={grid} type="horizontalBar" x="region" y="charge" />
            <LatticeChart grid={grid} type="scatter" x="bandwidth" y="charge" />
            <LatticeChart grid={grid} type="bubble" x="bandwidth" y="charge" size="charge" />
            <LatticeChart grid={grid} type="combo" x="region" measures={comboMeasures} />
            {/* pareto sorts the bars and draws the cumulative line. */}
            <LatticeChart grid={grid} type="pareto" x="status" y="charge" />
          </div>
        )}
        <LatticeGrid
          rowKey="id"
          columns={columns}
          rows={rows}
          onGridReady={setGrid}
          style={{ height: '340px', marginTop: '14px' }}
        />
      </>
    );
  }

  createRoot(document.getElementById('app')).render(<App />);
</script>