Chart interaction

UI Components for React
Post Reply
Hanland
Posts: 22
Joined: 07 Jan 2018, 14:12

31 Dec 2018, 20:07

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

merve7
Posts: 488
Joined: 12 Sep 2017, 10:44

08 Jan 2019, 10:34

Yes, you can use event handling based on Chart.js. You can try like the below code;

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}/>
Also, you can see detail or example in ; https://stackoverflow.com/questions/262 ... n-chart-js

Hanland
Posts: 22
Joined: 07 Jan 2018, 14:12

08 Jan 2019, 14:01

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;

Code: Select all

legend onClick MouseEvent
5
legd item 4
legend onClick MouseEvent
5
legd item 4
legend onClick MouseEvent
5
legd item 4
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

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 0 guests