Madvillain Madvillain - 2 months ago 6
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.name + this.y);
},
load: function() {
var chart = this,
rend = chart.renderer,
pie = chart.series[0],
left = chart.plotLeft + pie.center[0],
top = chart.plotTop + pie.center[1],
text = rend.text("text", left, top).attr({ 'text-anchor':'middle'}).add();
}
}
}
}
},


Please check my fiddle below, thanks for reading

jsFiddle

Answer

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

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

Here you can see an example how it can work: https://jsfiddle.net/ucweax9h/13/