DHTMLX Docs & Samples Explorer

Pie

Pie chart with Automatic radius and center position Pie chart with Custom radius and center position
20
Jan
30
Fen
50
Mar
40
Apr
70
May
80
Jun
60
Jul
Jan
Fen
Mar
Apr
May
Jun
Jul
Source
<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
<script src="../common/testdata.js"></script>
<script>
window.onload = function() {
    var chart = new dhtmlXChart({
        view: "pie",
        container: "chart1",
        value: "#sales#",
        color: "#color#",
        label: "#month#",
        pieInnerText: "#sales#",
        shadow: 0;
    });
    chart.parse(month_dataset, "json");
 
    var chart2 = new dhtmlXChart({
        view: "pie",
        container: "chart2",
        value: "#sales#",
        color: "#color#",
        tooltip: "#sales#",
        label: "#month#",
        shadow: 0,
        radius: 65,
        x: 280,
        y: 120;
    });
    chart2.parse(month_dataset, "json");
}
</script> <table> <tr> <td>Pie chart with Automatic radius and center position</td> <td>Pie chart with Custom radius and center position</td> </tr> <tr> <td><div id="chart1" style="width:400px;height:250px;border:1px solid #A4BED4;"></div></td> <td><div id="chart2" style="width:400px;height:250px;border:1px solid #A4BED4;"></div></td> </tr> </table>