I'm trying to add a line break inside chart js v2 tooltip callback
my code:
var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var tooltip = "example tooltip";
var otherTooltip = "other tooltip";
return tooltip + "\n\r" + otherTooltip;
}
}
}
}
});
Using \r
, \n
or combination of both isn't working, anyone got any idea?
I'm using chart js v2.3.0 by the way.
UPDATE
I've fixed the problem!
Convert the tooltip text to array of string (I'm gonna skip ahead from my code above) e.g
...
label: function(tooltipItem, data) {
var firstTooltip = "tooltip1";
var otherTooltip = "tooltip2";
var tooltip = new Array(firstTooltip, otherTooltip);
return tooltip;
}
and voila!
now the tooltip has line break.
The way to do it, is just adding a callback function for the tooltip property that returns an array of strings, each one of the strings will be placed in a new line.
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
return ['first thing', 'another thing', 'and another one'];
}
}
}
See this jsfiddle...
https://jsfiddle.net/alelase/6f8wrz03/3/
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