Highcharts tooltips break line

user_10377449 0
Viewed 1692

I'm currently developing a modal which uses highcharts to show some data to the user. Well, I need to include some custom tooltips on each data, and they should look somewhat like this:

Date

Parameter Name

User who promoted changes

I can add a line break on each of those, but I can't get to break the line again, so there's a space between each information. My 'series' property looks like this:

series: [
      {
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        color: '#b4a9f9',
        name: 'Former',
        tooltip: {
          useHTML: true,
          headerFormat: `
            <span">Header Section</span> <br><br>
          `,
          pointFormat: `
            <span>Point Section</span>
          `
        }
      }

When I run it, I can't get it to break lines twice, even though there's a double br in there. Any thoughts? Thanks!

highcharts tooltip css html javascript
2 Answers

Move the tooltip out from series & it should work:

Highcharts.chart('container', {

  title: {
    text: 'Tooltip Line Break Demo'
  },
  tooltip: {
    useHTML: true,
    headerFormat: '<small>Header :: {point.key}</small><br><br>',
    pointFormat: 'Point Section X :: {point.x}<br><br>Point Section Y:: {point.y}<br><br>',
    footerFormat: '</br>'
  },

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },

  series: [{
    color: '#b4a9f9',
    name: 'Former',
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],

  }]

});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>

If you still want to apply different tooltips format for different series, move the useHTML attribute out of series and write different format for different series. 

tooltip: {
    useHTML: true,
},
user_34652420

Please take a look at Highcharts API: https://api.highcharts.com/highcharts/series.line.tooltip, you can not set useHTML property for tooltip in series, you must do it in general tooltip options:

Highcharts.chart('container', {
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        color: '#b4a9f9',
        name: 'Former',
        tooltip: {
            headerFormat: `<span>Header Section</span><br><br>`,
            pointFormat: `<span>Point Section</span>`
        }
    }],
    tooltip: {
        useHTML: true
    }
});

API: https://api.highcharts.com/highcharts/tooltip.useHTML

Live demo: http://jsfiddle.net/BlackLabel/p3mcxkjd/

user_89513770
Related