Geek asks and answers

The Highcharts extended tooltip requires a different Suffix value and various decimals

I have a Highchart chart that describes temperature, wind, pressure and precipitation.

Here you can see http://www.dmjsystems.co.uk/weather/forecast.php

I use a common tooltip with additional complication, which Max Rain is a total of min and a maximum in the column for rain. Currently, the code is ignoring the suffix based on my series, and I have not been able to get individual decimal numbers to work (i.e. All show 3 decimal places).

Each element 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 hint encoded 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 transfer this (besides shared: true) to series-based tooltips that use pointFormat (especially tooltip.ySuffix, which I think will allow me to specify the suffix correctly) and valueDecimals to set the decimal point for everyone, but I can’t find code examples for using these functions.

Also, as soon as I move away from the general tooltip, I cannot get the summation to work for a column with a footer.

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

+5
source share
3 answers

.
.
, .

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

:

+4

, .. . yprefix .. valuePrefix

series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        type: 'column'

    }, {
        data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5],
        tooltip: {
    valuePrefix: ' USD'
}}],

fiddle,

+2

, , . :.

$('XXXX').highcharts({
	...
	tooltip: {
                formatter: function() {
                    var text = "";
                    $.each(this.points, function(index) {
                        text += '<br/><b>' + this.series.name + ":</b> "+ this.y+" "+this.series.tooltipOptions.valueSuffix;
                    });
                    return text;
                },
                shared: true
            },
	...
});

...

chart.addSeries({
            ...
            tooltip: {
                valueSuffix: ' '+seriesUnit,
                valueDecimals:2
            },
            ...
        });
Hide result
+2

More articles:


All Articles