Wijmo UI for the Web
Change Colors and Outlines
Wijmo User Guide > Widgets > Chart Widgets > PieChart > PieChart How To > Change Colors and Outlines
Show All
Hide All

Building on the Quick Start example, you can change the pie wedge colors 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 stroke color to be different from the second rgb color so that the slice is outlined. 

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

    Script
    Copy Code 
    <script id="script1" type="text/javascript">       
    $(document).ready(function () {
    $("#wijpiechart").wijpiechart({
        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(122,122,122)", 
            "stroke-width": 1.5
        }, {
            fill: "90-rgb(142,222,67)-rgb(127,199,60)", 
            stroke: "rgb(122,122,122)", 
            "stroke-width": 1.5
        }, {
            fill: "90-rgb(106,171,167)-rgb(95,153,150)", 
            stroke: "rgb(122,122,122)", 
            "stroke-width": 1.5
        }, {
            fill: "90-rgb(70,106,133)-rgb(62,95,119)", 
            stroke: "rgb(122,122,122)", 
            "stroke-width": 1.5
        }, {
            fill: "90-rgb(166,166,166)-rgb(149,149,149)", 
            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 each slice of pie outlined.

Change the script again to change the colors of the pie slices.

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

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

    Script
    Copy Code 
    <script id="script1" type="text/javascript">       
    $(document).ready(function () {
    $("#wijpiechart").wijpiechart({
        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(12,133,240)-rgb(128,19,128)",  
            stroke: "rgb(122,122,122)", 
            "stroke-width": 1.5
        }, {
            fill: "90-rgb(143,51,140)-rgb(33,130,13)", 
            stroke: "rgb(122,122,122)", 
            "stroke-width": 1.5
        }, {
            fill: "90-rgb(8,34,201)-rgb(196,98,172)", 
            stroke: "rgb(122,122,122)", 
            "stroke-width": 1.5
        }, {
            fill: "90-rgb(11,125,25)-rgb(6,6,125)", 
            stroke: "rgb(122,122,122)", 
            "stroke-width": 1.5
        }, {
            fill: "90-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 the new colors showing in each slice of pie.
See Also
PieChart How To
Change Gradients in Pie Wedges

Concepts

Style Options
ThemeRoller
Themes and Styles

Reference

wijpiechart API

 

 

Copyright © GrapeCity, Inc. All rights reserved.

Product Support Forum | Print this page