Chart Pie II
Chart Pie II
View Demo

Insert it in <head>

<!-- Choose one for Light Mode -->
<link id="themecss" rel="stylesheet" type="text/css" href="https://i-as.dev/devui/css/light/all.min.css" />
<!-- Choose one for Dark Mode -->
<link id="themecss" rel="stylesheet" type="text/css" href="https://i-as.dev/devui/css/dark/all.min.css" />

<script type="text/javascript" src="https://i-as.dev/devui/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://i-as.dev/devui/js/devui-all.min.js"></script>

Use Components

<body class="theme-light">

<div id="chart"></div>
<script type="text/javascript">
    $(document).ready(function () {
        var browsersPopularity = [
          ["IE", 9.0],
                    ["Firefox", 26.8],
                    ["Chrome", 55.8],
                    ["Safari", 3.8],
                    ["Opera", 1.9]
        ];
        $("#chart").devuiChart({
            theme: "light",
            exportOptions: {
                image: false,
                print: false
            },
            primaryHeader: {
                text: "Browsers Popularity among Users"
            },
            seriesSettings: {
                pie: {
                    enablePointSelection: true
                }
            },
            tooltipSettings: {
                customPointText: "{point.collectionAlias}: {point.y}"
            },
            axisY: {
                title: {
                    text: "Browsers Popularity among Users"
                }
            },
            dataSeries: [{
                seriesType: "pie",
                collectionAlias: "Usage",
                data: browsersPopularity
            }]
        });
    });
</script>

</body>