Highchart js click rotate and expand arc

Question

Hi I'm looking to create a pie chart with highchart js that expands twolayers, and rotates to the center whenever I click a section.

So far I have a pie chart that expands one layer, and a click function that brings the arcs to the center (-90). I also have a click function that rotates the pie by degrees. My inner arc stays in the center and im having a hard time moving the arc to the same position of the out rings. The inner arc do not follow the click rotate aswell.

I would like to make a pie that rotates smoothly to center (-90) and expands with two extra layers. with the inner arch to follow the outer arch and be in the same starting point as the outer arch

Thank you in advance

here is what my code executes and looks like :

pie chart with what im currently running

Here is my script

$(function () {

    var lastHighlight = -1;
    var lastPos = [10,10,10];
    $('#mouseMoveDiv').click(function () {
        var theChart = $('#container').highcharts();
        var currStartAngle = theChart.series[0].options.startAngle;
        //console.log('currStartAngle: ' + currStartAngle);
        var newStartAngle = currStartAngle + 5;
        if (newStartAngle > 359) {
            newStartAngle = 5;
        }
        //console.log(newStartAngle);
        theChart.series[0].update({
            startAngle: newStartAngle
        });
        var someData = theChart.series[0].data;
        var N = someData.length;
        var highLight = -1;
        for (var i = 0; i < N; i++){
            var startAngle = someData[i].angle + (((someData[i].percentage/100) * 6.28318)/2);
            var dis = 1.5795 - startAngle;
            if (lastPos[i] > 0 && dis < 0){
                highLight = i;
                lastPos[i] = dis;
                break;
            }
            lastPos[i] = dis;
        }
        if (highLight != -1){
            var someRows = $('#dataTable tr');
            someRows.eq(lastHighlight).css('backgroundColor','white');
            someRows.eq(highLight).css('backgroundColor','yellow');
            lastHighlight = highLight;
        }
    });



    $('#container').highcharts({







        chart: {
            type: 'pie',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },

        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    format: '{point.name}',
                    center: ["50%", "50%"],
                    connectorWidth: 0,
                    startAngle: 90,
                    animation: false
                }
            }
        },

        exporting: {
            enabled: false
        },
        tooltip: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        title: {
            text: null
        },




        series: [{
            type: 'pie'
            data: [
                { name: 'Planning', y: 33.3 },
                { name: 'Sprints', y: 33.3 },
                { name: 'Release', y: 33.3 }
            ],

            size: '60%',
            innerSize: '40%',
            point: {
                events: {
                    click: function () {
                        var chart = this.series.chart,
                                series = chart.series,
                                len = series.length,
                                index = this.x + 1,
                                i;
                        for (i = 1; i < len; i++) {
                            if (i === index) {
                                series[i].update({
                                    size: '100%',
                                    dataLabels: {
                                        enabled: true
                                    }
                                }, false);
                            } else {
                                series[i].update({
                                    size: '0%',
                                    dataLabels: {
                                        enabled: false
                                    }
                                }, false);
                            }
                        }
                        var points = this.series.points;
                        var startAngle = 0;
                        for (var i = 0; i < points.length; i++) {
                            var p = points[i];
                            if (p == this) {
                                break;
                            }
                            startAngle += (p.percentage / 100.0 * 360.0);
                        }
                        this.series.update({
                            startAngle: -startAngle + 90 - ((this.percentage / 100.0 * 360.0) / 2) // center at 180
                        })
                        chart.redraw();
                    }

                }
            },
            dataLabels: {
                distance: 90, //distance name
                style: {
                    color: 'Black'
                },
                enabled: true
            },

            zIndex: 1
        },

            {
                zIndex: 0,
                type: 'pie',
                size: '60%',
                innerSize: '0%',


                data: [{
                    y: 2,
                    color: 'rgba(250,0,0,1)',
                    name: 'Training'

                },
                    {
                    y: 2,
                    color: 'rgba(250,0,0,1)',
                    name: 'Secure'
                },
                    {
                    y: 8,
                    color: 'rgba(0,0,0,0)',
                    dataLabels: {
                        enabled: false
                    }

                }],
                dataLabels: {
                    distance: -30,
                    enabled: false,
                    style: {
                        color: 'black'
                    }
                },
                enableMouseTracking: false
            },


            {
                zIndex: 0,
                type: 'pie',
                size: '0%',
                data: [{
                    y: 3,
                    color: 'rgba(0,0,0,0)',
                    dataLabels: {
                        enabled: false
                    }
                }, {
                    y: 1,
                    color: 'rgba(0,200,0,1)',
                    name: 'test'
                }, {
                    y: 1,
                    color: 'rgba(0,200,0,1)',
                    name: 'test'
                }, {
                    y: 1,
                    color: 'rgba(0,200,0,1)',
                    name: 'test'
                }, {
                    y: 3,
                    color: 'rgba(0,0,0,0)',
                    dataLabels: {
                        enabled: false
                    }
                }],
                dataLabels: {
                    distance: -30,
                    enabled: false
                    style: {
                        color: 'black'
                    }
                },
                enableMouseTracking: false
            },


            {
                zIndex: 0,
                type: 'pie',
                size: '0%',
                data: [{
                    y: 6,
                    color: 'rgba(0,0,0,0)',
                    dataLabels: {
                        enabled: false
                    }
                }, {
                    y: 1,
                    color: 'rgba(0,0,200,1)',
                    name: 'test'
                }, {
                    y: 1,
                    color: 'rgba(0,0,200,1)',
                    name: 'test'
                }, {
                    y: 1,
                    color: 'rgba(0,0,200,1)',
                    name: 'test'
                }],
                dataLabels: {
                    distance: -30,
                    enabled: false,
                    style: {
                        color: 'black'
                    }
                },
                enableMouseTracking: false
            }]
    });
});

Answer 1

I suggest to change logic a bit: use one series for each of the circles, and manage manually visibility of the slices instead. For example: http://jsfiddle.net/vkhvvs5d/3/

And to answer the second question, rotate animation is not supported when using series.update(), however it have an easy workaround: http://jsfiddle.net/8x54efu6/3

var chart = $("#container").highcharts(),
    pie = chart.series[0];

pie.options.startAngle = new_angle;
pie.isDirty = pie.isDirtyData = true;

chart.redraw();