Change Gradients in Pie Wedges

Building on the Quick Start example, you can change the pie wedge colors and gradients, and the outline color and thickness using the seriesStyles option and the fill, stroke, and stroke-width attributes. For more information, see Style Options.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which changes the seriesStyles gradient number (before the rgb color) to define the gradient.

Script	Copy Code
<script id="script1" type="text/javascript"> $(document).ready(function () { $("#wijpiechart").wijpiechart({ radius: 140, 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: "270-rgb(12,133,240)-rgb(128,19,128)", stroke: "rgb(122,122,122)", "stroke-width": 1.5 }, { fill: "180-rgb(143,51,140)-rgb(33,130,13)", stroke: "rgb(122,122,122)", "stroke-width": 1.5 }, { fill: "270-rgb(8,34,201)-rgb(196,98,172)", stroke: "rgb(122,122,122)", "stroke-width": 1.5 }, { fill: "270-rgb(11,125,25)-rgb(6,6,125)", stroke: "rgb(122,122,122)", "stroke-width": 1.5 }, { fill: "180-rgb(63,15,77)-rgb(12,159,250)", stroke: "rgb(122,122,122)", "stroke-width": 1.5 }] }); }); </script>

Script

Copy Code

<script id="script1" type="text/javascript">       
    $(document).ready(function () {
    $("#wijpiechart").wijpiechart({
        radius: 140,
        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: "270-rgb(12,133,240)-rgb(128,19,128)", stroke: "rgb(122,122,122)", "stroke-width": 1.5
        }, {
            fill: "180-rgb(143,51,140)-rgb(33,130,13)", stroke: "rgb(122,122,122)", "stroke-width": 1.5
        }, {
            fill: "270-rgb(8,34,201)-rgb(196,98,172)", stroke: "rgb(122,122,122)", "stroke-width": 1.5
        }, {
            fill: "270-rgb(11,125,25)-rgb(6,6,125)", stroke: "rgb(122,122,122)", "stroke-width": 1.5
        }, {
            fill: "180-rgb(63,15,77)-rgb(12,159,250)", stroke: "rgb(122,122,122)", "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 image below, with a gradient from top to bottom in the top wedge, and different gradients for each wedge.

Concepts

Style Options

ThemeRoller

Themes and Styles

Reference

wijpiechart API