Chartjs v2 - format tooltip for multiple data sets (bar and line)

Question

Reading up a lot on how to format the tooltip in ChartJS v2.x utilizing the tooltip callback. I've had success thus far, but find that I'm unable to define two separate formats for the two data sets I have.

As a bit more context, I have a line chart overlayed on top of a bar chart:

• My bar data is numerical (in the millions, and needs to be rounded and truncated).
• Example: 22345343 needs to be shown as 22M in the tooltip

---

• My line data is a currency
• Example: 146.36534 needs to shown as $146.37 in the tooptip

---

Here's my short WIP code thus far. This formats the tooltip to round and include the $ sign. How can I expand this so that I can separately format my bar data correctly in the tooltip?

---

tooltips: {
                mode: 'index',
                intersect: false,
                callbacks: {
                    label: function(tooltipItem, data) {
                        return "$" + Number(tooltipItem.yLabel).toFixed(2).replace(/./g, function(c, i, a) {
                                    return i > 0 && c !== "." && (a.length - i) % 3 === 0 ? "," + c : c;
                                });
                    }
                }
            }

Answer 1

Thanks, GRUNT! But since my datasets could me mixed it's better to use the yAxisID to check for the correct dataset.

            tooltips: {
                callbacks: {
                    label: function (tooltipItem, details) {
                        if (details.datasets[tooltipItem.datasetIndex].yAxisID == "$") {
                            let dataset = details.datasets[tooltipItem.datasetIndex];
                            let currentValue = dataset.data[tooltipItem.index];
                            return dataset.label + ": " + currentValue.toFixed(2) + " $";
                        } else {
                            let dataset = details.datasets[tooltipItem.datasetIndex];
                            let currentValue = dataset.data[tooltipItem.index];
                            return dataset.label + ": " + currentValue +" pieces";
                        }
                    }
                }
            }

Answer 2

Try using below code!

   let  DoughnutForSavingCount = {
        labels: [
          intl.formatMessage({ id: 'Guarantee' }),
          intl.formatMessage({ id: 'ILAS' }),
          intl.formatMessage({ id: 'No Idea' })
        ],

        datasets: [
          /* Outer doughnut data starts*/

          {
            label: 'Graph1',
            data: [
              _.get(getClientSavingILASPolicyData[0], 'countwithGuaranttee') >
                0 &&
              _.get(getClientSavingILASPolicyData[0], 'totalWithGuarantee') ===
                0
                ? 0.1
                : _.get(getClientSavingILASPolicyData[0], 'totalWithGuarantee'),
              _.get(getClientSavingILASPolicyData[0], 'countwithILAS', 0) > 0 &&
              _.get(getClientSavingILASPolicyData[0], 'totalWithILAS') === 0
                ? 0.1
                : _.get(getClientSavingILASPolicyData[0], 'totalWithILAS'),
              _.get(getClientSavingILASPolicyData[0], 'countNoIdea', 0) > 0 &&
              _.get(getClientSavingILASPolicyData[0], 'totalWithNoIdea') === 0
                ? 0.1
                : _.get(getClientSavingILASPolicyData[0], 'totalWithNoIdea')
            ],
            backgroundColor: ['#8c1aff', '#BF80FF', '#E9e9e9'],
            hoverBackgroundColor: ['#8c1aff', '#BF80FF', '#E9e9e9']
          },
          /* Outer doughnut data ends*/

          /* Inner doughnut data starts*/
          {
            label: 'Graph2',
            data: [
              _.get(getClientSavingILASPolicyData[0], 'countwithGuaranttee'),
              _.get(getClientSavingILASPolicyData[0], 'countwithILAS'),
              _.get(getClientSavingILASPolicyData[0], 'countNoIdea')
            ],
            backgroundColor: ['#8c1aff', '#BF80FF', '#E9e9e9'],
            hoverBackgroundColor: ['#8c1aff', '#BF80FF', '#E9e9e9']
          }
          /* Inner doughnut data ends*/
        ],
        borderWidth: [1]
      };



     let DoughnutForSavingCountConfig = {
          cutoutPercentage: 70,
          legend: {
            display: true,
            position: 'bottom',
            labels: {
              fontColor: '#34A0DC',
              fontSize: 10,
              fontFamily: 'Helvetica',
              boxWidth: 10,
              usePointStyle: true
            }
          },
          responsive: true,
          plugins: {
            datalabels: {
              display: false
            }
          },
          tooltips: {
            enabled: true,
            //*****add for reference********** */
            callbacks: {
              label: function(tooltipItems, data) {
                if (tooltipItems.datasetIndex) {
                  var label = data.labels[tooltipItems.index] || '';
                  var currentValue =
                    data.datasets[tooltipItems.datasetIndex].data[
                      tooltipItems.index
                    ];
                  if (label) {
                    label += ': ';
                  }
                  label += currentValue == '0.1' ? '0' : currentValue;
                  return label;
                } else {
                  var label = data.labels[tooltipItems.index] || '';
                  var currentValue =
                    data.datasets[tooltipItems.datasetIndex].data[
                      tooltipItems.index
                    ];
                  if (label) {
                    label += ': ';
                  }
                  label += intl.formatMessage({ id: 'HKD' }) + ' ';
                  label +=
                    currentValue == '0.1'
                      ? '0'
                      : currentValue
                          .toString()
                          .replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                  return label;
                }
              }
            }
          }
        };

Answer 3

You could achieve that using the following tooltips callback function ...

callbacks: {
    label: function (t, d) {
        if (t.datasetIndex === 0) {
            return '$' + t.yLabel.toFixed(2)
        } else if (t.datasetIndex === 1) {
            return Math.round(+t.yLabel.toString().replace(/(\d{2})(.*)/, '$1.$2')) + 'M';
        }
    }
}

ᴅᴇᴍᴏ

var ctx = document.getElementById("canvas").getContext("2d");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["January", "February", "March", "April", "May"],
        datasets: [{
            type: 'line',
            label: "Sales",
            data: [144.36534, 146.42534, 145.23534, 147.19534, 145],
            fill: false,
            borderColor: '#EC932F',
            backgroundColor: '#EC932F',
            tension: 0,
            yAxisID: 'y-axis-2'
        }, {
            type: 'bar',
            label: "Visitor",
            data: [22345343, 23345343, 24345343, 25345343, 230245343],
            backgroundColor: '#71B37C',
            yAxisID: 'y-axis-1'
        }]
    },
    options: {
        responsive: false,
        tooltips: {
            mode: 'index',
            intersect: false,
            callbacks: {
                label: function (t, d) {
                    if (t.datasetIndex === 0) {
                        return '$' + t.yLabel.toFixed(2);
                    } else if (t.datasetIndex === 1) {
                        if (t.yLabel.toString().length === 9) {
                            return Math.round(+t.yLabel.toString().replace(/(\d{3})(.*)/, '$1.$2')) + 'M';
                        } else return Math.round(+t.yLabel.toString().replace(/(\d{2})(.*)/, '$1.$2')) + 'M';
                    }
                }
            }
        },
        scales: {
            yAxes: [{
                id: "y-axis-1",
                position: "left"
            }, {
                id: "y-axis-2",
                position: "right"
            }]
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="canvas" width="400" height="190"></canvas>