Chart.js sync from grid filter state

Live in demo 73-chartjs-sync.

Open the live example: Real-time + Chart.js sync (Real-time & Streaming)

When

A chart that re-renders from api.getDisplayedRows() on every filter / sort change.

How

Key API surface:

See the demo source for the full implementation; this recipe pins the pattern + the surface so you can copy-paste it confidently. The doc page that explains the underlying feature in depth is linked from the recipes index.

Built in, without a charting library

The same loop with the grid's own chart: rowsToChartSpec turns the displayed rows into a spec, and re-running it on onFiltersChange / onSortingChange is the whole sync. No second library, and the chart inherits the grid's theme tokens.

<script lang="ts">
  import { SvGrid, SvChart, rowsToChartSpec, tableFeatures, columnFilteringFeature, type SvGridApi, type ChartSpec, type GridColumns } from '@svgrid/grid'

  type Row = { region: string; product: string; revenue: number }
  const data: Row[] = [
    { region: 'North', product: 'Web', revenue: 420 }, { region: 'North', product: 'Retail', revenue: 310 },
    { region: 'South', product: 'Web', revenue: 275 }, { region: 'South', product: 'Retail', revenue: 390 },
    { region: 'East', product: 'Web', revenue: 180 }, { region: 'West', product: 'Retail', revenue: 240 },
  ]
  const columns: GridColumns<Row> = [
    { field: 'region', header: 'Region' },
    { field: 'product', header: 'Product' },
    { field: 'revenue', header: 'Revenue', cellDataType: 'number' },
  ]
  const features = tableFeatures({ columnFilteringFeature })
  let api: SvGridApi<typeof features, Row> | null = null
  let spec = $state<ChartSpec>(rowsToChartSpec(data, { type: 'bar', category: 'region', value: 'revenue', series: 'product' }))
  const redraw = () => { if (api) spec = rowsToChartSpec(api.getDisplayedRows(), { type: 'bar', category: 'region', value: 'revenue', series: 'product' }) }
</script>

<SvGrid {data} {columns} {features} filterable showColumnFilters rowHeight={30} containerHeight={200}
  onApiReady={(a) => { api = a; redraw() }} onFiltersChange={redraw} onSortingChange={redraw} />
<SvChart {spec} height={220} />

Filter a column and the bars follow. The panel version of this, with a picker, cross-filtering and export, is the charting prop:

Open the live example: Integrated charts (no deps) (Charts)

See also

Live examples

  • Real-time + Chart.js sync - Mock WebSocket pushes price ticks every 350 ms. A Chart.js bar chart auto-syncs with the grid - filter the Symbol column, the chart trims to match.
  • Integrated charts (no deps) - Chart the grid data with no external charting library. SvGridChart renders a ChartSpec; rowsToChartSpec aggregates the grid current (filtered/sorted) rows into one. Bar, line, area, pie - plus 100% stacked, top-N + Other, an average reference line, and double-click-to-isolate a series. Filter the grid and the chart re-aggregates live.

Related articles

  • Sync Grid State to the URL in Svelte - Keep sort, filter, and page state in the URL query string so every grid view is bookmarkable and shareable - with real SvelteKit code.
  • Sparkline Cells in a Svelte Data Grid - Show inline trend sparklines inside grid cells using SvGrid's built-in sparkline column property - no charting library needed, just a field that holds a number array.
  • Saved Views - Persist Grid Layout and Filters - Give users named, switchable snapshots of column order, sorting, filters, and grouping - persisted to localStorage or a server adapter - using SvGrid's createNamedViews API.