DHTMLX Docs & Samples Explorer

### Initialization

Pie chart with Automatic radius and center position | Pie chart with Custom radius and center position

Source

    <script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
    <link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
    <script>var data = [{
        sales: "6300",
        company: "Company 1",
        color: "#d2ed7e"
    }, {
        sales: "8700",
        company: "Company 2",
        color: "#b3e025"
    }, {
        sales: "10500",
        company: "Company 3",
        color: "#9ac86d"
    }, {
        sales: "7800",
        company: "Company 4",
        color: "#e0e56c"
    }];
    window.onload = function() {
        var chart = new dhtmlXChart({
            view: "pie",
            container: "chart1",
            value: "#sales#",
            color: "#color#",
            label: "#company#",
            pieInnerText: "<b>#sales#</b>",
            gradient: true;
        });
        chart.parse(data, "json");

        var chart2 = new dhtmlXChart({
            view: "pie",
            container: "chart2",
            value: "#sales#",
            color: "#color#",
            label: "#company#",
            pieInnerText: "<b>#sales#</b>",
            gradient: true,
            radius: 90,
            x: 280,
            y: 150;
        });
        chart2.parse(data, "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:450px;height:300px;border:1px solid #A4BED4;"></div></td>
            <td><div id="chart2" style="width:450px;height:300px;border:1px solid #A4BED4;"></div></td>
        </tr>
    </table>