Charts with no grid on screen: JavaScript Data Grid Demo

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

<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; height: 260px">
  <div id="by-region"></div>
  <div id="by-status"></div>
  <div id="distribution"></div>
</div>

<script type="module">
  import { createChart } from '@toclocoinc/lattice-grid/modules/charts';

  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' },
  ];

  // createHeadlessGrid holds and shapes the data with no table drawn at all.
  // The charts read it exactly as they read a visible grid, with the same
  // follow behaviour: filter the headless grid and every chart redraws.
  const grid = LatticeGrid.createHeadlessGrid({ rowKey: 'id', columns, rows });  // circuit records

  createChart({ grid, container: document.getElementById('by-region'), type: 'bar',       x: 'region', y: 'charge', title: 'by region' });
  createChart({ grid, container: document.getElementById('by-status'), type: 'donut',     x: 'status', y: 'charge', title: 'by status' });
  createChart({ grid, container: document.getElementById('distribution'), type: 'histogram', y: 'charge',           title: 'distribution' });
</script>