Adding new line to the tooltip?

2 thoughts on “Adding new line to the tooltip?”

1. Thanks @etimberg , this is a solution for what I asked but sadly for me it’s not the thing I need. However I modified this a bit for my code and here is where I am now.

   options: {
       scales: {
           yAxes: [{
             ticks: {
               beginAtZero: true
             },
             scaleLabel: {
               display: true,
               labelString: 'my custom y-axis label'
             },
            stacked: true
        }],
        xAxes:  [{
            display: true,
            stacked: true
         }]
   },
   tooltips: {
       mode: 'label',
            callbacks: {
                label : function(tooltipItem, data) {
                  let label = data.datasets[tooltipItem.datasetIndex].label;
                  let value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                  return [label + ':' + value, 'new line', 'another line'];
                 }
           }
       }
   }
   

   Since I have the stacked values and I’m using mode:'label' for the tooltips i get the extra rows for every dataset I have. It could be what you wanted but I wanted to add some custom statistic that is connected to both of the columns.

   So I changed my return statemenet to:

   if(tooltipItem.datasetIndex + 1  == data.datasets.length)
        {
             return [label + ':' + value, 'new line, 'another line'];
         }
             return label + ':' + value;
   

   This way I get my statistics (new line & another line) at the end of the tooltip but I still get the colored square of the last dataset in front of my statistics which I don’t know how to remove.

2. @dbr0 sorry for the late reply. The coloured square is drawn for each label line. What you can do is use the after label callback to insert the extra data without drawing the square. But since you are only inserting the extra line at the end, it’s easier to use the footer callback

   tooltips: {
     callbacks: {
       label: function(tooltipItem, data) {
         let label = data.datasets[tooltipItem.datasetIndex].label;
         let value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
         return label + ': ' + value;
       },
       footer: function(tooltipItems, data) {
         return ['new line', 'another line'];
       }
     }
   }

Comments are closed.