Label placement

<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>

<div>
    <div style="float:left; width: 30%">
        <label for="ato" style="display: block; margin:5px"><input style="margin-right:5px" type="radio" id="ato" name="p" value="atoutside">auto outside</label>
        <label for="ati" style="display: block; margin:5px"><input style="margin-right:5px" type="radio" id="ati" name="p" value="atinside">auto inside</label>
        <label for="awi" style="display: block; margin:5px"><input style="margin-right:5px" type="radio" id="awi" name="p" value="awinside">always inside</label>
        <label for="api" style="display: block; margin:5px"><input style="margin-right:5px" type="radio" id="api" name="p" value="dnatboth">append inside</label>
        <label for="bl" style="display: block; margin:5px"><input style="margin-right:5px" type="radio" id="bl" name="p" value="both">both labels visible</label>
    </div>
    <div id="demo" style="width: 60%; display: inline-block;"></div>
</div>

//No CSS for this example 

    var chart = new PieChart({
        container: document.getElementById("demo"),
        area: { height: null },
        data: { url: "/dvsl/data/pie-chart/browsers.json" }
    });
    
    //auto outside and inside invisible
    document.getElementById("ato").addEventListener("click", function(){
        chart.updateSettings({
            labels: { insideLabel: "auto" },
            slice: { styleFunction: outsideStyle }
        });
    });

    //auto inside and outside invisible
    document.getElementById("ati").addEventListener("click", function(){
        chart.updateSettings({
            labels: { insideLabel: "auto" },
            slice: { styleFunction: insideStyle }
        });
    });

    //always inside
    document.getElementById("awi").addEventListener("click", function(){
        chart.updateSettings({
            labels: { insideLabel: "always" },
            slice: { styleFunction: insideStyle }
        });
    });

    //append invisible inside labels
    document.getElementById("api").addEventListener("click", function(){
        chart.updateSettings({
            labels: { insideLabel: "append" },
            slice: { styleFunction: insideStyle }
        });
    });

    //append invisible inside labels
    document.getElementById("bl").addEventListener("click", function(){
        chart.updateSettings({
            labels: { insideLabel: "append" },
            slice: { styleFunction: bothLabels }
        });
    });

    function bothLabels(slice, data) {
        slice.label.text = data.name;
        slice.insideLabel.text = data.value;
    }

    function insideStyle(slice, data) {
        slice.label.text = null;
        slice.insideLabel.text = data.value;
    }

    function outsideStyle(slice, data) {
        slice.insideLabel.text = null;
        slice.label.text = data.name;
    }

//Data too large to output