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 
, \u000D
, \n
and <br />
to no avail.
Update: I have changed my accepted answer now that chart.js
is on version 2.
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'];
}
}
}
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).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With