2.8 KB94 lines
Blame
1> **Warning**
2>
3> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
4>
5> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/pie.md](../../packages/mermaid/src/docs/syntax/pie.md).
6
7# Pie chart diagrams
8
9> A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area), is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented. The earliest known pie chart is generally credited to William Playfair's Statistical Breviary of 1801
10> -Wikipedia
11
12Mermaid can render Pie Chart diagrams.
13
14```mermaid-example
15pie title Pets adopted by volunteers
16 "Dogs" : 386
17 "Cats" : 85
18 "Rats" : 15
19```
20
21```mermaid
22pie title Pets adopted by volunteers
23 "Dogs" : 386
24 "Cats" : 85
25 "Rats" : 15
26```
27
28## Syntax
29
30Drawing a pie chart is really simple in mermaid.
31
32- Start with `pie` keyword to begin the diagram
33 - `showData` to render the actual data values after the legend text. This is **_OPTIONAL_**
34- Followed by `title` keyword and its value in string to give a title to the pie-chart. This is **_OPTIONAL_**
35- Followed by dataSet. Pie slices will be ordered clockwise in the same order as the labels.
36 - `label` for a section in the pie diagram within `" "` quotes.
37 - Followed by `:` colon as separator
38 - Followed by `positive numeric value` (supported up to two decimal places)
39
40**Note:**
41
42> Pie chart values must be **positive numbers greater than zero**.
43> **Negative values are not allowed** and will result in an error.
44
45\[pie] \[showData] (OPTIONAL)
46\[title] \[titlevalue] (OPTIONAL)
47"\[datakey1]" : \[dataValue1]
48"\[datakey2]" : \[dataValue2]
49"\[datakey3]" : \[dataValue3]
50.
51.
52
53## Example
54
55```mermaid-example
56---
57config:
58 pie:
59 textPosition: 0.5
60 themeVariables:
61 pieOuterStrokeWidth: "5px"
62---
63pie showData
64 title Key elements in Product X
65 "Calcium" : 42.96
66 "Potassium" : 50.05
67 "Magnesium" : 10.01
68 "Iron" : 5
69```
70
71```mermaid
72---
73config:
74 pie:
75 textPosition: 0.5
76 themeVariables:
77 pieOuterStrokeWidth: "5px"
78---
79pie showData
80 title Key elements in Product X
81 "Calcium" : 42.96
82 "Potassium" : 50.05
83 "Magnesium" : 10.01
84 "Iron" : 5
85```
86
87## Configuration
88
89Possible pie diagram configuration parameters:
90
91| Parameter | Description | Default value |
92| -------------- | ------------------------------------------------------------------------------------------------------------ | ------------- |
93| `textPosition` | The axial position of the pie slice labels, from 0.0 at the center to 1.0 at the outside edge of the circle. | `0.75` |
94