使用 chart.js 在工具提示中显示两个值

Question

I want to display two values(Amount, paid status) in the tooltip when the user hovers display Bar Dataset and Line Dataset based on the month. currently, it's displaying a BarDataset value

let amount= [500, 2000, 1400, 900];
let paidStatus = ["Unpaid", "Paid", "Unpaid","Paid"];
let Months = ['January', 'February', 'March', 'April'];
let myChart = document.getElementById('myChart').getContext('2d');

let massPopChart = new Chart(myChart, {
 type: 'bar',
data: {
    datasets: [{
        label: 'Bar Dataset',
        data: amount
    }, {
        label: 'Line Dataset',
        data: paidStatus,

        // Changes this dataset to become a line
        type: 'line'
    }],
    labels: Months
},
options: {
  tooltips: {
  mode: 'index'
}
}
});`

Answer 1

You might want to try representing the "paid status" as a numeric (0-unpaid, 1-paid) then use a callback to customize the tooltip:

function(tooltipItems, data) {
   var y = tooltipItems.yLabel;
    if(tooltipItems.datasetIndex === 1) {
      tooltipItems.yLabel === 0 ? y = 'unpaid' : y = 'paid'
    }
    return y
  }
}

jsfiddle