Template:Pie chart/sandbox

villages: 45.0%
cities: 55.0%

Sandbox only links

cases: Template:Pie chart/testcases
mod: Module:Piechart/sandbox
css: Template:Pie chart/sandbox/styles.css
upgrade notes: User:Nux/pie chart - todo

This is the template sandbox page for Template:Pie chart (diff).
See also the companion subpage for test cases.

Template documentation[view] [edit] [history] [purge]

This template is used on approximately 7,600 pages and changes may be widely noticed. Test changes in the template's /sandbox or /testcases subpages, or in your own user subpage. Consider discussing changes on the talk page before implementing them.

This is a template that draws pie charts with HTML, CSS, and some Lua magic (module).

You can supply values both as a simple array: [{"value":123, "value":456}] and as enumerated values: |value1=123 |value2=456. See below for details.

Usage

The labels, values, and colors of slices may be specified. All the parameters for six 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. When making a pie chart, ensure that the segments are ordered by size (largest to smallest) and in a clockwise direction.

Minimalistic

The smallest possible definition of a graph that makes sense is below.

{{Pie chart| [ {"value":25},  {} ] |thumb=none}}

Labels with formatted value

You can add labels to values as shown below.

town 25.0%
city 75.0%

{{Pie chart
| [ 
 {"value":25, "label": "town $v"},
 {"label": "city $v"},
]
|thumb=none
|legend=true
}}

Note that $v is replaced with a formatted value.

Array of values

You might have noticed that the first parameter is an array. It's a JSON array with some extra flexibility. You can still use enumerated parameters (see below), but an array of values can be better because you can easily rearrange them.

Large to small^{[Usage 1]}

sweets: 5 (45.5%)
sandwiches: 3 (27.3%)
cookies: 2 (18.2%)
drinks: 1 (9.09%)

Small to large^{[Usage 2]}

drinks: 1 (9.09%)
cookies: 2 (18.2%)
sandwiches: 3 (27.3%)
sweets: 5 (45.5%)

{{Pie chart/sandbox
|[
 {"label": "sweets: $v", "value": 5, "color":"darkred"},
 {"label": "sandwiches: $v", "value": 3, "color":"wheat"},
 {"label": "cookies: $v", "value": 2, "color":"goldenrod"},
 {"label": "drinks: $v", "value": 1, "color":"#ccf"},
]
| autoscale = true
| legend = true
| thumb  = none
| radius = 100
| caption= Large to small<ref group="Usage">References should work fine in captions</ref>
| footer = 
}}

{{Pie chart/sandbox
|[
 {"label": "drinks: $v", "value": 1, "color":"#ccf"},
 {"label": "cookies: $v", "value": 2, "color":"goldenrod"},
 {"label": "sandwiches: $v", "value": 3, "color":"wheat"},
 {"label": "sweets: $v", "value": 5, "color":"darkred"},
]
| autoscale = true
| legend = true
| thumb  = none
| radius = 100
| caption= Small to large<ref group="Usage">References should work fine in captions</ref>
| footer = 
}}

Notes:

^ References should work fine in captions
^ References should work fine in captions

Enumerated values

{{Pie chart
| thumb  = 
| radius = 
| caption= 
| footer = 

| label1 = | value1 = | color1 = 
| label2 = | value2 = | color2 = 
| label3 = | value3 = | color3 = 
| label4 = | value4 = | color4 = 
| label5 = | value5 = | color5 = 

| other  = 
| other-color = 
| other-label =
}}

Parameters

Default colors

#1b7837 (7.00%)
#7fbf7b (7.00%)
#d9f0d3 (7.00%)
#762a83 (7.00%)
#af8dc3 (7.00%)
#e7d4e8 (7.00%)
#d73027 (7.00%)
#fc8d59 (7.00%)
#fee090 (7.00%)
#4575b4 (7.00%)
#91bfdb (7.00%)
#e0f3f8 (7.00%)
other: #fff (16.0%)

Common parameters

|thumb= specifies which side of the page the chart is floated to and defaults to right, as with image files. To make the chart appear on the left side of the page, specify |thumb=left.
|radius= specifies the radius of the pie chart in pixels. Do not include a "px" suffix. If omitted, it will default to 100.
|caption= specifies a string of wikitext that appears before the legend.
|footer= specifies a string of wikitext that appears after the legend.
|autoscale=true^{[Parameters 1]} This means that the sum of values will be automatically scaled to 100%. So for values: 5, 15, the slices will be "5 (25%)" and "15 (75%)". Defaults to true if the sum of values is over 100.
|legend=true^{[Parameters 1]} means that a legend will be added. Defaults to true if thumb is used.
|direction= can be used to change the placement of the legend. Possible values are:
- row – the order is a list, chart (default for thumb=none);
- row-reverse – the reverse order, i.e., chart, list;
- column – column arrangement (vertical);
- column-reverse – column arrangement, reversed (chart on top; default for thumb=right/left).
|width= changes the width of the box. In most cases, you probably don't want to use this. Normally, the box will be automatically scaled (for thumb=right, to pie radius; for thumb=none, to full available width).

Notes:

^ ^a ^b Instead of true, you can use yes, on, or 1.

Array of values

|1=[] specifies an array of values. Each value can also have a label and color.
- just value: {"value": 1},
- value and a label: {"label": "drinks", "value": 1},
- label with formatted value placeholder: {"label": "drinks: $v", "value": 1}, or {"label": "drinks – $v", "value": 1},
- full (also custom color): {"label": "drinks: $v", "value": 1, "color":"#ccf"},
To specify other:
- you just add braces to the end of the array of values {} (this will mean the value is to be calculated automatically);
- you can add a label {"label": "other citizens"};
- you can add a custom color {"label": "other citizens", "color": "silver"}.

Enumerated values

|other=, if set equal to any visible string (even "0" or "no"), an "Other" item will appear in the legend, corresponding to the final slice that makes the values add up to 100. (If the total is already over 100, then the "Other" percentage will be negative.)
|other-color= can be used to override the default white color of the "Other" slice.
|other-label= can be used to override the default text from "Other" to any other string.
Each |labelN= is a string of text that appears in the legend entry for a slice. Omitting it will cause a legend to be automatically generated. Use "$v" in label to show formatted values in the legend.
Each |valueN= is the percentage that the slice represents or an actual value. Use |autoscale=true to automatically scale values to percantage of the sum of values. Note that values that sum up to more then 100 will be scaled down automatically.
Each |colorN= is a CSS color code or name. If omitted, the default color palette will be used. Note that default color palette is designed with Accessibility in mind and should work well in print too.

Note that even though you could use as many values and labels as you want, at some point values will to small to be readable. Values less then 1% don't make much sense. You could change the radius, but ultimately you should just use a wikitable instead. Pie chart should typically only have 2-10 values and the "Other" value.

Limitations

Some browsers might have problems with anti-aliasing borders properly, so the lines might be a bit jagged.
Due to how the graphing is implemented, it is not possible to save a copy of the chart using the browser's "Save Image" function (however, a screenshot can be taken).
Currently the default color palette is limited to 12 colors. It will loop around, but you should probably use a wikitable with pie chart beside it instead of using too many values.

More examples

The following code generates the pie chart shown at right. Note that the default chart size and colors are used.

1 (4.76%)
2 (9.52%)
3 (14.3%)
4 (19.0%)
5 (23.8%)
6 (28.6%)

{{Pie chart
|value1 = 1
|value2 = 2
|value3 = 3
|value4 = 4
|value5 = 5
|value6 = 6
|autoscale = true
}}

Here's a more real-world example with custom colors.

Religion in the Czech Republic in 2001.

Atheists and agnostics (59.0%)
Catholics (26.8%)
Protestants (2.50%)
Other (11.7%)

{{Pie chart
| caption= [[Religion in the Czech Republic]] in 2001.
| label1 = [[Atheist]]s and [[agnostic]]s
| value1 = 59
| color1 = darkgreen
| label2 = [[Catholic]]s
| value2 = 26.8
| color2 = brown
| label3 = [[Protestant]]s
| value3 = 2.5
| color3 = #08f
| other  = yes
| other-color = silver
}}

Parameters table

Template to create pie charts (proportionally divided circles). Note that values are approximate and may be automatically scaled to 100%.

Template parameters[Edit template data]
This template prefers block formatting of parameters.
Parameter		Description	Type	Status
Chart items	`1`	Array of chart items, each being a set of properties for a slice: value, label, and color. For most items, only "value" is required (for the last item, even value can be omitted). Colors can be omitted and will be assigned automatically. Instead of this parameter, you can also use "value1", "label1", "color1"... Example {"label": "sweets: $v", "value": 5, "color": "darkred"}	String	required
thumb	`thumb`	Specifies whether the chart is floated to the left or right, similar to an image. Suggested values `right` `left` `none` Default right	Line	optional
legend	`legend`	If set to true, a legend will be added. Defaults to true if the thumb parameter is used. Suggested values `true` `false` Default true	Line	optional
direction	`direction`	Determines the placement of the legend. The chart and legend can be arranged in a column or a row. Suggested values `row` `row-reverse` `column` `column-reverse` Default column-reverse	Line	optional
autoscale	`autoscale`	If set to true, the sum of values will be automatically scaled to 100%. Autoscale is always enabled when the sum of values exceeds 100. Suggested values `true` `false` Default false	Line	optional
caption	`caption`	Specifies the chart's caption, which appears before the legend. Only use this parameter if the legend is enabled. The caption can contain references.	Line	optional
footer	`footer`	Specifies the chart's footer, which appears after the legend. Only use this parameter if the legend is enabled.	Line	optional
radius	`radius`	Specifies the radius of the pie chart in pixels. If omitted, the default is 100.	Number	optional
width	`width`	Specifies the box size in pixels. Remove this parameter to allow the size to adjust automatically (based on labels and graph size).	Number	optional
value1	`value1`	Value for the first item (used instead of the chart items array).	Unknown	optional
label1	`label1`	Label for the first item (used instead of the chart items array).	Unknown	optional
color1	`color1`	Color for the first item/slice (used instead of the chart items array).	Unknown	optional
value2	`value2`	no description	Unknown	optional
label2	`label2`	no description	Unknown	optional
color2	`color2`	no description	Unknown	optional
value3	`value3`	no description	Unknown	optional
label3	`label3`	no description	Unknown	optional
color3	`color3`	no description	Unknown	optional
value4	`value4`	no description	Unknown	optional
label4	`label4`	no description	Unknown	optional
color4	`color4`	no description	Unknown	optional
value5	`value5`	no description	Unknown	optional
label5	`label5`	no description	Unknown	optional
color5	`color5`	no description	Unknown	optional
value6	`value6`	no description	Unknown	optional
label6	`label6`	no description	Unknown	optional
color6	`color6`	no description	Unknown	optional
value7	`value7`	no description	Unknown	optional
label7	`label7`	no description	Unknown	optional
color7	`color7`	no description	Unknown	optional
value8	`value8`	no description	Unknown	optional
label8	`label8`	no description	Unknown	optional
color8	`color8`	no description	Unknown	optional
value9	`value9`	no description	Unknown	optional
label9	`label9`	no description	Unknown	optional
color9	`color9`	no description	Unknown	optional
value10	`value10`	no description	Unknown	optional
label10	`label10`	no description	Unknown	optional
color10	`color10`	no description	Unknown	optional
other-label	`other-label`	no description	Unknown	optional
other-color	`other-color`	no description	Unknown	optional
other	`other`	no description	Unknown	optional

v t e Graph, chart and plot templates
Many types	{{#chart}} ~~{{Graph:Chart}}~~ ~~Module:Chart~~
~~Graph Extension~~	~~{{Graph:Chart}}~~ ~~{{Graph:Lines}}~~ ~~{{Graph:Stacked}}~~ ~~{{Map with marks}}~~
Bar	{{Bar chart}} {{Bar box}} {{Bar stacked}} Module:Bar {{Data bars}}
Line	~~{{Graph:Lines}}~~
Scatter plot	{{Dot chart}}
Pie chart	{{Pie chart}}
Tree	{{Tree chart}} {{Ahnentafel}} {{Clade}}
Stacked	{{Stacked bar}}
Cartogram	~~{{Graph:Map}}~~ ~~{{Global Heat Maps by Year}}~~
Color legends	{{Legend}} {{Legend-line}} {{BrewerColorLegends}}