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
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);
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
const container = document.querySelector('#example1');
22
const canvas = document.querySelector('#chart-canvas');
23

24
const chart = new Chart(canvas, {
25
  type: 'bar',
26
  data: {
27
    labels: ['Select rows above to compare campaigns'],
28
    datasets: [
29
      {
30
        label: 'Q1 Revenue ($)',
31
        data: [0],
32
        backgroundColor: 'rgba(54, 162, 235, 0.7)',
33
        borderColor: 'rgba(54, 162, 235, 1)',
34
        borderWidth: 1,
35
      },
36
      {
37
        label: 'Q2 Revenue ($)',
38
        data: [0],
39
        backgroundColor: 'rgba(255, 99, 132, 0.7)',
40
        borderColor: 'rgba(255, 99, 132, 1)',
41
        borderWidth: 1,
42
      },
43
    ],
44
  },
45
  options: {
46
    responsive: true,
47
    maintainAspectRatio: false,
48
    plugins: {
49
      legend: { position: 'top' },
50
      title: { display: true, text: 'Campaign Revenue Comparison' },
51
    },
52
    scales: {
53
      y: {
54
        beginAtZero: true,
55
        ticks: {
56
          callback: (value) => `$${value.toLocaleString()}`,
57
        },
58
      },
59
    },
60
  },
61
});
62

63
function updateChart(hot) {
64
  const selected = hot.getSelected();
65

66
  if (!selected || selected.length === 0) {
67
    chart.data.labels = ['Select rows above to compare campaigns'];
68
    chart.data.datasets[0].data = [0];
69
    chart.data.datasets[1].data = [0];
70
    chart.update();
71

72
    return;
73
  }
74

75
  const rowSet = new Set();
76

77
  for (const [r1, , r2] of selected) {
78
    const minRow = Math.min(r1, r2);
79
    const maxRow = Math.max(r1, r2);
80

81
    for (let row = minRow; row <= maxRow; row++) {
82
      rowSet.add(row);
83
    }
84
  }
85

86
  const rows = [...rowSet].sort((a, b) => a - b);
87
  const labels = [];
88
  const q1Values = [];
89
  const q2Values = [];
90

91
  for (const row of rows) {
92
    const rowData = hot.getDataAtRow(row);
93

94
    labels.push(rowData[0]);
95
    q1Values.push(rowData[2]);
96
    q2Values.push(rowData[4]);
97
  }
98

99
  chart.data.labels = labels;
100
  chart.data.datasets[0].data = q1Values;
101
  chart.data.datasets[1].data = q2Values;
102
  chart.update();
103
}
104

105
// eslint-disable-next-line no-unused-vars
106
const hot = new Handsontable(container, {
107
  data,
108
  colHeaders: ['Campaign', 'Q1 Budget ($)', 'Q1 Revenue ($)', 'Q2 Budget ($)', 'Q2 Revenue ($)'],
109
  columns: [
110
    { data: 'campaign', type: 'text', width: 200 },
111
    { data: 'q1Budget', type: 'numeric', numericFormat: { pattern: '$0,0' }, width: 120 },
112
    { data: 'q1Revenue', type: 'numeric', numericFormat: { pattern: '$0,0' }, width: 120 },
113
    { data: 'q2Budget', type: 'numeric', numericFormat: { pattern: '$0,0' }, width: 120 },
114
    { data: 'q2Revenue', type: 'numeric', numericFormat: { pattern: '$0,0' }, width: 120 },
115
  ],
116
  rowHeaders: true,
117
  selectionMode: 'range',
118
  height: 'auto',
119
  width: '100%',
120
  autoWrapRow: true,
121
  afterSelectionEnd() {
122
    updateChart(this);
123
  },
124
  afterDeselect() {
125
    updateChart(this);
126
  },
127
  licenseKey: 'non-commercial-and-evaluation',
128
});

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

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

8
/* start:skip-in-preview */
9
interface CampaignRow {
10
  campaign: string;
11
  q1Budget: number;
12
  q1Revenue: number;
13
  q2Budget: number;
14
  q2Revenue: number;
15
}
16

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

29
const container = document.querySelector<HTMLDivElement>('#example1')!;
30
const canvas = document.querySelector<HTMLCanvasElement>('#chart-canvas')!;
31

32
const chartConfig: ChartConfiguration<'bar'> = {
33
  type: 'bar',
34
  data: {
35
    labels: ['Select rows above to compare campaigns'],
36
    datasets: [
37
      {
38
        label: 'Q1 Revenue ($)',
39
        data: [0],
40
        backgroundColor: 'rgba(54, 162, 235, 0.7)',
41
        borderColor: 'rgba(54, 162, 235, 1)',
42
        borderWidth: 1,
43
      },
44
      {
45
        label: 'Q2 Revenue ($)',
46
        data: [0],
47
        backgroundColor: 'rgba(255, 99, 132, 0.7)',
48
        borderColor: 'rgba(255, 99, 132, 1)',
49
        borderWidth: 1,
50
      },
51
    ],
52
  },
53
  options: {
54
    responsive: true,
55
    maintainAspectRatio: false,
56
    plugins: {
57
      legend: { position: 'top' },
58
      title: { display: true, text: 'Campaign Revenue Comparison' },
59
    },
60
    scales: {
61
      y: {
62
        beginAtZero: true,
63
        ticks: {
64
          callback: (value) => `$${Number(value).toLocaleString()}`,
65
        },
66
      },
67
    },
68
  },
69
};
70

71
const chart = new Chart(canvas, chartConfig);
72

73
function updateChart(hot: Handsontable): void {
74
  const selected = hot.getSelected();
75

76
  if (!selected || selected.length === 0) {
77
    chart.data.labels = ['Select rows above to compare campaigns'];
78
    chart.data.datasets[0].data = [0];
79
    chart.data.datasets[1].data = [0];
80
    chart.update();
81

82
    return;
83
  }
84

85
  const rowSet = new Set<number>();
86

87
  for (const [r1, , r2] of selected) {
88
    const minRow = Math.min(r1, r2);
89
    const maxRow = Math.max(r1, r2);
90

91
    for (let row = minRow; row <= maxRow; row++) {
92
      rowSet.add(row);
93
    }
94
  }
95

96
  const rows = [...rowSet].sort((a, b) => a - b);
97
  const labels: string[] = [];
98
  const q1Values: number[] = [];
99
  const q2Values: number[] = [];
100

101
  for (const row of rows) {
102
    const rowData = hot.getDataAtRow(row);
103

104
    labels.push(rowData[0] as string);
105
    q1Values.push(rowData[2] as number);
106
    q2Values.push(rowData[4] as number);
107
  }
108

109
  chart.data.labels = labels;
110
  chart.data.datasets[0].data = q1Values;
111
  chart.data.datasets[1].data = q2Values;
112
  chart.update();
113
}
114

115
// eslint-disable-next-line no-unused-vars
116
const hot = new Handsontable(container, {
117
  data,
118
  colHeaders: ['Campaign', 'Q1 Budget ($)', 'Q1 Revenue ($)', 'Q2 Budget ($)', 'Q2 Revenue ($)'],
119
  columns: [
120
    { data: 'campaign', type: 'text', width: 200 },
121
    { data: 'q1Budget', type: 'numeric', numericFormat: { pattern: '$0,0' }, width: 120 },
122
    { data: 'q1Revenue', type: 'numeric', numericFormat: { pattern: '$0,0' }, width: 120 },
123
    { data: 'q2Budget', type: 'numeric', numericFormat: { pattern: '$0,0' }, width: 120 },
124
    { data: 'q2Revenue', type: 'numeric', numericFormat: { pattern: '$0,0' }, width: 120 },
125
  ],
126
  rowHeaders: true,
127
  selectionMode: 'range',
128
  height: 'auto',
129
  width: '100%',
130
  autoWrapRow: true,
131
  afterSelectionEnd() {
132
    updateChart(this);
133
  },
134
  afterDeselect() {
135
    updateChart(this);
136
  },
137
  licenseKey: 'non-commercial-and-evaluation',
138
});

1
#chart-canvas {
2
  max-height: 300px;
3
  margin-top: 16px;
4
}

1
<div id="example1"></div>
2
<canvas id="chart-canvas"></canvas>

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.