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!

Solution

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>