CODEWITHSUNDEEP
highchartsreact-highchartshighcharts-ng
Anass Tber
Anass Tber

Reputation: 1

highcharts sum up tooltip {point.y} with a specific number

Hello and thanks SO MUCH in advance for any help you might give. I'm trying to sum the {point.y} that's displayed in the tooltip HTML with a number, for example if {point.y} is 100, I want it to be 100+1=101 . but I can't find a way to do so. ( tried {point.y}+1 , but didn't work as its interpreted as HTML and not as a sum operation). Thank you!!

Upvotes: 0

Views: 361

Answers (2)

dswinburne
dswinburne

Reputation: 1

As of Highcharts 11 (2023), you can now add logic into formatting strings, using what they call "helpers" in a format that's like Polish Notation. So you could do something like this:

"tooltip":{
      "pointFormat":"{add point.y 1}"
   }

and if you needed to do additional formatting (like adding a thousands separator), you could put your math logic into a subexpression by wrapping it in parentheses like this:

"tooltip":{
      "pointFormat":"{(add point.y 1):,f}"
   }

There's a lot of cool stuff you can do with it, like writing your own custom helpers. More info here: https://www.highcharts.com/docs/chart-concepts/templating

I prefer this over the callback method because it allows me to store the highcharts config in JSON format, but this may not matter for you.

Upvotes: 0

ppotaczek
ppotaczek

Reputation: 39099

You can use the pointFormatter or formatter function callback for a tooltip. For example:

  tooltip: {
    pointFormatter: function() {
      return `<span style="color:${this.color}">\u25CF</span> ${this.series.name}: <b>${this.y + 1}</b><br/>`
    }
  }

Live demo: http://jsfiddle.net/BlackLabel/9ayqdot6/

API Reference: https://api.highcharts.com/highcharts/tooltip.pointFormatter

Upvotes: 0

Related Questions