[BUG] Newline in tooltips gets converted to a space

[thany]

Expected Behavior

When you return a newline character in the tooltip text in the callback for its title, that newline should be rendered as such.

Current Behavior

Newlines (\n) are converted to spaces. And <br> is rendered literally.

Possible Solution

I'm not sure, but there might be a mechanism in place that arbitrarily converts unsupported characters to spaces before rendering. If this would not convert newlines, and pass them to the renderer, perhaps that'll fix it.

Steps to Reproduce (for bugs)

1. Any chart will do.
2. Make a simple tooltips callback like this:

//...
tooltips: {
  callbacks: {
    title: (items, data) => {
      return "Hello\nworld";
    }
  }
}
//...

Context

I'm trying to give each tooltip a title that is the date and time, which a newline in between to keep the tooltip not too wide. I'm aiming for a tooltip title like this:

Tu 28 March 2107
2:59 PM

Environment

• Chart.js version: 2.5.0 (using through Angular-chart.js 1.1.1 with Angular 1.6.2)
• Browser name and version: Firefox 52.0.1

[etimberg]

@thany the behaviour with <br/> is as designed since the text renders on the canvas. At the moment, we only support multiple lines of text by returning an array of strings. You can use this as a word around for your case.

tooltips: {
  callbacks: {
    title: (items, data) => {
      return "Hello\nworld".split('\n');
    }
  }
}

To anyone wanting to implement this functionality, changes would need to be made in a few places:

1. https://github.com/chartjs/Chart.js/blob/master/src/core/core.tooltip.js#L105
2. https://github.com/chartjs/Chart.js/blob/master/src/core/core.tooltip.js#L404
3. https://github.com/chartjs/Chart.js/blob/master/src/core/core.tooltip.js#L432

I'm happy to look at a PR that adds this. Please include tests with the changes.