This site is supported by donations to The OEIS Foundation.
Template:Pie chart
[⧼Purge⧽ Template:Pie chart]
Please do not use this unfinished and/or still unreliable template.
The {{pie chart}} graphic template draws pie charts with up to 30 (plus an optional “other” slice) labeled slices.
Contents
How it works
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.
Note that in the legacy browser Internet Explorer 6, applying transparent borders the standard way does not work. A workaround is used in the form of the CSS class "transborder", which has been added to MediaWiki:Common.css to make this template usable.
Pie slices are drawn in clockwise order in a counterclockwise direction. These pie slices are positioned:
- Below a 200x200px image having a transparent circle on a light-colored background (same as the background color used for CSS class "thumbinner")
- Inside a container element with
overflow: hidden;set
This allows only the part of each slice that is inside the circle to be visible on the page.
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, percentage values (without % sign) and colors of up to 30 pie chart slices may be specified.
{{Pie chart
| style =
| float =
| caption =
| other =
| label1 = | value1 = | color1 =
| label2 = | value2 = | color2 =
(...)
| label29 = | value29 = | color29 =
| label30 = | value30 = | color30 =
| other label =
}}
where
-
style: is [optional] CSS style for the whole box containing the pie chart and its legend (defaults to:
-
float: {{{float|{{{thumb|right}}}}}}; margin: {{#switch: {{{float|{{{thumb|right}}}}}} | left = 0.5em 1em 0.5em 1em | center = 0.5em auto 0.5em auto | right = 0.5em 1em 0.5em 1em }};);
-
-
floatorthumb:left,center,rightornone(specifies which side of the page the pie chart is floated to, default:right); -
caption: is a string of text that appears below the pie chart and just above the legend; -
other: ifyes, will cause an “Other” item (for remaining pie chart slice) to appear in the legend; -
label1..label30: up to 30 legend labels shown to the right of the legend boxes (omitting a legend label will cause a legend entry to not be shown for that slice); -
other label: label for remaining pie chart slice (default:Other); -
value1..value30: up to 30 percentage values (without the % sign) for up to 30 (excluding the [optional] "other" slice) pie chart slices (do NOT include the percent sign) (also note that it is shown in the legend as written, just after the label, without any rounding or other reformatting); -
color1..color30: up to 30 colors (excluding the [optional] “other” slice, shown in white) for the pie chart slices (and corresponding legend boxes) (see CSS color code or name). If omitted, it will default to:
|
|
|
Limitations
- The template does not render correctly on mobile devices. See this page on the Wikipedia mobile site and a Wikipedia user’s report of this issue.
- Minor issues with printing exist. We also need to implement a good fallback for Books.
- The values need to be percentages.
- 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.
- Inherently, it is not possible to save a copy of the chart using the browser’s “Save Image” function.
Examples
|
One (42%) Two (32%) Three (12%) Four (3%) Five (2%) Six (1%) Other (8%)
{{Pie chart
| other = yes
| value1 = 42
| label1 = One
| value2 = 32
| label2 = Two
| value3 = 12
| label3 = Three
| value4 = 3
| label4 = Four
| value5 = 2
| label5 = Five
| value6 = 1
| label6 = Six
}}
|
|
Religion in the Czech Republic as of 2001. Atheists and agnostics (59%) Catholics (26.8%) Protestants (2.5%) Other (11.7%)
{{Pie chart
| float = left
| caption = Religion in the Czech Republic as of 2001.
| other = yes
| label1 = Atheists and agnostics
| value1 = 59
| color1 = silver
| label2 = Catholics
| value2 = 26.8
| color2 = #008
| label3 = Protestants
| value3 = 2.5
| color3 = #08f
}}
|
Centered pie chart
{{Pie chart
| float = center
| caption = Percentages.
| other = yes
| label1 = 1%
| value1 = 1
| label2 = 2%
| value2 = 2
| label3 = 3%
| value3 = 3
| label4 = 4%
| value4 = 4
| label5 = 5%
| value5 = 5
| label6 = 6%
| value6 = 6
| label7 = 7%
| value7 = 7
| label8 = 8%
| value8 = 8
| label9 = 9%
| value9 = 9
| label10 = 10%
| value10 = 10
| label11 = 11%
| value11 = 11
| label12 = 12%
| value12 = 12
}}
Percentages.
See also
- {{Brick chart}} (poor man’s substitute for pie charts)
