Question

i have to do some customization like :
1. remove hand pointer on mouse over the pie slices.
2. display the label inside the large/big slice.
3. on mouseover/mouseout high light the respective div.

Reference img:

Here is the jsfiddle, which i have worked to implement the 3 point:
on mouse over i could highlight the selected, but on mouse out not able to remove the color

HTML

    <div class="grid_5">
<div class="grid_4" id="top_states_chart" style="min-width: 200px; height: 200px; margin: 0 auto"></div>
<div class="grid_4 right">
    <div class="Others level1">Maharastra</div>
    <div class="Firefox level2">Karnataka</div>
    <div class="level3">Gujarat</div>
    <div class="level4">Tamil Nadu</div>
    <div class="level5">Madhya Pradesh</div>
</div>
</div>

jQquery

$(function () {
    var chart;
    Highcharts.setOptions({
        colors: ['#fffccc', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263',      '#6AF9C4']
       });
    $(document).ready(function () {

        // Build the chart
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'top_states_chart',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: ''
            },
            tooltip: {
                //pointFormat: '',//{series.name}: <b>{point.percentage}%</b>
                //percentageDecimals: 1
                formatter: function() {
                    return false;
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: false,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: false,
                    point: {
                        events: {
                            mouseOver: function(event) {
                                var point = this;


                                $('div.'+point.name).css({'background-color':'green', 'cursor':'pointer'});
                             }
                        }
                    },
                    events: {
                        mouseOut: function() {
                            //pieChart.tooltip.hide();
                            var point = this;

                            $('div.'+point.name).css({'background-color':'none', 'cursor':'pointer'});
                        }
                    }
                }
            },
            series: [{
                type: 'pie',

                data: [
                    ['Firefox',   45.0],
                    ['Others',   55.7]
                ]
            }]
        });
    });

});

http://jsfiddle.net/XErNG/135/

please have a look at this js code.

Thanks

Answer 1

Use mouseOver and mouseOut as events.
Use togleClass to toggle style.

pie: {
    allowPointSelect: false,
    stickTracking: false,

    // solves problem 1
    cursor: 'normal',

    // the following solves problem 2
    dataLabels: {
        enabled: false,
        formatter: function () {
            return this.y;
        },
        distance: -30
    },

    // the following solves problem 3
    point: {
        events: {
            mouseOver: function() {
                $('div.' + this.name).addClass('highlight');
            },
            mouseOut: function() {
                $('div.' + this.name).removeClass('highlight');
            }
        }
    }
}

Then your serie date should be:

data: [
    ['Firefox', 45.0],
    {
        name: 'Others',
        y: 55.7,
        dataLabels: {
            enabled: true
        }
    }
]

Css

.highlight {
    background-color: red;
}

demo