Chartjs Tooltip Line Breaks

Question

Is it possible to get line breaks in chartjs tooltips?

tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>"

I want to replace ": " with a new line.

I've tried with 
 , \ , \\n and <br /> to no avail.

Update: I have changed my accepted answer now that chart.js is on version 2.

Answer 1

If you are using 2.0.0-beta2, you can use tooltip callback and return array of strings there.

tooltips: {
    mode: 'single',
    callbacks: {
        afterBody: function(data) {
            var multistringText = ['first string'];
            // do some stuff
            multistringText.push('another string');

            return multistringText;
        }
    }
}

Answer 2

Actually all tool-tip callbacks support multiple lines of text, and you can use label callback as usual. It renders data label as tool-tip text by default.

Quoted from documentation :

All functions must return either a string or an array of strings. Arrays of strings are treated as multiple lines of text.

Example code:

tooltips: {
    callbacks: {
      label: (tooltipItem, data) => {
        if (tooltipItem.index % 2)
          return ['Item 1', 'Item 2', 'Item 3'];
        else
          return 'Single line';
      }
    }
  }

Answer 3

You can use tooltips footer callback,it will also not render coloured square for each list.

 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']; } } }

Answer 4

At this point in time, it's not possible to add line breaks to a tooltip or axis label. Right now the developers are discussion implementation options; the discussion can be found Allow wrapping in axis labels (issue on github) .

Answer 5

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

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