高图：在工具提示中设置系列名称的格式

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!

Answer 1

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.