Show datalabels for spiderweb only when hovered ov

Question

I am creating a spiderweb chart following the Highcharts guide. Currently data label are enabled. I want to hide the data on load and only show the data when the user hovers over the line or hovers overs the legend. How can I accomplish this?

Here is a link to my JSFiddle: http://jsfiddle.net/mmaharjan/fqrvq3m8/

$(function () {

    $('#container').highcharts({

        chart: {
            polar: true,
            type: 'line'
        },

        title: {
            text: 'Hello World',
        },

        pane: {
            size: '80%'
        },

        xAxis: {
            categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
                'Information Technology', 'Administration'],
            tickmarkPlacement: 'on',
            lineWidth: 0
        },

        yAxis: {
            gridLineInterpolation: 'polygon',
            lineWidth: 0,
            min: 0,
            max: 5,
            labels: {
                enabled: false,
            }
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            align: 'center',
            verticalAlign: 'bottom',
            layout: 'vertical'
        },

        series: [{

            name: 'Allocated Budget',
            data: [1, 2, 1, 3, 4],
            pointPlacement: 'on'
        }, {

            name: 'Actual Spending',
            data: [3, 4, 5, 3, 2],
            pointPlacement: 'on'
        }]

    });
});

HTML:

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>

Answer 1

My suggestion is to use the events mouseOver and mouseOut of the series. These will hide and show the data labels. Then using the callback method when constructing the chart you can hide all the data labels by default and add additional events for hovering the legend items, utilizing the functionality of your mouseOver and mouseOut.

To illustrate, in your chart options you would have:

plotOptions: {
    series: {
        dataLabels: {
            enabled: true
        },
        events: {
            mouseOver: function(event) {
                // Show all data labels for the current series
                $.each(this.data, function(i, point){
                    point.dataLabel.show();
                });
            },
            mouseOut: function(event) {
                // Hide all data labels for the current series
                $.each(this.data, function(i, point){
                    point.dataLabel.hide();
                });
            }
        }
    }
}

And your callback function would be:

$('#container').highcharts({
    // Options...
}, function(chart) {
    // Hide data labels by default
    $.each(chart.series, function(i, series) {
        $.each(series.data, function(i, point){
            point.dataLabel.hide();
        });
    });

    // Add events for hovering legend items
    $('.highcharts-legend-item').hover(function(e) {
        chart.series[$(this).index()].onMouseOver();
    },function() {
        chart.series[$(this).index()].onMouseOut();
    });
});

See this JSFiddle for a complete example.