How to redirect user when clicking on a Chart element

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:

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


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.com/jerairrest/react-chartjs-2#onelementsclick--getelementsatevent-function

1 Answer
1

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:

onElementsClick

onElementsClick

<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.com";
/>


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).

elems

<Doughnut data=data onElementsClick=data => this.props.handleTabClick.bind(this.state.currentObj, 'view_page', this.props.pageId, 'ei') />

handleTabClick

pageId

bind

this

onElementsClick=data => this.props.handleTabClick(this.state.currentObj, 'view_page', this.props.pageId, 'ei')

2 categories - manual, automation

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.