Loading
  • 21 Aug, 2019

  • By, Wikipedia

Template:Pie Chart


This is a template that draws pie charts using a single image, a lot of (inline) CSS code generated by parser functions, and absolutely no JavaScript. Some details of how it works are given below.

Usage

The labels, values, and colors of up to 30 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.

{{Pie chart
| thumb  = 
| radius = 
| caption= 
| footer = 
| label1 = 
| value1 = 
| color1 = 
| label2 = 
| value2 = 
| color2 = 
| label3 = 
| value3 = 
| color3 = 
| label4 = 
| value4 = 
| color4 = 
| label5 = 
| value5 = 
| color5 = 
| label6 = 
| value6 = 
| color6 = 
| other  = 
| other-color = 
| other-label =
}}

Parameters

Default colors

  #1F78B4 (7%)
  #33A02C (7%)
  #E31A1C (7%)
  #FF7F00 (7%)
  #6A3D9A (7%)
  #B15928 (7%)
  #A6CEE3 (7%)
  #B2DF8A (7%)
  #FB9A99 (7%)
  #FDBF6F (7%)
  #CAB2D6 (7%)
  #FFFF99 (7%)
  #FEEBE2 (7%)
  #A9A9A9 (7%)
  Other (2%)
  • |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 text that appears on a line just before the legend.
  • |footer= specifies a string of text that appears below the legend.
  • |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 entry to not be shown for that slice.
  • Each |valueN= is the percentage that the slice represents. Do not include the percent sign (e.g., for eighty percent, use the value "80", not "80%" or ".80"). Collectively, the values must add to 100 or less (in the latter case, a final slice completes the pie, whether |other= is specified or not). Also note that each value is shown in the legend exactly as written, without any rounding or other reformatting.
  • Each |colorN= is a CSS color code or name. If omitted, the default color palette seen in the pie chart to the right is used. If you need to graph more than 14 values (not counting the "Other" slice), then you should specify |color15= onwards in the template call.

Limitations

  • Google Chrome and Safari do not appear to anti-alias borders, so the lines are a bit jagged. (For Chrome, this issue seems to be resolved, as of version 26.)
  • 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).
  • If |other= is set, the final slice is always labeled as "Other" in the legend. This is not configurable. If you don't like that, just add to the template call another slice with the appropriate value (to sum to 100) and the desired label, and don't use |other=.
  • No labels can be put on the slices themselves.
  • The maximum number of slices that can be displayed is 30.
  • Currently the default colors used for slices 15 onwards are all the same as the default color of slice 14.
  • If the specified values add to 100 and |other= is set, the calculated percentage for that slice can sometimes turn out to be very strange (e.g., "1.4210854715202E-14%" instead of "0%")

Examples

The following code generates the pie chart shown at right. Note that the default chart size and colors are used, and the value of "1" for the "other" parameter is only used for its "truth value" as a visible string—i.e., to say, yes, we want an "Other" entry in the legend (the same chart would result if "0" were used).

  One (42%)
  Two (32%)
  Three (12%)
  Four (3%)
  Five (2%)
  Six (1%)
  Other (8%)
{{Pie chart
|value1 = 42
|label1 = One
|value2 = 32
|label2 = Two
|value3 = 12
|label3 = Three
|value4 = 3
|label4 = Four
|value5 = 2
|label5 = Five
|value6 = 1
|label6 = Six
|other = 1
}}

Here's a more real-world example.

Religion in the Czech Republic in 2001.

  Atheists and agnostics (59%)
  Catholics (26.8%)
  Protestants (2.5%)
  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
}}

How it works

This template 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. These pie slices are positioned:

  • Inside a square element of (2 * radius)x(2 * radius) pixels
  • with border-radius: radiuspx for a circular shape
  • with a white (or other specified color) background visible in the empty space that occurs if the "other" slice is present
  • and 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.

Template data

This is the TemplateData for this template used by TemplateWizard, VisualEditor and other tools. See a monthly parameter usage report for Template:Pie chart in articles based on its TemplateData.

TemplateData for Pie chart

Data used by citation tools

No description.

Template parameters[Edit template data]

ParameterDescriptionTypeStatus
thumbthumb

no description

Unknownoptional
stylestyle

no description

Unknownoptional
radiusradius

no description

Unknownoptional
other-colorother-color

no description

Unknownoptional
value30value30

no description

Unknownoptional
color30color30

no description

Unknownoptional
value1value1

no description

Unknownoptional
value2value2

no description

Unknownoptional
value3value3

no description

Unknownoptional
value4value4

no description

Unknownoptional
value5value5

no description

Unknownoptional
value6value6

no description

Unknownoptional
value7value7

no description

Unknownoptional
value8value8

no description

Unknownoptional
value9value9

no description

Unknownoptional
value10value10

no description

Unknownoptional
value11value11

no description

Unknownoptional
value12value12

no description

Unknownoptional
value13value13

no description

Unknownoptional
value14value14

no description

Unknownoptional
value15value15

no description

Unknownoptional
value16value16

no description

Unknownoptional
value17value17

no description

Unknownoptional
value18value18

no description

Unknownoptional
value19value19

no description

Unknownoptional
value20value20

no description

Unknownoptional
value21value21

no description

Unknownoptional
value22value22

no description

Unknownoptional
value23value23

no description

Unknownoptional
value24value24

no description

Unknownoptional
value25value25

no description

Unknownoptional
value26value26

no description

Unknownoptional
value27value27

no description

Unknownoptional
value28value28

no description

Unknownoptional
value29value29

no description

Unknownoptional
color29color29

no description

Unknownoptional
color28color28

no description

Unknownoptional
color27color27

no description

Unknownoptional
color26color26

no description

Unknownoptional
color25color25

no description

Unknownoptional
color24color24

no description

Unknownoptional
color23color23

no description

Unknownoptional
color22color22

no description

Unknownoptional
color21color21

no description

Unknownoptional
color20color20

no description

Unknownoptional
color19color19

no description

Unknownoptional
color18color18

no description

Unknownoptional
color17color17

no description

Unknownoptional
color16color16

no description

Unknownoptional
color15color15

no description

Unknownoptional
color14color14

no description

Unknownoptional
color13color13

no description

Unknownoptional
color12color12

no description

Unknownoptional
color11color11

no description

Unknownoptional
color10color10

no description

Unknownoptional
color9color9

no description

Unknownoptional
color8color8

no description

Unknownoptional
color7color7

no description

Unknownoptional
color6color6

no description

Unknownoptional
color5color5

no description

Unknownoptional
color4color4

no description

Unknownoptional
color3color3

no description

Unknownoptional
color2color2

no description

Unknownoptional
color1color1

no description

Unknownoptional
captioncaption

no description

Unknownoptional
label1label1

no description

Unknownoptional
label2label2

no description

Unknownoptional
label3label3

no description

Unknownoptional
label4label4

no description

Unknownoptional
label5label5

no description

Unknownoptional
label6label6

no description

Unknownoptional
label7label7

no description

Unknownoptional
label8label8

no description

Unknownoptional
label9label9

no description

Unknownoptional
label10label10

no description

Unknownoptional
label11label11

no description

Unknownoptional
label12label12

no description

Unknownoptional
label13label13

no description

Unknownoptional
label14label14

no description

Unknownoptional
label15label15

no description

Unknownoptional
label16label16

no description

Unknownoptional
label17label17

no description

Unknownoptional
label18label18

no description

Unknownoptional
label19label19

no description

Unknownoptional
label20label20

no description

Unknownoptional
label21label21

no description

Unknownoptional
label22label22

no description

Unknownoptional
label23label23

no description

Unknownoptional
label24label24

no description

Unknownoptional
label25label25

no description

Unknownoptional
label26label26

no description

Unknownoptional
label27label27

no description

Unknownoptional
label28label28

no description

Unknownoptional
label29label29

no description

Unknownoptional
label30label30

no description

Unknownoptional
otherother

no description

Unknownoptional
other-labelother-label

no description

Unknownoptional
footerfooter

no description

Unknownoptional

See also