Amanda Amanda - 7 days ago 9
Javascript Question

Can I use two different formatters for highchart tooltips?

I have a highcharts table with two data series that use named values. In my tooltips for one series, I want to reference a data point from the series. So the solution in this answer: How to use a different formatter on Highcharts in each curve of the same graphic? doesn't help me. I need more than just tooltipText, I need a formatter:

For one:

formatter: function() {
return this.x + ': ' + this.series.name +
'<br> $' + Highcharts.numberFormat(this.y, 0);
}


And for the other:

formatter: function() {
return 'In ' + this.x + ' the median value was' + this.median +
'and the total $' + Highcharts.numberFormat(this.y, 0);
}

Answer

Inside formatter this reffers to the focused serie, you can add an if/else inside the formatter and return a string for each one, like the following.

tooltip: {
    shared: false,
    formatter: function() {
        var text = '';
        if(this.series.name == 'MSFT') {
            text = this.x + ': ' + this.series.name +
                   '<br> $' + Highcharts.numberFormat(this.y, 0);
        } else {
            text = 'In ' + this.x + ' the median value was' + this.median +
                   'and the total $' + Highcharts.numberFormat(this.y, 0);
        }
        return text;
    }
}

demo

Comments