Chartjs Tooltip Line Breaks

Answer :

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

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

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