I am using react-chartJs-2 library to display the charts. Suppose, user clicks on the bar/Doughnut chart section he must be redirected to a specific page. Following is the code I have done for DoughnutChart:

1. ChartDisplay.jsx

<div className="DonutChartSection" >
   <Doughnut labelArray = {this.state.labelArr} DataArray = {this.state.DoughnutDataArr} colorArray = {this.state.DoughnutColorArr} title={"Employees"} />
</div>

2. Doughnut.jsx

   import React from 'react';
   import {Doughnut} from 'react-chartjs-2';
   
   Chart.defaults.global.defaultFontStyle = 'Bold';  
   Chart.defaults.global.defaultLegendPosition = 'left';
   
   export default class DoughnutChartView extends React.Component{
     constructor(props) {
        super(props);
        this.state = { };
     }
   
     render() {
       let data = {
           labels: this.props.labelArray,
           datasets: [{
               data: this.props.DataArray,
               backgroundColor: this.props.colorArray,
               hoverBackgroundColor: this.props.colorArray,
           }]
       } 
       return (
         <div>
         <span className="titleName" >{this.props.title}</span> 
           <Doughnut data={data}  />
         </div>
       );
     }
   };
   

I went through the github page and found the following event which can be used for click event but can't figure out how can I use it in my code.

I am using react-chartJs-2 library to display the charts. Suppose, user clicks on the bar/Doughnut chart section he must be redirected to a specific page. Following is the code I have done for DoughnutChart:

1. ChartDisplay.jsx

<div className="DonutChartSection" >
   <Doughnut labelArray = {this.state.labelArr} DataArray = {this.state.DoughnutDataArr} colorArray = {this.state.DoughnutColorArr} title={"Employees"} />
</div>

2. Doughnut.jsx

   import React from 'react';
   import {Doughnut} from 'react-chartjs-2';
   
   Chart.defaults.global.defaultFontStyle = 'Bold';  
   Chart.defaults.global.defaultLegendPosition = 'left';
   
   export default class DoughnutChartView extends React.Component{
     constructor(props) {
        super(props);
        this.state = { };
     }
   
     render() {
       let data = {
           labels: this.props.labelArray,
           datasets: [{
               data: this.props.DataArray,
               backgroundColor: this.props.colorArray,
               hoverBackgroundColor: this.props.colorArray,
           }]
       } 
       return (
         <div>
         <span className="titleName" >{this.props.title}</span> 
           <Doughnut data={data}  />
         </div>
       );
     }
   };
   

I went through the github page and found the following event which can be used for click event but can't figure out how can I use it in my code.

https://github./jerairrest/react-chartjs-2#onelementsclick--getelementsatevent-function

• javascript
• reactjs
• react-chartjs

2 Answers 2

Indeed, you actually answered your question already: onElementsClick can be used to execute an action when user clicks on an element of the chart. onElementsClick is a prop of the chart itself, so:

<Doughnut data={data} onElementsClick={elems => {
    // if required to build the URL, you can 
    // get datasetIndex and value index from an `elem`:
    console.log(elems[0]._datasetIndex + ', ' + elems[0]._index);
    // and then redirect to the target page:
    window.location = "https://example.";
}} />

Note that elems may include more than one element, for example in case of a stacked bar chart (in which case it includes all elements of a bar clicked).

here is a actually quick solution for clicking on a pie Chart

import { Pie } from 'react-chartjs-2'
        <Pie
            getElementAtEvent={(data) => {
                if(data.length >= 1){
                    const dataItem: any  = data[0]
                    const index = dataItem.index
                    const foundLabel = props.labels[index]
                    // redirect or do stuff
                }
            }}