Hi,
Chart.js allows for event handling, is this available in primereact, Avalon? If so how is it accessed? I have tried adding some options as per the chart.js, i.e.
options: {onClick: this.onClick}
this gives a response of (event, items) when clicked but how can I find which dataset item was clicked on?
Regards
Chart interaction
Yes, you can use event handling based on Chart.js. You can try like the below code;
Also, you can see detail or example in ; https://stackoverflow.com/questions/262 ... n-chart-js
Code: Select all
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: '#42A5F5',
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: 'My Second dataset',
backgroundColor: '#9CCC65',
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
const options = {
legend: {
display: false
},
'onClick': function (evt, item) {
console.log('legend onClick', evt);
console.log('legd item', data.datasets[0].data[item[0]._index]);
}
};
Code: Select all
<Chart type="bar" data={data} options={options}/>
Hi, thanks for the response,
The issue here is that I have 6 data items per dataset and I can get the dataset index but not the data item index, i.e. I have three non zero items in my 5th dataset and when clicking on any of the three I get the following;
The 5 is the dataset index, the legd item value of 4 makes no sense except by coincidence it's the max value for that dataset??
What am I missing
The issue here is that I have 6 data items per dataset and I can get the dataset index but not the data item index, i.e. I have three non zero items in my 5th dataset and when clicking on any of the three I get the following;
Code: Select all
legend onClick MouseEvent
5
legd item 4
legend onClick MouseEvent
5
legd item 4
legend onClick MouseEvent
5
legd item 4
What am I missing
-
- Information
-
Who is online
Users browsing this forum: No registered users and 21 guests