Displaying two values in tooltip using 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'
}
}
});`

I run your code but and see that no line appears in your chart because the values of the corresponding dataset are non-numeric. Therefore I cannot exactly understand what you're looking for. Please elaborate. — uminder
– uminder, Commented Jul 14, 2020 at 15:38
@uminder I update the question. basically I want to display the amount, status in the tooltip — nawaz uddin
– nawaz uddin, Commented Jul 14, 2020 at 17:59

Sdamico · Accepted Answer · 2020-07-14 20:12:39Z

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

answered Jul 14, 2020 at 20:12

Sdamico

663 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Displaying two values in tooltip using chart.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related