CODEWITHSUNDEEP
javascripthighcharts
stepheniok
stepheniok

Reputation: 405

Highcharts - Having bar percentage appear in tootlip

I would like the total percentage of each individual bar to appear in the tooltip. For example, I have 3 series objects such as: "Performance", " Sales" and "Bonus" which are displayed in different colors. I would like to when hovering over ... the tooltip displays the total amount of % out of 100

For example, Performance value is 10 but maybe 77% out of 100% from the graph. I would like it to display Performance: 10 how it is currently already but now adding the actual % of 100 it takes up in the bar. Is this something that possible?

I attempted this by using the formatted function and using the {value} as my specific percentage which ended up breaking my highcharts.

Here is a code snippet :

 formatter: function () {
                return ' <b> ' + value +  '</b> ' */

Here is a link to my jsfiddle

Upvotes: 1

Views: 38

Answers (1)

Krishna Kanth
Krishna Kanth

Reputation: 416

I have updated JSFiddle in below link JSFiddle

..........
      tooltip: {
        formatter: function() {
            console.log(this)
            return ' <b> ' + this.series.name + ' : ' + this.y + '</b> (' + Highcharts.numberFormat(this.percentage, 2) + ' out of 100 )'
        }
    },

Upvotes: 2

Related Questions