Removing Highchart Datalabels On Windows Resize

I have been trying to implement the pie chart using Highcharts but am encountering an issue with the datalabels on very low resolutions being cropped. I have attempted adding a win

Solution 1:

You can set useHTML as true for datalabels and in formatter define your own divs. Then when you catch resize event use show / hide functons.

Simple example which show/hide datalabels after click button is available here:

http://jsfiddle.net/VYGEW/

chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line'
        },
        title: {
            text: 'Monthly Average Temperature'
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    useHTML: true,
                    formatter: function () {
                        return '<div class="datalabel">' + this.y + '</div>';
                    }
                }
            }
        },
        series: [{
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }]
    }, function (chart) {

        $('#btn').toggle(function () {

            $('.datalabel').hide();
        }, function () {
            $('.datalabel').show();
        });

    });