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

Question

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!!

Answer 1

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

Answer 2

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.