Template:Pie chart/doc

How it works
This is an experimental template that draws pie charts using a single image, a lot of (inline) CSS code generated by parser functions, and absolutely no JavaScript. It uses a technique for drawing diagonal lines in CSS exploiting the fact that borders set on elements are miter joined. Thus, it is possible to set one border to an opaque color, with the others fully transparent, to form a diagonal line. The angle of the line can be controlled by adjusting the widths of two adjacent borders (one of them opaque) relative to each other.

Pie slices are drawn in clockwise order in a counterclockwise direction, the largest slice first. (That is why in this template it is necessary to list the percentages in order from least to greatest; otherwise the larger slices would cover up the smaller ones.) These pie slices are positioned: This allows only the part of each slice that is inside the circle to be visible on the page.
 * Below a 200x200px image having a transparent circle on a white background (hopefully close enough to the actual color)
 * Inside a container element with  set

Most of the code in Pie chart/slice is divided into five sections, the first four corresponding to quadrants of the circle and the last to cleanly cover the case in which one slice occupies 100% of the chart.

Usage
The labels and values of up to nine slices may be specified. All the parameters for three slices are included below; to include more slices, copy the code for one of the others, changing the digit at the end of each parameter name.


 * caption is a string of text that appears on a line just before the legend.
 * labelN is a string of text that appears in the legend entry for a slice. Omitting it will cause a legend entry to not be shown for that slice.
 * valueN is the percentage that the slice represents. Do not include the percent sign. Also note that it as shown in the legend as written (just after the label), without any rounding or other reformatting.
 * colorN is a CSS color code or name. If omitted, it will default to:
 * {{legend|red|red}}
 * {{legend|green|green}}
 * {{legend|blue|blue}}
 * {{legend|yellow|yellow}}
 * {{legend|fuchsia|fuchsia}}
 * {{legend|aqua|aqua}}
 * {{legend|#a52a2a|#a52a2a (brown)}}
 * {{legend|#ffa500|#ffa500 (orange)}}
 * {{legend|purple|purple}}

Current limitations

 * It does not work properly in Internet Explorer 6/7.
 * There is a spacing problem in both; this needs to be fixed.
 * Black appears in "transparent" areas in IE 6; there's a possibility that a workaround would help (would have to be done in MediaWiki:Common.css).
 * Minor printing issues probably exist.
 * The values need to be percentages.
 * The order that the percentages are in (greatest to least) is important; the template does not sort its inputs.
 * IE, Safari, and Opera do not appear to anti-alias borders, so the lines are a bit jagged.
 * No labels can be put on the slices themselves.
 * An "other" slice is not automatically included.