Search code examples
javascripthighchartsdata-visualizationinteractivedonut-chart

Highcharts.js : get specific value from data to tooltip


I want to make a Highcharts donut chart based on this one. Only that my data would look something like this:

data: [
                {y:40, color: colors[0], name: 'yoyo'},
                {y:0, color: colors[1],  name: 'dada'},
                {y:60, color: colors[2],  name: 'sasa'}
            ]

Now: when I change the mouseOver function to this:

mouseOver: function(){
                        this.series.chart.innerText.attr({text: this.name});
                    },

Then I am able to retrieve the value of the the name-key from my data. However, when I want to add it to a tooltip, the following code does not work (code is added after tooltip: in the original code):

{
      formatter: function() {
                             return '<b>'+this.name+'</b>';
                    }
                },

When I change this.name to this.y then I again get the correct value. Could anyone please tell me how to retrieve this.name for the tooltip? Any help would be very much appreciated.


Solution

  • change your formatter by :

    formatter: function() {
        return '<b>' + this.key + '</b>';
    }
    

    When you don't know how is your object, use console.log(myObject) in your code and check your js console.