CODEWITHSUNDEEP
highcharts
red5
red5

Reputation: 312

Highcharts Modify Tooltip for One Series

Highcharts: I have a shared tooltip with 3 default bullets. I need to add custom information to the 3rd bullet (or series).

I need Bullet C to show its default value, but also show what percentage it is of Bullet B. In the screenshot below, Bullet C would say: "Good Condition: 3,448 (32% of Assessed).

My question is 2 parts:

enter image description here

Update: This code formats the bullet and partially answers my first question (except it's missing the comma for thousands format):

return '<span style="color:' + this.series.color + '">● </span>' + this.series.name + ':<b>' + this.y + '</b><br/>';

Upvotes: 1

Views: 470

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

You can define individual tooltip options for a series, in your case you need to use pointFormatter function, for example:

series: [..., {
  ...,

  tooltip: {
    pointFormatter: function() {
      var series = this.series.chart.series,
        percentage = Highcharts.numberFormat(
          this.y / series[1].points[this.index].y * 100, 
          2
        );

      return '<span style="color:' +
        this.color + '">●</span> ' +
        this.series.name + ': <b>' +
        Highcharts.numberFormat(this.y, 0) +
        '</b> Percentage: ' + percentage + '%<br/>'
    }
  }
}]

Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4955/

API Reference:

https://api.highcharts.com/highcharts/series.column.tooltip

https://api.highcharts.com/class-reference/Highcharts#.numberFormat

Upvotes: 3

Related Questions