Pie - exploded

by praveen_kr

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px; width: 500"></div>

JavaScript

$(function() {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'pie'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                events:{
                click:function(event)
                {
                console.log(event);
               
                $.each( event.point.series.data, function(i, point) {
                if(point != event.point){
           point.graphic.attr({ opacity: 0.25 });
           }
           else
           {point.graphic.attr({ opacity: 1 });}
         });
         		event.point.graphic.attr({fill: '#FFDD00' });
         			
                }
                },
                
                point:{
                    events:{
                        unselect: function(event) {
                            //this.slice(true);
                        }
                    }
                }
            }
        },

        series: [{
            data: [
                {
                    name: 'Jan',
                    y: 29.9,
                    sliced:false
                },
                {
                    name: 'Feb',
                    y: 71.5,
                    sliced:false

                },
                {
                    name: 'Mar',
                    y: 106.4,
                    sliced:false

                },
                {
                    name: 'Apr',
                    y: 100,
                    sliced:false

                }
            ],
            slicedOffset:20
        }]
    });
});