How to Handle onClick Events on ChartJS Bar Charts in Chart.JS?

In Chart.js, we can add behavior to bar charts by handling onClick events. This allows developers to create interactive charts where specific actions are triggered when a user clicks on a particular bar. Such actions can range from displaying additional information to dynamically updating the chart data, providing a more engaging user experience.

Chart.js CDN link

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>

These are the following approaches to handle onClick Events on ChartJS Bar:

Basic onClick Event

In this approach, we perform a basic onClick event on a Chart.js bar chart. When a user clicks on any bar, the event captures the clicked bar's label and value and then displays them in an alert box.

Example: The below example performs a Basic onClick Event on ChartJS Bar Charts in ChartJS.

Output:

Advanced onClick Event with Data Manipulation

In this approach, we are implementing an advanced onClick event on a Chart.js bar chart that allows for data manipulation. When a user clicks on a bar, the value associated with the clicked bar is increased by 10, and the chart is dynamically updated to reflect the change.

Example: The below example performs Advanced onClick Event with Data Manipulation on ChartJS Bar Charts in Chart.JS.

Output: