I am using chart.js. I want to show on hover two values in tooltip. Both of them in new line, but i really dont know how. This example still return string in one line. I tried es6 syntax with `` but without any success. Is there any way to archive that without using custom html?

tooltips: {
    callbacks: {
        label: function(tooltipItem, data) {
            var someValue = "dasdasd";
            var someValue2 = "dasdasda2";
            return someValue + "/n" + someValue2;
        },
    }
},

I am using chart.js. I want to show on hover two values in tooltip. Both of them in new line, but i really dont know how. This example still return string in one line. I tried es6 syntax with `` but without any success. Is there any way to archive that without using custom html?

tooltips: {
    callbacks: {
        label: function(tooltipItem, data) {
            var someValue = "dasdasd";
            var someValue2 = "dasdasda2";
            return someValue + "/n" + someValue2;
        },
    }
},

• javascript
• chart.js

3 Answers 3

You cannot use new-line (\n) character or ES6 syntax for that matter (as canvas/chart.js doesn't support it).

Instead, you should use the afterLabel callback function of tooltips, which returns a text to render after an individual label.

Example

var chart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
      datasets: [{
         label: 'LINE',
         data: [3, 1, 4, 2, 5],
         backgroundColor: 'rgba(0, 119, 290, 0.2)',
         borderColor: 'rgba(0, 119, 290, 0.6)'
      }]
   },
   options: {
      tooltips: {
         callbacks: {
            label: function(tooltipItem, data) {
               var someValue = "Hello";
               return someValue;
            },
            afterLabel: function(tooltipItem, data) {
               var someValue2 = "Mindfuc";
               return someValue2;
            }
         }
      }
   }
});

<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>

This worked for me. Just simply return an array of strings as labels in tooltips callbacks.

 tooltips: {
    callbacks: {
      label: function(tooltipItem, data) {
        let label = "Line 1";
        let label2 = "Line 2";
        return [label, label2];
      }
    }
  }

there are also other options how to split two lines in chart js tooltips:

1. By default, values are separated if provided in an array (source), so in your case you could try:

   return [someValue, someValue2];
   

2. Or alternatively, you can use split (source):

   return (someValue + "/n" + someValue2).split('\n');
   

Both options should provide same result.