Jeffrey Phillips
Posts: 56
Joined: Tue Aug 30, 2016 9:32 pm

Another Stupid JS Question… Custom Tooltip

Referring to http://cloud.highcharts.com/show/avyxame

I'd like the tooltip to show the header as is, but the text as "(value.low)%–(value.high)% efficient"

I'm pretty sure it can be done with the formatter and some variation of this.points.y, but I'm afraid I'm just not clever enough to make it work.

Thanks!
pawel_d
Posts: 1910
Joined: Thu Jun 02, 2016 10:28 am

Re: Another Stupid JS Question… Custom Tooltip

Hi Jeffrey,

Yes, you can use tooltip.formatter. Paste code posted below into the 'Code' section.

Code: Select all

tooltip: {
    formatter: function() {
        var formatterString = this.points[1].y + '%-' + this.points[0].y + '% efficient';
        return formatterString;
    }
}
Regards.
Paweł Dalek
Highcharts Developer
stpoa

Re: Another Stupid JS Question… Custom Tooltip

Hi,

Here is a live example of using tooltip formatter. Paste code into custom code under code section.

https://jsfiddle.net/e650o0bf/

Regards.
Jeffrey Phillips
Posts: 56
Joined: Tue Aug 30, 2016 9:32 pm

Re: Another Stupid JS Question… Custom Tooltip

You guys rock. Thanks so much!

Return to “Highcharts Cloud”