How to have different values for the chart and the tooltip in chart.js?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

var chartData = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June'],
  datasets: [{
    label: 'Sales',
    data: [100, 200, 150, 250, 180, 300],
    backgroundColor: 'rgba(0, 123, 255, 0.4)',
    borderColor: 'rgba(0, 123, 255, 1)',
    borderWidth: 1
  }]
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

var chartOptions = {
  tooltips: {
    callbacks: {
      label: function(tooltipItem, data) {
        // Get the chart's dataset
        var dataset = data.datasets[tooltipItem.datasetIndex];
        // Calculate the tooltip value based on the actual dataset value
        var value = dataset.data[tooltipItem.index] * 2;
        // Return the custom tooltip value
        return value;
      }
    }
  }
};

1
2
3
4
5
6

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: chartData,
  options: chartOptions
});