Wijmo UI for the Web
Change Colors and Outlines
Wijmo User Guide > Widgets > PieChart > PieChart How To > Change Colors and Outlines
Show AllShow All
Hide AllHide 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

  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

  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 jQuery Widget
seriesStyles Option
seriesList Option
 
Support Options