onclick display donut chart pieces' informatio

Question

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 1

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/