Charts with no grid on screen

import * as ng from '@angular/core';
import { Component, AfterViewInit } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { createHeadlessGrid } from '@toclocoinc/lattice-grid';
import '@toclocoinc/lattice-grid/css';
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' },
];

@Component({
  selector: 'app-root',
  standalone: true,
  template:
    '<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>',
})
export class AppComponent implements AfterViewInit {
  // 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.
  ngAfterViewInit() {
    const grid = createHeadlessGrid({ rowKey: 'id', columns, rows: [/* circuit records */] });
    createChart({ grid, container: '#by-region', type: 'bar',       x: 'region', y: 'charge', title: 'by region' });
    createChart({ grid, container: '#by-status', type: 'donut',     x: 'status', y: 'charge', title: 'by status' });
    createChart({ grid, container: '#distribution', type: 'histogram', y: 'charge',            title: 'distribution' });
  }
}

bootstrapApplication(AppComponent);