mermaid/docs/pie.md

43 lines
1.5 KiB
Markdown
Raw Normal View History

# Pie chart diagrams
2020-07-14 23:25:46 +02:00
2019-09-11 21:20:28 +02:00
> 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
2019-10-30 18:32:07 +01:00
-Wikipedia
2019-09-11 21:20:28 +02:00
Mermaid can render Pie Chart diagrams.
2021-11-02 04:18:18 +01:00
```mermaid-example
2019-10-30 18:32:07 +01:00
pie title Pets adopted by volunteers
2019-09-11 21:20:28 +02:00
"Dogs" : 386
"Cats" : 85
"Rats" : 15
2019-09-11 21:20:28 +02:00
```
## Syntax
Drawing a pie chart is really simple in mermaid.
2019-10-30 18:32:07 +01:00
- Start with `pie` keyword to begin the diagram
- `showData` to render the actual data values after the legend text. This is ***OPTIONAL***
2019-10-30 18:32:07 +01:00
- Followed by `title` keyword and its value in string to give a title to the pie-chart. This is ***OPTIONAL***
- Followed by dataSet
- `label` for a section in the pie diagram within `" "` quotes.
- Followed by `:` colon as separator
- Followed by `positive numeric value` (supported upto two decimal places)
2019-10-30 18:32:07 +01:00
[pie] [showData] (OPTIONAL)
[title] [titlevalue] (OPTIONAL)
"[datakey1]" : [dataValue1]
"[datakey2]" : [dataValue2]
"[datakey3]" : [dataValue3]
.
2019-10-30 18:32:07 +01:00
.
2019-09-11 21:20:28 +02:00
## Example
2021-11-02 04:18:18 +01:00
```mermaid-example
pie showData
2019-10-30 18:32:07 +01:00
title Key elements in Product X
2019-09-11 21:20:28 +02:00
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
```