hyperfkcb hyperfkcb - 2 months ago 9
Javascript Question

Chart.js tooltip hover customization for mixed chart

I was having some problem when trying to customize the hover tooltip for mixed chart using chart.js.

I have a bar chart which show the total profit for certain product and a line chart to show the total quantity of that certain product. When I hover over the bar chart, I wanted the tooltip to show something like:

Total profit: $ 1399.30


The price should be in two decimal format appended to the back of 'Total profit: $'. When I hover over the line chart, I wanted to show something like:

Quantity sold: 40 unit(s)


Here is my code to populate related array:

for(var i = 0 ; i < topProductList.length; i++){
labelData.push(topProductList[i].itemName);
amountData.push((topProductList[i].price * topProductList[i].quantity).toFixed(2));
quantityData.push(topProductList[i].quantity);
}


The callback where I tried to merge back the x-axis label as suggested by @GRUNT:

tooltips: {
callbacks: {
title: function(t, d) {
return d.labels[t[0].index].replace(/\n/, ' ');
}
}
}


The option for my chart:

var opt = {
type: "bar",
data: {
labels: labelData,
datasets: [{
type: "bar",
label: 'Total Profit ',
data: amountData,
},{
type: "line",
label: 'Quantity Sold ',
data: quantityData,
}]
},
options: options
};


For now, when I hover my bar chart, I am getting
Total profit: 1399.3
and for line chart,
Quantity sold: 40
which is not my desired output as above.

Any ideas how to override the tooltip hover customization?

Thanks!

Answer Source

You can use the following tooltip­'s label callback function, for showing different tooltip labels when hovered on different graphs :

tooltips: {
   callbacks: {
      label: function(t, d) {
         var xLabel = d.datasets[t.datasetIndex].label;
         var yLabel = t.yLabel;
         // if line chart
         if (t.datasetIndex === 0) return xLabel + ': ' + yLabel + ' unit(s)';
         // if bar chart
         else if (t.datasetIndex === 1) return xLabel + ': $' + yLabel.toFixed(2);
      }
   }
}

also, your first dataset should be for line chart, followed by bar , like so :

datasets: [{
   type: "line",
   label: 'Quantity Sold ',
   data: quantityData
}, {
   label: 'Total Profit ',
   data: amountData
}]

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

var chart = new Chart(ctx, {
   type: 'bar',
   data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
      datasets: [{
         type: "line",
         label: 'Quantity Sold',
         data: [40, 50, 60, 70, 80],
         borderColor: 'orange',
         fill: false
      }, {
         label: 'Total Profit',
         data: [1399.3, 356.62, 1249, 465.23, 1480.4],
         backgroundColor: 'rgba(0, 119, 220, 0.4)',
      }]
   },
   options: {
      scales: {
         yAxes: [{
            ticks: {
               beginAtZero: true
            }
         }]
      },
      tooltips: {
         callbacks: {
            label: function(t, d) {
               var xLabel = d.datasets[t.datasetIndex].label;
               var yLabel = t.yLabel;
               // if line chart
               if (t.datasetIndex === 0) return xLabel + ': ' + yLabel + ' unit(s)';
               // if bar chart
               else if (t.datasetIndex === 1) return xLabel + ': $' + yLabel.toFixed(2);
            }
         }
      }
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>