Madvillain Madvillain - 11 months ago 49
jQuery Question

onclick display donut chart pieces' information in center

I am trying to create a highchart for our status page, whenever a piece of the donut is clicked it detaches, but then it also needs to display whatever information it contains in a nice format in the center of the donut chart, however I cannot get it to work.

I've managed to create a click function that puts the data from the clicked piece into a span below the chart, but I know there's a better way of doing this.

series: {
point: {
events: {
click: function() {
$("#displayStats").text( + this.y);
load: function() {
var chart = this,
rend = chart.renderer,
pie = chart.series[0],
left = chart.plotLeft +[0],
top = chart.plotTop +[1],
text = rend.text("text", left, top).attr({ 'text-anchor':'middle'}).add();

Please check my fiddle below, thanks for reading


Answer Source

You can use chart.renderer for adding custom label in your chart on point click:

  addLabel = function(point) {
    var text = + ': ' + point.y,
      chart = point.series.chart,
      renderer = chart.renderer;
    chart.renderer.label(text, chart.chartWidth / 2, chart.chartHeight / 2).attr({
      'text-anchor': 'middle',

Here you can see an example how it can work: