Chart.js tooltip hover customization for mixed chart

Question

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 1

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>