CODEWITHSUNDEEP
javascripthighcharts
Daniel Gros
Daniel Gros

Reputation: 43

Problem doing math with point values in highcharts tooltip.pointFormat

I'm creating a graph with highcharts. I'm trying to have a custom string be displayed when hovering over the points in the scatter graph. This string requires that I manipulate the data from that point a little bit, but I am not able to do that.

I know that one can access the data doing the following '{point.y}' but that doesn't allow me to manipulate the data (divide, Math.floor, ... it). I'm assuming that in order to do this I need to concatenate the portion where I manipulate the data with '+'. However nothing I've tried grabs the data like {point.y} does. I've tried 'this.y', 'this.point.y' I'm not really sure what works

...
tooltip: {
    pointFormat: '{point.y} ' + this.y
},
...

I am supposed to obtain what I would obtain with {point.y} with this.y so I can manipulate the data. So

Expected: 14.345354 14.345354
Actual: 14.345354 undefined

Upvotes: 1

Views: 411

Answers (1)

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

You can use the pointFormatter instead to specify a function that returns the desired value. With pointFormat you can only supply a string, with variables enclosed in curly brackets.

Using the pointFormatter (API) you can program the result specifically. For example (JSFiddle):

tooltip: {
    pointFormatter: function() {
        return 'x: <b>'+this.x+'</b><br/>y: <b>'+this.y+'</b><br/>'
    }
}

Would be similar to the default point format. Or to floor the X- and Y-value:

tooltip: {
    pointFormatter: function() {
        return 'x: <b>'+Math.floor(this.x)+'</b><br/>y: <b>'+Math.floor(this.y)+'</b><br/>'
    }
}

Upvotes: 1

Related Questions