Placing labels inside pie chart slices (Highchart)

Question

Using Highchart. I am positioning the labels inside the slices using distance and it centers well on mobile, but not on tablets or desktops. As the dimensions become larger, the labels get too close to the edges. How to position labels depending on viewport dimensions?

plotOptions: {
    pie: {
        allowPointSelect: true,
        cursor: "pointer",
        dataLabels: {
            enabled: true,
            format: "<strong>{point.name}</strong><br>{point.percentage:.0f}%",
            distance: -60,
            color: "white"
        }
    },

series: [ {
            type: "pie",
            data: [
                {
                    name: "Not too much text here",
                    color: "#5cb85c",
                    y: 35
                },
                {
                    name: "Not too much text here",
                    color: "#5bc0de",
                    y: 30
                },
                {
                    name: "Less text here",
                    color: "#78629b",
                    y: 15
                },
                {
                    name: "Less text here",
                    color: "#f0ad4e",
                    y: 10
                },
                {
                    name: "Less text here",
                    color: "#d9534f",
                    y: 10
                }
            ]
        } ]

EDIT: http://jsfiddle.net/TimNguyenBSM/rL1bwam6/1/

Answer 1

You could use a variable for the distance-option which you've prepared beforehand. For example:

var windowSize = $(window).width();
var distance = -60;

if(windowSize > 700)
    distance -= 30;
// else if...

And in your plotOptions.pie.dataLabels:

distance: distance