ChartJS - Adding legend title into tooltip title

Question

Could you tell me what to add in the chartJS options to have the legend title also into the tooltip title? In the screenshot attached, you can see I'd like to add a reminder of the year in the title of the tooltip.

                 var chartdata = {
                 labels: ['Jan','Fev','Mar','Avr','Mai','Jui','Jui','Aou','Sep','Oct','Nov','Dec'],
                 datasets: JSON.parse('')
             };

               var graphTarget = $("#graphCanvas");

               var barGraph = new Chart(graphTarget, {
                   type: 'bar',
                   data: chartdata,
                   options: {
                            responsive: true,
                            legend: {
                                position: 'right',
                            },
                            title: {
                                display: true,
                                text: 'Consommation électrique'
                            },
                    tooltips: {
                      enabled: true,
                      mode: 'single',
                      callbacks: {
                          label: function(tooltipItems, data) {
                              return tooltipItems.yLabel + ' kW';
                          }
                      }
                    },
                    scales: {
                      yAxes: [{
                          ticks: {
                              // Includes 'kW' after the value
                              callback: function(value, index, values) {
                                  return value + ' kW';
                              }
                          }
                      }]
                    }
                        }
               });

Thank you!

user_2358409 · Answer

You can define a tooltips title callback as follows:

tooltips: {
  callbacks: {
    title: (tooltipItems, data) => tooltipItems[0].xLabel + ' ' +  data.datasets[tooltipItems[0].datasetIndex].label,
    ...
  }

Please take a look at your amended code and see how it works.

var barGraph = new Chart('chart', {
  type: 'bar',
  data: {
    labels: ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Jui', 'Jui', 'Aou', 'Sep', 'Oct', 'Nov', 'Dec'],
    datasets: [{
        label: '2019',
        data: [3, 4, 5, 2, 3, 2, 3, 4, 1, 2, 4, 5],
        backgroundColor: 'blue'
      },
      {
        label: '2020',
        data: [3, 4, 1, 2, 4, 5, 3, 4, 5, 2, 3, 2],
        backgroundColor: 'green'
      }
    ]
  },
  options: {
    responsive: true,
    legend: {
      position: 'right',
    },
    title: {
      display: true,
      text: 'Consommation électrique'
    },
    tooltips: {
      enabled: true,
      mode: 'single',
      callbacks: {
        title: (tooltipItems, data) => tooltipItems[0].xLabel + ' ' +  data.datasets[tooltipItems[0].datasetIndex].label,
        label: tooltipItems => tooltipItems.yLabel + ' kW'
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true, 
          callback: value => value + ' kW'
        }
      }]
    }
  }
});

ChartJS - Adding legend title into tooltip title

1 Answers