How to create a Pie chart explode effect

Share RGraph:   Share or Like RGraph on Facebook!

A guide to how to create a Pie chart explode effect

[No canvas support]

Here we have a Pie chart which by default is exploded - and when each segment is clicked the selected segment explodes further. It's not a default option, but the code required to do it is minimal and shown below.

    window.onload = (function ()
        var pie = new RGraph.Pie({
            id: 'cvs',
            data: [9,5,12,8,4,9],
            options: {
                strokestyle: '#e8e8e8',
                linewidth: 5,
                shadowBlur: 5,
                shadowOffsetx: 5,
                shadowOffsety: 5,
                shadowColors: '#aaa',
                exploded: 10,
                radius: 80,
                labels: ['Mavis','Kevin','Luis','June','Olga','Luis','Pete','Bridget'],
                labelsSticks: true,
                labelsSticksLength: 15,
                textSize: 14
        }).on('click', function (e, shape)
            var index = shape.index;
            var obj = shape.object;
            // Reset all the segments to 10
            obj.set('exploded', 10);
            obj.explodeSegment(index, 15);
        }).on('mousemove', function (e, shape)
   = 'pointer';
        window.addEventListener('mousedown', function (e) {pie.set('exploded', 10);}, false);
© Copyright Richard Heyes 2008-2017