CODEWITHSUNDEEP
tooltiphighcharts
Mike
Mike

Reputation: 755

highchart total in tooltip

i am using this code to display a shared tooltip:

tooltip: {
    crosshairs: true,
    shared: true,
    headerFormat: 'KW {point.key}<table>',
    pointFormat: '<tr><td style=\"color: {series.color}\">{series.name}: <b></td><td>{point.y} USD</b></td></tr>',
    useHTML: true,
    footerFormat: '</table>',
    valueDecimals: 2
},

Now i like to add all point.y values as a total value of the point. But how can i loop the point.y of each series to calculate the total value?

Upvotes: 6

Views: 15272

Answers (3)

danmichaelo
danmichaelo

Reputation: 1795

Use the footerFormat property (since version 2.2) with {point.total} to easily show the total without having to re-define the complete formatter function:

tooltip: {
    footerFormat: 'Sum: <b>{point.total}</b>',
    shared: true,
},

Upvotes: 7

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

Excatly, see example: http://jsfiddle.net/65bpvudh/7/

tooltip: {
    formatter: function() {
        var s = '<b>'+ this.x +'</b>',
            sum = 0;

        $.each(this.points, function(i, point) {
            s += '<br/>'+ point.series.name +': '+
                point.y +'m';
            sum += point.y;
        });

        s += '<br/>Sum: '+sum

        return s;
    },
    shared: true
},

Upvotes: 11

Carlos
Carlos

Reputation: 76

More easy, use total property of point:

tooltip: {
    formatter: function() {
        var s = '<b>'+ this.x +'</b>';
        $.each(this.points, function(i, point) {
            s += '<br/>'+ point.series.name +': '+ point.y;
        });
        s += '<br/>Total: '+ this.points[0].total
        return s;
    },
    shared: true
},

Check this reference

Upvotes: 4

Related Questions