Get the value of bar in ng2-chart bar graph after clicking on bar

Question

I have an ng2-chart bar graph displaying on my page but I'm looking to get the value of that bar e.g. 5, 7, 9 .

I can get the label name...but can't get the value.

Had anyone done this?

  public chartClicked(e:any):void {
       //e.active[0]._model.label gives the label.
    console.log(e);
  }

Answer 1

You can use this solution:

lineChartData: Is your data source filled from your API, So you must add the necessary data that you will use when you click.

public chartClicked(e: any): void {
 if (e.active.length > 0) {
  const chart = e.active[0]._chart;
  const activePoints = chart.getElementAtEvent(e.event);

    if ( activePoints.length > 0) {

      const clickedElementIndex = activePoints[0]._index;
      const label = chart.data.labels[clickedElementIndex];

      console.log("serie from your dataset = " + activePoints[0]._model.datasetLabel);
      console.log("dataset index = " + activePoints[0]._datasetIndex);
      console.log("serie id from your data source = " + this.lineChartData[activePoints[0]._datasetIndex].labelId);
      console.log("serie from your data source = " + this.lineChartData[activePoints[0]._datasetIndex].label);
      console.log("label from your dataset = " + label);
    }
   }}

Answer 2

You could try this:

e.active[0]._chart.tooltip._model.dataPoints[0].yLabel