CODEWITHSUNDEEP
javascriptchart.js
Amer Bearat
Amer Bearat

Reputation: 946

get yLabel value onclick chart js

I want to have the y label value, when I click on the bar.

<code>barImage</code>

Like the above example, when I click on feb blue bar I want to have label value, which is 40

I looked for examples on stackOverFlow and other sites but they only have example of label for the legend show up.

some of the code I tried 

onClick: function(evt, element) {
      var activePoints = bar_chart.getElementAtEvent(evt);
      console.log(activePoints[0]._model.datasetLabel);
}

Upvotes: 8

Views: 19538

Answers (4)

Jonathan Le Cornichone
Jonathan Le Cornichone

Reputation: 372

Mix between mikeb and Mrunalraj Redij answers. Add Hover and use 'index' and 'intersect: false' to select the value even if the mouse pointer is not on the line.

chartClickHoverCB(event, activeElements, chart) {
      const points = chart.getElementsAtEventForMode(event, 'index', { intersect: false }, true);

      if (points.length) {
          const firstPoint = points[0];
          var label = chart.data.labels[firstPoint.index];
          var value = chart.data.datasets[firstPoint.datasetIndex].data[firstPoint.index];
          console.log(label +" : "+ value);
      }
  }


chartOptions: ChartOptions = {
    ....
    onClick: this.chartClickHoverCB,
    onHover: this.chartClickHoverCB,
  };

Upvotes: 0

Mrunalraj Redij
Mrunalraj Redij

Reputation: 355

Chart.js version = 3.2.1

From the official documentation:

onClick: (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];
        alert(label +" : "+ value);
    }
}

Upvotes: 6

mikeb
mikeb

Reputation: 11309

I needed a way to get the chart from the callback because I'm using the same callback for multiple charts, so I can't just say myChart

This works, passing to chart options - the second parameter is called "activeElements" and can be used to get the chart:

onClick: (event, activeElements) => {
    if(activeElements.length === 0){
      alert("Chart is clickable but you must click a data point to drill-down")
    }
    const chart = activeElements[0]._chart
    const activePoints = chart.getElementsAtEventForMode(event, 'point', chart.options);
    const firstPoint = activePoints[0];
    const label = chart.data.labels[firstPoint._index];
    const value = chart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
    alert(label + ": " + value);
}

Upvotes: 0

JohnC
JohnC

Reputation: 3287

This demo gives the value in the bar chart when you click on it. I'm not a chart.js expert so there may be better solutions.

https://codepen.io/newschapmj1/pen/PerOzM

/* from https://github.com/chartjs/Chart.js/issues/2292 */
document.getElementById("myChart").onclick = function (evt) {
        var activePoints = myChart.getElementsAtEventForMode(evt, 'point', myChart.options);
        var firstPoint = activePoints[0];
        var label = myChart.data.labels[firstPoint._index];
        var value = myChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
        alert(label + ": " + value);
    };

Upvotes: 12

Related Questions