CODEWITHSUNDEEP
highcharts
Rob Willis
Rob Willis

Reputation: 4844

Customise Highcharts Pie Chart Selection State so that slice does not animate out when selected

I am trying to customize the selection state of a Highcharts Pie Chart slice so that it does not move out when selected. The HighCharts selection state documentation offers a 'radius' option for selection state, but these setting have no effect on a pie chart: 

$(function () {
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'pie'
    },        
    plotOptions: {
        series: {
            allowPointSelect: true,
            marker: {
                states: {
                    select: {
                        radius: 0,
                        fillColor: '#666'
                    }
                }
            }
        }
    },

    series: [{
        data: [['Jan', 29.9], ['Feb', 71.5], ['Mar', 106.4], ['Apr', 129.2], ['May', 144.0], ['Jun', 176.0], ['Jul', 135.6], ['Aug', 148.5], ['Sep', 216.4], ['Oct', 194.1], ['Nov', 95.6], ['Dec', 54.4]]        
    }]
});
});​

See Working Example.

The following example illustrates change the color of a selected slice but these settings are not documented and adding a 'radius' property has no effect:

$(function () {
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'pie'
    },        
    plotOptions: {
        series: {
            allowPointSelect: true,
            states: {
                select: {
                    color: '#666'
                }
            }
        }
    },

    series: [{
        data: [['Jan', 29.9], ['Feb', 71.5], ['Mar', 106.4], ['Apr', 129.2], ['May', 144.0], ['Jun', 176.0], ['Jul', 135.6], ['Aug', 148.5], ['Sep', 216.4], ['Oct', 194.1], ['Nov', 95.6], ['Dec', 54.4]]        
    }]
    });
});​

See working example

Has anyone managed to disable the pie chart slice selection animation whilst applying just a fill color to the selected slice(s)?

Upvotes: 2

Views: 9979

Answers (2)

Mahi Kalyankar
Mahi Kalyankar

Reputation: 257

Basically, you want that whenever you click on pie chart the slice you clicked should not go out. so do this simply:

allowPointSelect: false,

It will stop that slice to go out & no need to set any slicedOffset Here is an JsFiddle

Upvotes: 0

Rob Willis
Rob Willis

Reputation: 4844

Thanks to help from Sebastian and Pawel on the Highcharts Support Forum the slice animation is disabled via the "slicedOffset: 0" setting:

$(function () {
  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      type: 'pie'
    },        
    plotOptions: {
      series: {
        allowPointSelect: true,
        slicedOffset: 0,
        states: {
            select: {
                color: '#666'
            }
        }
    }
},

series: [{
    data: [['Jan', 29.9], ['Feb', 71.5], ['Mar', 106.4], ['Apr', 129.2], ['May', 144.0], ['Jun', 176.0], ['Jul', 135.6], ['Aug', 148.5], ['Sep', 216.4], ['Oct', 194.1], ['Nov', 95.6], ['Dec', 54.4]]        
    }]
  });
});​

See working example

Upvotes: 9

Related Questions