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

highcharts

Solution

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

Problem

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)?

Original source