Highcharts: Format series names in tooltip

Question

I have multiple series on the same chart, and I'd like to use the tooltip formatter to make the series names look readable in the tooltip. At the moment, they're displayed in the form Seriesonename and Seriestwoname, but I'd like them to be displayed in the form Series One Name and Series Two Name. I'd still like to keep the tooltip in the same format of Series One Name: 0.567.

I've done something similar to this when formatting the chart labels, where I used the following code:

legend: {
  labelFormatter: function () {
    return {
      'Seriesonename': 'Series One Name',
      'Seriestwoname': 'Series Two Name'
    }[this.name];
  }
}

I've tried doing the same for the tooltip formatter, but I can't seem to get it to work. I suspect it's something to do with the fact that it's a shared tooltip, but I'm not 100% sure.

Any help would be greatly appreciated!

Why are you not setting the name attribute of the Series itself? — Halvor Holsten Strand
@HalvorStrand I'm not sure that I can. My data comes from another source, and I'm using a Highcharts wrapper to format everything, hence why I had to use the labelFormatter to sort out the series names in the legend. — helencrump
But if you pre-process your data, you can do it once, before sending anything to the chart, rather than doing it every time you need to display the name. — jlbriggs

Halvor Holsten Strand Halvor Holsten Strand · Accepted Answer · 2016-04-25T11:26:48

To do a similar approach to your legend.labelFormatter for the tooltip you could use tooltip.formatter or tooltip.pointFormatter, somewhat depending on how your chart is set up.

An example using the tooltip.pointFormatter could be (JSFiddle):

tooltip: {
    pointFormatter: function() {
        var seriesNameConverter = {
            'Seriesonename': 'Series One Name',
            'Seriestwoname': 'Series Two Name'
        };

        return '<span style="color:{point.color}">\u25CF</span> '
            + seriesNameConverter[this.series.name] + ': <b>' + this.y + '</b><br/>';
    }
}

This is the default style of tooltip.pointFormat with your conversion in place of the series name.

Highcharts: Format series names in tooltip

1 Answers