onclick display donut chart pieces' information in center

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

I think this is what you are trying to do:http://stackoverflow.com/questions/9732205/place-text-in-center-of-pie-chart-highcharts — Rakesh G R, Sep 29 '16 at 11:18
Partially, yes, I am trying to display the individual piece data whenever a piece is clicked, in the center of the donut chart, not just a title. — Madvillain, Sep 29 '16 at 11:21
I know you already have an answer...have a look at this all the same:https://jsfiddle.net/grrakesh4769/ndb9sphz/1/ — Rakesh G R, Sep 29 '16 at 11:35
@GrzegorzBlachliński thanks...but I did use an external div...which is simply ugly!! — Rakesh G R, Sep 29 '16 at 11:40

score 2 · Accepted Answer · answered Sep 29 '16 at 11:28

2

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/

answered Sep 29 '16 at 11:28

Grzegorz Blachliński

5,132
10
13

Thanks for showing me, I was already using the renderer, however mine wasn't working. – Madvillain Sep 29 '16 at 11:32
I have an additional question, if you don't mind, I have been trying to get a count animation, seen in examples as such https://codepen.io/shivasurya/pen/FatiB on the numeral labels, I have a feeling this could be implemented fairly easy with your existing solution, however I haven't been succesful. Updated the fiddle in the original question. – Madvillain Sep 29 '16 at 14:45
1

Here you can see an example how you can achieve this count animation: https://jsfiddle.net/ucweax9h/18/ – Grzegorz Blachliński Sep 29 '16 at 14:53
Grzegorz is there any way you can tell me how to make similiar countdown on the element above the one you already added countdown to? I've been trying to do so, but I can't target the specific child element. https://jsfiddle.net/Staehren/2t4L0d67/ – Madvillain Oct 06 '16 at 08:12
1

You should be able o change your interval time https://jsfiddle.net/2t4L0d67/7/ additionally you are clearing wrong intervals, I have corrected it in my fiddle – Grzegorz Blachliński Oct 06 '16 at 17:05

onclick display donut chart pieces' information in center

1 Answers1

Linked