Create a Doughnut Chart

Building on the Quick Start example, you can change the pie chart into a doughnut chart using the innerRadius option.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which sets the innerRadius option to 40 pixels.

Script	Copy Code
<script id="script1" type="text/javascript"> $(document).ready(function () { $("#wijpiechart").wijpiechart({ radius: 140, innerRadius: 40, hint: { content: function () { return this.data.label + " : " + Globalize.format(this.value / this.total, "p2"); } }, header: { text: "Steam Mac Hardware Survey" }, seriesList: [{ label: "MacBook Pro", data: 46.78, offset: 15 }, { label: "iMac", data: 23.18, offset: 0 }, { label: "MacBook", data: 20.25, offset: 0 }, { label: "Mac Pro", data: 5.41, offset: 0 }, { label: "Mac Mini", data: 3.44, offset: 0 }], seriesStyles: [{ fill: "180-rgb(195,255,0)-rgb(175,229,0)", stroke: "rgb(175,229,0)", "stroke-width": 1.5 }, { fill: "90-rgb(142,222,67)-rgb(127,199,60)", stroke: "rgb(127,199,60)", "stroke-width": 1.5 }, { fill: "90-rgb(106,171,167)-rgb(95,153,150)", stroke: "rgb(95,153,150)", "stroke-width": 1.5 }, { fill: "90-rgb(70,106,133)-rgb(62,95,119)", stroke: "rgb(62,95,119)", "stroke-width": 1.5 }, { fill: "90-rgb(166,166,166)-rgb(149,149,149)", stroke: "rgb(149,149,149)", "stroke-width": 1.5 }] }); }); </script>

Script

Copy Code

<script id="script1" type="text/javascript">       
    $(document).ready(function () {
    $("#wijpiechart").wijpiechart({
        radius: 140,
        innerRadius: 40,
        hint: {
            content: function () {
                return this.data.label + " : " + Globalize.format(this.value / this.total, "p2");
            }
        },
        header: {
            text: "Steam Mac Hardware Survey"
        },
        seriesList: [{
            label: "MacBook Pro",
            data: 46.78,
            offset: 15
        }, {
            label: "iMac",
            data: 23.18,
            offset: 0
        }, {
            label: "MacBook",
            data: 20.25,
            offset: 0
        }, {
            label: "Mac Pro",
            data: 5.41,
            offset: 0
        }, {
            label: "Mac Mini",
            data: 3.44,
            offset: 0
        }],
        seriesStyles: [{
            fill: "180-rgb(195,255,0)-rgb(175,229,0)", 
            stroke: "rgb(175,229,0)", 
            "stroke-width": 1.5
        }, {
            fill: "90-rgb(142,222,67)-rgb(127,199,60)", 
            stroke: "rgb(127,199,60)", 
            "stroke-width": 1.5
        }, {
            fill: "90-rgb(106,171,167)-rgb(95,153,150)", 
            stroke: "rgb(95,153,150)", 
            "stroke-width": 1.5
        }, {
            fill: "90-rgb(70,106,133)-rgb(62,95,119)", 
            stroke: "rgb(62,95,119)", 
            "stroke-width": 1.5
        }, {
            fill: "90-rgb(166,166,166)-rgb(149,149,149)", 
            stroke: "rgb(149,149,149)", 
            "stroke-width": 1.5
        }]
    });
});
</script>

No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the chart.
Save your HTML file and open it in a browser. The chart appears like the one in the live widget below, with the center cut out to create a doughnut shape.

Reference

wijpiechart API