| 6dd74de | | | 1 | > **Warning** |
| 6dd74de | | | 2 | > |
| 6dd74de | | | 3 | > ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. |
| 6dd74de | | | 4 | > |
| 6dd74de | | | 5 | > ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/pie.md](../../packages/mermaid/src/docs/syntax/pie.md). |
| 6dd74de | | | 6 | |
| 6dd74de | | | 7 | # Pie chart diagrams |
| 6dd74de | | | 8 | |
| 6dd74de | | | 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 |
| 6dd74de | | | 10 | > -Wikipedia |
| 6dd74de | | | 11 | |
| 6dd74de | | | 12 | Mermaid can render Pie Chart diagrams. |
| 6dd74de | | | 13 | |
| 6dd74de | | | 14 | ```mermaid-example |
| 6dd74de | | | 15 | pie title Pets adopted by volunteers |
| 6dd74de | | | 16 | "Dogs" : 386 |
| 6dd74de | | | 17 | "Cats" : 85 |
| 6dd74de | | | 18 | "Rats" : 15 |
| 6dd74de | | | 19 | ``` |
| 6dd74de | | | 20 | |
| 6dd74de | | | 21 | ```mermaid |
| 6dd74de | | | 22 | pie title Pets adopted by volunteers |
| 6dd74de | | | 23 | "Dogs" : 386 |
| 6dd74de | | | 24 | "Cats" : 85 |
| 6dd74de | | | 25 | "Rats" : 15 |
| 6dd74de | | | 26 | ``` |
| 6dd74de | | | 27 | |
| 6dd74de | | | 28 | ## Syntax |
| 6dd74de | | | 29 | |
| 6dd74de | | | 30 | Drawing a pie chart is really simple in mermaid. |
| 6dd74de | | | 31 | |
| 6dd74de | | | 32 | - Start with `pie` keyword to begin the diagram |
| 6dd74de | | | 33 | - `showData` to render the actual data values after the legend text. This is **_OPTIONAL_** |
| 6dd74de | | | 34 | - Followed by `title` keyword and its value in string to give a title to the pie-chart. This is **_OPTIONAL_** |
| 6dd74de | | | 35 | - Followed by dataSet. Pie slices will be ordered clockwise in the same order as the labels. |
| 6dd74de | | | 36 | - `label` for a section in the pie diagram within `" "` quotes. |
| 6dd74de | | | 37 | - Followed by `:` colon as separator |
| 6dd74de | | | 38 | - Followed by `positive numeric value` (supported up to two decimal places) |
| 6dd74de | | | 39 | |
| 6dd74de | | | 40 | **Note:** |
| 6dd74de | | | 41 | |
| 6dd74de | | | 42 | > Pie chart values must be **positive numbers greater than zero**. |
| 6dd74de | | | 43 | > **Negative values are not allowed** and will result in an error. |
| 6dd74de | | | 44 | |
| 6dd74de | | | 45 | \[pie] \[showData] (OPTIONAL) |
| 6dd74de | | | 46 | \[title] \[titlevalue] (OPTIONAL) |
| 6dd74de | | | 47 | "\[datakey1]" : \[dataValue1] |
| 6dd74de | | | 48 | "\[datakey2]" : \[dataValue2] |
| 6dd74de | | | 49 | "\[datakey3]" : \[dataValue3] |
| 6dd74de | | | 50 | . |
| 6dd74de | | | 51 | . |
| 6dd74de | | | 52 | |
| 6dd74de | | | 53 | ## Example |
| 6dd74de | | | 54 | |
| 6dd74de | | | 55 | ```mermaid-example |
| 6dd74de | | | 56 | --- |
| 6dd74de | | | 57 | config: |
| 6dd74de | | | 58 | pie: |
| 6dd74de | | | 59 | textPosition: 0.5 |
| 6dd74de | | | 60 | themeVariables: |
| 6dd74de | | | 61 | pieOuterStrokeWidth: "5px" |
| 6dd74de | | | 62 | --- |
| 6dd74de | | | 63 | pie showData |
| 6dd74de | | | 64 | title Key elements in Product X |
| 6dd74de | | | 65 | "Calcium" : 42.96 |
| 6dd74de | | | 66 | "Potassium" : 50.05 |
| 6dd74de | | | 67 | "Magnesium" : 10.01 |
| 6dd74de | | | 68 | "Iron" : 5 |
| 6dd74de | | | 69 | ``` |
| 6dd74de | | | 70 | |
| 6dd74de | | | 71 | ```mermaid |
| 6dd74de | | | 72 | --- |
| 6dd74de | | | 73 | config: |
| 6dd74de | | | 74 | pie: |
| 6dd74de | | | 75 | textPosition: 0.5 |
| 6dd74de | | | 76 | themeVariables: |
| 6dd74de | | | 77 | pieOuterStrokeWidth: "5px" |
| 6dd74de | | | 78 | --- |
| 6dd74de | | | 79 | pie showData |
| 6dd74de | | | 80 | title Key elements in Product X |
| 6dd74de | | | 81 | "Calcium" : 42.96 |
| 6dd74de | | | 82 | "Potassium" : 50.05 |
| 6dd74de | | | 83 | "Magnesium" : 10.01 |
| 6dd74de | | | 84 | "Iron" : 5 |
| 6dd74de | | | 85 | ``` |
| 6dd74de | | | 86 | |
| 6dd74de | | | 87 | ## Configuration |
| 6dd74de | | | 88 | |
| 6dd74de | | | 89 | Possible pie diagram configuration parameters: |
| 6dd74de | | | 90 | |
| 6dd74de | | | 91 | | Parameter | Description | Default value | |
| 6dd74de | | | 92 | | -------------- | ------------------------------------------------------------------------------------------------------------ | ------------- | |
| 6dd74de | | | 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` | |