Search code examples
javascriptjsonhighchartstooltippie-chart

Display in a tooltip data from a json in a Highcharts' pie

I display a chart of type pie which display 2 percentages. I want to modify what it is diplay in my tooltip to display something from my JSON. My JSON look like

{"object1":{"percentage": 0.7, "numberOfObject": 167}, "object2":{"percentage": 0.3, "numberOfObject": 125}}

The pie display the percentage like that:

jsonValue.object1.percentage and jsonValue.object2.percentage

I want to display in my tooltip "numberOfObject" for each object when I put my mouse on its parts of the chart.

Solution

  • For the tooltip:

    tooltip: { formatter: function() { if (this.point.name === 'object 1') return '<b>' + jsonValue.object1.numberOfObject + '</b>'; else return '<b>' + jsonValue.object2.numberOfObject + '</b>'; } }

    and for the data:

    data: [
                ['object 1', jsonValue.object1.percentage],
                ['object2', jsonValue.object2.percentage]
]