Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chart js v2 tooltip callback line breaks

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.

like image 422
Sam Ch Avatar asked Nov 16 '16 07:11

Sam Ch


1 Answers

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/

like image 70
Alejandro Lasebnik Avatar answered Nov 05 '22 21:11

Alejandro Lasebnik