mermaid/docs/pie.md

56 lines
1.6 KiB
Markdown
Raw Normal View History

2019-09-11 21:20:28 +02:00
# Pie chart diagrams
> 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.
```
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
```
```mermaid
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 35
```
## Syntax
2019-10-30 18:32:07 +01:00
Drawing a pie chart is really simple in mermaid.
- Start with `pie` keyword to begin the diagram
- 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 `:` semi-colon as separator
- Followed by `positive numeric value` (supported upto two decimal places)
[pie]
[title] [titlevalue] (OPTIONAL)
"[datakey1]" : [dataValue1]
"[datakey2]" : [dataValue2]
"[datakey3]" : [dataValue3]
.
.
2019-09-11 21:20:28 +02:00
2019-10-30 18:32:07 +01:00
## Example
2019-09-11 21:20:28 +02:00
```
pie
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
```
```mermaid
2019-10-30 18:32:07 +01:00
pie
title Key elements in Product X
2019-09-11 21:20:28 +02:00
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 25.01
"Iron" : 15
```