Wijmo UI for the Web
Change Gradients in Pie Wedges
Wijmo User Guide > Widgets > Chart Widgets > PieChart > PieChart How To > 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.

  1. 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. 

    Drop down and copy script to paste in <head> section

    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>
  2. No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the chart.
  3. 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.
See Also

Concepts

Reference