Highcharts shared tooltip requires different valueSuffix and varying decimals

Question

I have a Highchart Graph that plots Temperature, Wind, Pressure and Rainfall.

It can be seen here http://www.dmjsystems.co.uk/weather/forecast.php

I am using a shared Tooltip with the added complication that the Max Rain is a total of the min and the max in the stacked column for rain. Currently the code ignores my series based suffix and I have not been able to get individual decimals to work (i.e.they all show 3 decimal places).

Each of the Items has a different suffix (Temp = (Degree sign)C, Wind = mph, Pressure = mb and Rain = in) and different numbers of decimal places (Wind = none, Temp = 1, Pressure = 1 and Rain = 3).

I am currently using a general Tooltip coded as follows :

    tooltip: { shared : true,
            formatter: function() {
            return '<span style="color:#039;font-weight:bold">' + Highcharts.dateFormat('%A' + ', ' + '%b %d' + ', ' + '%H' + ':' + '00',this.x) + '</span><br/>' +
                       this.points.map(function(point, idx) {
                           return '<span style="color:' + point.series.color + '">' + point.series.name +
                                  '</span>: <span style="color:#669;font-weight:bold">' +
                                  Highcharts.numberFormat((idx == 0) ? point.total : point.y,3) +
                                  '</span>';
                       }).join('<br/>');
            }
    },

but I think I need to move this (apart from shared : true) to series based tooltips that use pointFormat (especially tooltip.ySuffix which I think will let me specify the suffix correctly) and valueDecimals to set the decimal point for each series, but I cannot find any examples of code to use these functions.

Also as soon as I move away from the general tooltip I cannot get the totalling to work for the stacked column.

If anyone could point me in right direction I would appreciate it.

Answer 1

You can simple add a tooltip options to each serie.
You can see the options on the following link.
This way you don't have to format each serie's point.

series: [{
    name: 'USD',
    data: yourData,
    tooltip: {
        ySuffix: ' USD',
        yDecimals: 4
    }
}, {
    name: 'EUR',
    data: yourData,
    tooltip: {
        yPrefix: 'EUR ',
        yDecimals: 1
    }
}]

Demo

Reference:

• Highcharts tooltip