Adding Multiple value in Tooltips in ChartJS charts

Question

I have created a Multiple line Line chart using the ChartJS library on Laravel. It has two line. I want to add percentage data to my Line Chart Tooltips for each xLabel. But I am not able to use it in this wrapper. Could you help me out?

Example: Line: data (percent_data)%

Below code is giving only the first element on my Charts Tooltips

var ctx = document.getElementById("myLineChart");
var myLineChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: label,
    datasets: [{
      label: "Line",
      data: data,
      percent_data: per_data_from_html,
    }],
  },
    tooltips: {
      callbacks: {
        label: function(tooltipItem, chart) {
          var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
          return datasetLabel + ': ₹ ' + number_format(tooltipItem.yLabel)+' ('+ (chart.datasets[tooltipItem.datasetIndex].percent_data[tooltipItem.datasetIndex]);
        }
      }
    }
  }
});

@WhiteHat, Thanks for your concern. I got the solution now. But I will still share my label and data. — Maqsud
– Maqsud, Commented Sep 30, 2020 at 11:34

Qiniso · Accepted Answer · 2020-09-30 17:28:34Z

1

By changing parameter passing through percent_data array from percent_data[tooltipItem.datasetIndex] to percent_data[tooltipItem.index].

tooltips: {
  enabled: true,
  callbacks: {
    label: function(tooltipItem, chart) {
      var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
      return datasetLabel + ': ₹ ' + chart.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + ' (' + chart.datasets[tooltipItem.datasetIndex].percent_data[tooltipItem.index] + ')%';
    }
  }
}

edited Sep 30, 2020 at 17:28

Qiniso

2,6291 gold badge25 silver badges31 bronze badges

answered Sep 30, 2020 at 7:52

Eka Cipta

2291 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Maqsud Over a year ago

This is giving me the same percent_data while hovering in each point.

Eka Cipta Over a year ago

change the return into this => return datasetLabel + ': ₹ ' + chart.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + ' (' + chart.datasets[tooltipItem.datasetIndex].percent_data[tooltipItem.index] + ')%';

Maqsud Over a year ago

Thanks It is working for me. But I am curious to know what was the issue.

Maqsud Over a year ago

we changed datasetIndex => index while passing parameter to percent_data

Collectives™ on Stack Overflow

Adding Multiple value in Tooltips in ChartJS charts

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related