Example to use custom info popup

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

//No CSS for this example 

var chart = new PieChart({
    container: document.getElementById("demo"),
    area: { height: 350 },
    data:
    {
        url: "/dvsl/data/pie-chart/continental-data.json",
        autoCategories: ["continent", "country"],
        sortField: "continent"
    },
    info: {
        contentsFunction: infoData
    }
});

function infoData(data, slice) {
    var info = "<div style='font-size:15px'>";

    if (data.subvalues != undefined && data.subvalues.length > 0) {
        if (data.__category === "continent") {
            info += "<p style='padding-top:10px; padding-left: 10px'>Countries:</p>";
        } else {
            info += "<p style='padding-top:10px; padding-left: 10px'>Years:</p>";
        }
        info += "<ul style='padding-right: 10px;'>";

        for (var i = 0; i < Math.min(10, data.subvalues.length) ; i++) {
            var a = data.subvalues[i];
            if (a.name.indexOf("-") >= 0) {
                info += "<li>" + a.name.split("-")[1] + "</li>";
            } else {
                info += "<li>" + a.name + "</li>";
            }
        }
        if (data.subvalues.length > 10) {
            info += "<li> ... </li>";
        }
        info += "</ul></div>";
        return info;
    }
}

//Data too large to output