Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

highcharts customize tooltip for a single point

I want to customize the tooltip of the last point in a specific series, leave other points in this series, and other series, with default tooltip format. Basically, I am looking for something similar to this config. Thanks in advance for your help!

series: [{
            tooltip: {    // ?? tooltip does not work inside series
                formatter: function() {
                    if (lastPoint in the series) {  // ?? how to determine if lastPoint
                        return '<b>Final result is </b> ' + this.y;
                    }
                    // ?? return default format if it is not the last point in the series
                }
            },            
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6]        
        }, {
            data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]        
        }]
like image 581
E.A. Avatar asked Aug 07 '13 22:08

E.A.


Video Answer


1 Answers

The formatter function doesn't seem to work when it's defined for a series. You can check which series you are in by using this.series.name and then you can check if you are on the final point using this.series.xData.length - 1 == this.point.x. But, it would be easier to name the point that you want to target and check for that in the formatter function. http://jsfiddle.net/Swsbb/. To see all the formatter data, check here http://api.highcharts.com/highcharts#tooltip.formatter.

$('#container').highcharts({   
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
    },
    tooltip : {
        formatter: function() {
            var tooltip;
            if (this.key == 'last') {
                tooltip = '<b>Final result is </b> ' + this.y;
            }
            else {
                tooltip =  '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>' + this.y + '</b><br/>';
            }
            return tooltip;
        }
    },   
    series: [{
                data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, {y:135.6, name: 'last'}]

    },
    {
        data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
    }]

}); 
like image 55
Barbara Laird Avatar answered Nov 02 '22 19:11

Barbara Laird