Template:Piechart/doc

Not to be confused with Template:Pie chart.

Usage

See more examples here: Module:Piechart

With colors

Quick example with custom colors and a legend:

{{Piechart| [
 {"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"}
]
|meta={"autoscale":true, "legend":true}
}}

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

Floating

Use thumb=right for a floating image-like view. You can also add direction option with one of column values to make the box thinner (like you see here).

What do you consume on b-day parties?

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

{{Piechart| [
 {"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"}
]
|meta={
 "autoscale":true,
 "direction":"column-reverse",
 "size":200,
 "width":"min-content",
 "legend":true
}
|thumb=right
|caption=What do you consume on b-day parties?
}}

Parameters

Template to create pie charts (proportionally divided circle). Note that values can be an approximation and can be automatically scaled to 100%.

Template parameters

This template prefers block formatting of parameters.

Parameter		Description	Type	Status
Chart data	1	JSON with items containing value, label, color (only value is required). Colors can be assigned automatically. Example {"label": "sweets: $v", "value": 5, "color":"darkred"}	String	required
Options	meta	Additional metadata. Also in JSON. Possible options: size (chart size in px); autoscale (true to auto-calculate percentages); legend (default is false); direction (flex-like); width (css width of a container). See examples on Module:Piechart. Example {"size":200, "autoscale":true, "legend":true, "direction":"column-reverse"}	String	suggested
thumb	thumb	Float to left or to right ~like an image. Suggested values right left none Default none	Line	optional
thumb-size	thumb-size	Box size in px. Remove to make the size change automatically (based on labels and graph size).	Number	optional
caption	caption	Caption of the chart. Only really makes sense when used with thumb.	Line	optional