ChartJS on click to get label #351

cooperRjp · 2022-01-20T09:22:25Z

cooperRjp
Jan 20, 2022

using the bar chart i'm trying to get the label value of the bar which is clicked. I've looked at the docs on chart.js and they have this method:

function clickHandler(evt) {
    const points = myChart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true);

    if (points.length) {
        const firstPoint = points[0];
        var label = myChart.data.labels[firstPoint.index];
        var value = myChart.data.datasets[firstPoint.datasetIndex].data[firstPoint.index];
    }
}

and as an option on CChart i can pass an on click event as a option, but i'm struggling to get the value.

<CChart
    type="bar"
    height={120}
    data={{
        labels: dispatchDate,
        datasets: [
            {
                label: 'Number of Products',
                backgroundColor: 'blue',
                data: numberOfProducts,
            },
        ],
    }}
    options=
    {{
        onClick: (e) => {
            const points = this.getElementsAtEventForMode(e, 'nearest', { intersect: true }, true);
  
            if (points.length) {
                const firstPoint = points[0];
                var label = myChart.data.labels[firstPoint.index];
                var value = myChart.data.datasets[firstPoint.datasetIndex].data[firstPoint.index];
  
                console.log(label);
            }
  
  
        }
    }}
  />

Answered by cooperRjp

Jan 20, 2022

Just worked it out, here is the code if you are looking to do the same.

 <CChart
    type="bar"
    height={120}
    data={{
        labels: dispatchDate,
        datasets: [
            {
                label: 'Number of Products',
                backgroundColor: 'blue',
                data: numberOfProducts,
            },
        ],
    }}
    options=
    {{
        onClick: (e) => {
  
            var points = e.chart.getElementsAtEventForMode(e, 'nearest', { intersect: true }, true)
  
            if (points.length) {
                const firstPoint = points[0];
                var label = e.chart.data.labels[firstPoint.index];
                var value = e.chart.data.datasets[f…

View full answer

cooperRjp · 2022-01-20T09:30:39Z

cooperRjp
Jan 20, 2022
Author

Just worked it out, here is the code if you are looking to do the same.

 <CChart
    type="bar"
    height={120}
    data={{
        labels: dispatchDate,
        datasets: [
            {
                label: 'Number of Products',
                backgroundColor: 'blue',
                data: numberOfProducts,
            },
        ],
    }}
    options=
    {{
        onClick: (e) => {
  
            var points = e.chart.getElementsAtEventForMode(e, 'nearest', { intersect: true }, true)
  
            if (points.length) {
                const firstPoint = points[0];
                var label = e.chart.data.labels[firstPoint.index];
                var value = e.chart.data.datasets[firstPoint.datasetIndex].data[firstPoint.index];
            }
  
            console.log(label);
  
        }
    }}
  />

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

ChartJS on click to get label #351

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Uh oh!

ChartJS on click to get label #351

Uh oh!

Uh oh!

cooperRjp Jan 20, 2022

Replies: 1 comment

Uh oh!

Uh oh!

cooperRjp Jan 20, 2022 Author

cooperRjp
Jan 20, 2022

cooperRjp
Jan 20, 2022
Author