CODEWITHSUNDEEP
javascripthighcharts
Rahn
Rahn

Reputation: 5405

Customize Highcharts tooltip

I'm customizing Highcharts tooltip:

tooltip: {
    headerFormat: '<b>{series.name}</b><br>',
    pointFormat: 'round {point.x-9} to {point.x} avg: {point.y}'
}

but {point.x-10} can't be evaluated, instead of getting round 0 to 9 avg: 0.1, I have round to 9 avg: 0.1.

How do I fix it?

enter image description here

Upvotes: 0

Views: 118

Answers (1)

ppotaczek
ppotaczek

Reputation: 39069

Highcharts do not allow you to execute JS code in curly brackets. In API we can read:

pointFormat: String: The HTML of the point's line in the tooltip. Variables are enclosed by curly brackets. Available variables are point.x, point.y, series. name and series.color and other properties on the same form.

You should use formatter property: 

tooltip: {
  headerFormat: '<b>{series.name}</b><br>',
  formatter: function() {
    return 'round ' + (this.x - 9) + ' to ' + this.x + ' avg: ' + this.y
  }
}

Live demo: http://jsfiddle.net/BlackLabel/8xn5sv3t/

API: https://api.highcharts.com/highcharts/tooltip.pointFormat

Upvotes: 2

Related Questions