Sync rows to a Chart.js chart

In this tutorial, you will sync selected rows from a Handsontable grid to a Chart.js bar chart in real time. You will learn how to use afterSelectionEnd and afterDeselect hooks to read the current selection and update the chart without destroying and recreating it.

1
/* file: app.component.ts */
2
import { Component, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
3
import { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';
4
import { Chart, registerables, ChartConfiguration } from 'chart.js';
5

6
Chart.register(...registerables);
7

8
/* start:skip-in-preview */
9
const data = [
10
  { campaign: 'Spring Sale 2025', q1Budget: 12000, q1Revenue: 34500, q2Budget: 15000, q2Revenue: 41200 },
11
  { campaign: 'Brand Awareness Q1', q1Budget: 8000, q1Revenue: 11300, q2Budget: 9500, q2Revenue: 13800 },
12
  { campaign: 'Summer Promo', q1Budget: 5000, q1Revenue: 6200, q2Budget: 18000, q2Revenue: 52400 },
13
  { campaign: 'Email Retargeting', q1Budget: 3500, q1Revenue: 9800, q2Budget: 4200, q2Revenue: 11600 },
14
  { campaign: 'Influencer Campaign', q1Budget: 20000, q1Revenue: 38700, q2Budget: 22000, q2Revenue: 44100 },
15
  { campaign: 'SEO Push Q2', q1Budget: 6000, q1Revenue: 7400, q2Budget: 9000, q2Revenue: 21300 },
16
  { campaign: 'Holiday Countdown', q1Budget: 4500, q1Revenue: 5100, q2Budget: 25000, q2Revenue: 68900 },
17
  { campaign: 'Brand Awareness Q3', q1Budget: 11000, q1Revenue: 16800, q2Budget: 13500, q2Revenue: 19400 },
18
];
19
/* end:skip-in-preview */
20

21
@Component({
22
  standalone: true,
23
  imports: [HotTableModule],
24
  selector: 'example1-chartjs-sync',
25
  styles: [`
26
    #chart-canvas {
27
      max-height: 300px;
28
      margin-top: 16px;
29
    }
30
  `],
31
  template: `
32
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
33
    <canvas #chartCanvas id="chart-canvas"></canvas>
34
  `,
35
})
36
export class AppComponent implements AfterViewInit, OnDestroy {
37
  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;
38
  @ViewChild('chartCanvas') readonly canvasRef!: ElementRef<HTMLCanvasElement>;
39

40
  readonly data = data;
41

42
  private chart: Chart<'bar'> | null = null;
43

44
  readonly gridSettings: GridSettings = {
45
    colHeaders: ['Campaign', 'Q1 Budget ($)', 'Q1 Revenue ($)', 'Q2 Budget ($)', 'Q2 Revenue ($)'],
46
    columns: [
47
      { data: 'campaign', type: 'text', width: 200 },
48
      { data: 'q1Budget', type: 'numeric', numericFormat: { pattern: '$0,0' }, width: 120 },
49
      { data: 'q1Revenue', type: 'numeric', numericFormat: { pattern: '$0,0' }, width: 120 },
50
      { data: 'q2Budget', type: 'numeric', numericFormat: { pattern: '$0,0' }, width: 120 },
51
      { data: 'q2Revenue', type: 'numeric', numericFormat: { pattern: '$0,0' }, width: 120 },
52
    ],
53
    rowHeaders: true,
54
    selectionMode: 'range',
55
    height: 'auto',
56
    width: '100%',
57
    autoWrapRow: true,
58
    afterSelectionEnd: () => {
59
      this.updateChart();
60
    },
61
    afterDeselect: () => {
62
      this.updateChart();
63
    },
64
    licenseKey: 'non-commercial-and-evaluation',
65
  };
66

67
  ngAfterViewInit(): void {
68
    const config: ChartConfiguration<'bar'> = {
69
      type: 'bar',
70
      data: {
71
        labels: ['Select rows above to compare campaigns'],
72
        datasets: [
73
          {
74
            label: 'Q1 Revenue ($)',
75
            data: [0],
76
            backgroundColor: 'rgba(54, 162, 235, 0.7)',
77
            borderColor: 'rgba(54, 162, 235, 1)',
78
            borderWidth: 1,
79
          },
80
          {
81
            label: 'Q2 Revenue ($)',
82
            data: [0],
83
            backgroundColor: 'rgba(255, 99, 132, 0.7)',
84
            borderColor: 'rgba(255, 99, 132, 1)',
85
            borderWidth: 1,
86
          },
87
        ],
88
      },
89
      options: {
90
        responsive: true,
91
        maintainAspectRatio: false,
92
        plugins: {
93
          legend: { position: 'top' },
94
          title: { display: true, text: 'Campaign Revenue Comparison' },
95
        },
96
        scales: {
97
          y: {
98
            beginAtZero: true,
99
            ticks: {
100
              callback: (value) => `$${Number(value).toLocaleString()}`,
101
            },
102
          },
103
        },
104
      },
105
    };
106

107
    this.chart = new Chart(this.canvasRef.nativeElement, config);
108
  }
109

110
  ngOnDestroy(): void {
111
    this.chart?.destroy();
112
  }
113

114
  private updateChart(): void {
115
    const hot = this.hotTable?.hotInstance;
116
    const chart = this.chart;
117

118
    if (!hot || !chart) {
119
      return;
120
    }
121

122
    const selected = hot.getSelected();
123

124
    if (!selected || selected.length === 0) {
125
      chart.data.labels = ['Select rows above to compare campaigns'];
126
      chart.data.datasets[0].data = [0];
127
      chart.data.datasets[1].data = [0];
128
      chart.update();
129

130
      return;
131
    }
132

133
    const rowSet = new Set<number>();
134

135
    for (const [r1, , r2] of selected) {
136
      const minRow = Math.min(r1, r2);
137
      const maxRow = Math.max(r1, r2);
138

139
      for (let row = minRow; row <= maxRow; row++) {
140
        rowSet.add(row);
141
      }
142
    }
143

144
    const rows = [...rowSet].sort((a, b) => a - b);
145
    const labels: string[] = [];
146
    const q1Values: number[] = [];
147
    const q2Values: number[] = [];
148

149
    for (const row of rows) {
150
      const rowData = hot.getDataAtRow(row);
151

152
      labels.push(rowData[0] as string);
153
      q1Values.push(rowData[2] as number);
154
      q2Values.push(rowData[4] as number);
155
    }
156

157
    chart.data.labels = labels;
158
    chart.data.datasets[0].data = q1Values;
159
    chart.data.datasets[1].data = q2Values;
160
    chart.update();
161
  }
162
}
163
/* end-file */
164

165
/* file: app.config.ts */
166
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
167
import { registerAllModules } from 'handsontable/registry';
168
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
169

170
registerAllModules();
171

172
export const appConfig: ApplicationConfig = {
173
  providers: [
174
    provideZoneChangeDetection({ eventCoalescing: true }),
175
    {
176
      provide: HOT_GLOBAL_CONFIG,
177
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
178
    },
179
  ],
180
};
181
/* end-file */

1
<div><example1-chartjs-sync></example1-chartjs-sync></div>

Overview

Difficulty: Beginner Time: ~15 minutes Libraries: chart.js

This recipe shows how to connect a Handsontable grid to a Chart.js bar chart. When the user selects rows in the grid, the chart below updates immediately to show the corresponding data. No page reload or button click is required.

What You’ll Build

A grid showing marketing campaign data with two numeric columns per campaign (Q1 Revenue and Q2 Revenue). Selecting one or more rows in the grid updates a bar chart below the grid to compare the revenue figures for those campaigns. Deselecting all rows returns the chart to a placeholder state.

Before You Begin

Install Chart.js in your project:

1
npm install chart.js

If you want to run the example without a build step, include Chart.js from a CDN instead:

1
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Import Dependencies
```
1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3
import { Chart, registerables } from 'chart.js';
4

5
registerAllModules();
6
Chart.register(...registerables);
```
registerAllModules() activates all Handsontable plugins and cell types. Chart.register(...registerables) registers all Chart.js components — scales, controllers, and elements — needed to render bar charts.

Prepare the Data

1
const data = [
2
  { campaign: 'Spring Sale 2025', q1Budget: 12000, q1Revenue: 34500, q2Budget: 15000, q2Revenue: 41200 },
3
  { campaign: 'Brand Awareness Q1', q1Budget: 8000, q1Revenue: 11300, q2Budget: 9500, q2Revenue: 13800 },
4
  // ... more rows
5
];

The dataset uses an analytics domain: each row is a marketing campaign with budget and revenue figures for Q1 and Q2. The chart will display Q1 and Q2 revenue for selected rows.

Create the Chart Instance

1
const canvas = document.querySelector('#chart-canvas');
2

3
const chart = new Chart(canvas, {
4
  type: 'bar',
5
  data: {
6
    labels: ['Select rows above to compare campaigns'],
7
    datasets: [
8
      {
9
        label: 'Q1 Revenue ($)',
10
        data: [0],
11
        backgroundColor: 'rgba(54, 162, 235, 0.7)',
12
      },
13
      {
14
        label: 'Q2 Revenue ($)',
15
        data: [0],
16
        backgroundColor: 'rgba(255, 99, 132, 0.7)',
17
      },
18
    ],
19
  },
20
  options: {
21
    responsive: true,
22
    maintainAspectRatio: false,
23
  },
24
});

Create the Chart.js instance once — before initializing Handsontable. The initial state uses a placeholder label and zero values. You will update these values later using chart.update() instead of destroying and recreating the chart on every selection change. This avoids expensive DOM teardown and prevents flickering.

Write the `updateChart` Function

1
function updateChart(hot) {
2
  const selected = hot.getSelected();
3

4
  if (!selected || selected.length === 0) {
5
    chart.data.labels = ['Select rows above to compare campaigns'];
6
    chart.data.datasets[0].data = [0];
7
    chart.data.datasets[1].data = [0];
8
    chart.update();
9
    return;
10
  }
11

12
  const rowSet = new Set();
13

14
  for (const [r1, , r2] of selected) {
15
    const minRow = Math.min(r1, r2);
16
    const maxRow = Math.max(r1, r2);
17

18
    for (let row = minRow; row <= maxRow; row++) {
19
      rowSet.add(row);
20
    }
21
  }
22

23
  const rows = [...rowSet].sort((a, b) => a - b);
24
  const labels = [];
25
  const q1Values = [];
26
  const q2Values = [];
27

28
  for (const row of rows) {
29
    const rowData = hot.getDataAtRow(row);
30

31
    labels.push(rowData[0]);
32
    q1Values.push(rowData[2]);
33
    q2Values.push(rowData[4]);
34
  }
35

36
  chart.data.labels = labels;
37
  chart.data.datasets[0].data = q1Values;
38
  chart.data.datasets[1].data = q2Values;
39
  chart.update();
40
}

hot.getSelected() returns an array of [startRow, startCol, endRow, endCol] tuples — one entry per selection range. With selectionMode: 'range', the logic handles arbitrary ranges correctly by extracting unique row indices.

The function uses a Set to collect unique row indices. This prevents duplicates when selection ranges overlap. Rows are then sorted so the chart bars appear in the same top-to-bottom order as the grid.

hot.getDataAtRow(row) returns the current rendered row data as an array. Column indexes 0, 2, and 4 correspond to Campaign name, Q1 Revenue, and Q2 Revenue respectively.

Assigning new arrays to chart.data.labels and chart.data.datasets[i].data then calling chart.update() is the recommended Chart.js pattern for in-place updates. It avoids the cost of destroying and recreating the chart instance.

Initialize Handsontable with `selectionMode: 'range'`

1
const hot = new Handsontable(container, {
2
  data,
3
  colHeaders: ['Campaign', 'Q1 Budget ($)', 'Q1 Revenue ($)', 'Q2 Budget ($)', 'Q2 Revenue ($)'],
4
  columns: [
5
    { data: 'campaign', type: 'text', width: 200 },
6
    { data: 'q1Budget', type: 'numeric', numericFormat: { pattern: '$0,0' }, width: 120 },
7
    { data: 'q1Revenue', type: 'numeric', numericFormat: { pattern: '$0,0' }, width: 120 },
8
    { data: 'q2Budget', type: 'numeric', numericFormat: { pattern: '$0,0' }, width: 120 },
9
    { data: 'q2Revenue', type: 'numeric', numericFormat: { pattern: '$0,0' }, width: 120 },
10
  ],
11
  rowHeaders: true,
12
  selectionMode: 'range',
13
  afterSelectionEnd() {
14
    updateChart(this);
15
  },
16
  afterDeselect() {
17
    updateChart(this);
18
  },
19
  licenseKey: 'non-commercial-and-evaluation',
20
});

selectionMode: 'range' allows selecting a contiguous range of cells. Click any cell in a row to include that row in the chart. Drag to select multiple rows at once.

Two hooks drive the chart updates:

afterSelectionEnd — fires when the user finishes a selection. The this context inside the hook is the Handsontable instance, so passing this to updateChart provides direct access to the grid’s data and selection state.
afterDeselect — fires when all cells are deselected (e.g., pressing Escape). Without this hook, the chart would retain the last selection’s bars after the user clears the selection.

How It Works - Complete Flow

Grid renders with 8 campaign rows. The chart shows a placeholder label.
User clicks a row — afterSelectionEnd fires. hot.getSelected() returns one range tuple. updateChart reads that row’s campaign name and revenue values, then calls chart.update(). The chart now shows one group of two bars.
User drags across another row — afterSelectionEnd fires again. hot.getSelected() returns the range tuple. The Set deduplicates rows. The chart now shows two groups of bars.
User presses Escape — afterDeselect fires. hot.getSelected() returns undefined. updateChart resets the chart to the placeholder state.

What you learned

How to use afterSelectionEnd and afterDeselect hooks to react to grid selection changes.
How to read multi-range selections with hot.getSelected() and collect unique row indices.
How to use hot.getDataAtRow() to read current cell values.
How to update a Chart.js chart in place with chart.data.labels, chart.data.datasets[i].data, and chart.update() — without destroying and recreating the chart instance.
How selectionMode: 'range' enables range selection for comparison workflows.

Next steps

Extend the chart to include more numeric columns (e.g., add Q1 Budget and Q2 Budget as additional datasets).
Add a column filter so the chart only reflects visible rows.
Replace the bar chart with a radar or line chart to show trends across more dimensions.
Persist the selected row indices to a URL parameter so users can share a specific comparison view.