Handling onClick Events on ChartJS Bar Charts

onlinecode

2 years ago

Handling onClick Events on ChartJS Bar Charts

In this post, we will give you information about Handling onClick Events on ChartJS Bar Charts. Here we will give you detail about Handling onClick Events on ChartJS Bar Charts And how to use it also give you a demo for it if it is necessary.

Detecting what bar on a bar chart the user clicked is easy, but the API for doing so has changed several times between major ChartJS releases.
For ChartJS 4.x, you need to attach an onclick handler to the chart’s canvas and use the getElementsForEventAtNode() method as follows.
This method returns an object which contains an index property that tells you which index in your labels was clicked.

const canvas = document.getElementById('chart');
const ctx = canvas.getContext('2d');
const chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [{
      label: 'Easy as',
      data: [1, 2, 3],
    }],
  },
  options: {
    responsive: true
  }
});

// Make sure to attach 'onclick' to the canvas, **not** the chart instance
canvas.onclick = (evt) => {
  const res = chart.getElementsAtEventForMode(
    evt,
    'nearest',
    { intersect: true },
    true
  );
  // If didn't click on a bar, 'res' will be an empty array
  if (res.length === 0) {
    return;
  }
  // Alerts "You clicked on A" if you click the "A" chart
  alert('You clicked on ' + chart.data.labels[res[0].index]);
};

Below is a live example.
Click on “A” to see a You clicked on A alert.

In ChartJS 2 and 3 for Handling onClick Events on ChartJS Bar Charts

The only difference with ChartJS 2.x and 3.x is you need to use the getElementAtEvent() method, not getElementsAtEventForMode().
The getElementAtEvent() method is slightly more concise.

// The following only works with ChartJS 2.x or 3.x.
canvas.onclick = (evt) => {
  const res = chart.getElementAtEvent(evt);
  if (res.length === 0) {
    return;
  }
  alert('You clicked on ' + chart.data.labels[res[0]._index]);
};

Chart.js is a free, open-source JavaScript library for creating interactive charts. It is used by millions of developers worldwide to create beautiful and informative charts for their websites and applications.

Chart.js is easy to use and has a wide range of features, including:

Support for eight chart types: bar, line, area, pie, bubble, radar, polar, and scatter
Highly customizable options for colors, fonts, and styles
Ability to add annotations, tooltips, and other interactive elements
Support for zooming and panning
Integration with popular frameworks like React and Angular

Chart.js is a powerful tool that can be used to create a wide variety of charts. It is a great choice for developers who want to create beautiful and informative charts for their websites and applications.

Here are some of the benefits of using Chart.js:

It is free and open-source.
It is easy to use.
It has a wide range of features.
It is highly customizable.
It is well-documented.
It is actively maintained.
It has a large community of users and developers.

If you are looking for a powerful and easy-to-use JavaScript library for creating interactive charts, then Chart.js is a great option.

Here are some examples of charts that can be created with Chart.js:

Bar charts are used to show comparisons between different values.
Line charts are used to show trends over time.
Area charts are used to show the cumulative sum of values over time.
Pie charts are used to show the relative sizes of different parts of a whole.
Bubble charts are used to show the relationship between two variables, with the size of the bubble representing a third variable.
Radar charts are used to show the performance of different entities on multiple dimensions.
Polar charts are used to show the relationship between two variables, with the angle of the data point representing one variable and the length of the data point representing the other variable.
Scatter charts are used to show the relationship between two variables without any particular emphasis on one variable over the other.