ChartJS on click to get label #351

Jan 20, 2022

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

Jan 20, 2022

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

ChartJS on click to get label #351

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Search code, repositories, users, issues, pull requests...

ChartJS on click to get label #351

cooperRjp Jan 20, 2022

Replies: 1 comment

cooperRjp Jan 20, 2022 Author

cooperRjp
Jan 20, 2022

cooperRjp
Jan 20, 2022
Author