ElementStacks

by eorozco

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<a href="#" id="hoverState">hover me</a> to set hover state<br/>

<a href="#" id="hoverState">hover me</a> to set hover state<br/>


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

JavaScript

window.chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'pie'
    },
    
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0],
        showInLegend: true
    }]
}, function(chart){

    $('#hoverState').hover(function(){
        chart.series[0].data[0].setState('hover');
    },function(){
        chart.series[0].data[0].setState('');
    });

    $('#mouseOver').hover(function(){
        $(chart.series[0].data[0].tracker.element).trigger('mouseover');
    },function(){
        $(chart.series[0].data[0].tracker.element).trigger('mouseout');
    });

});