marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-19 07:19:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

Updated documentation for Pie Chart

Browse Source
This commit is contained in:
Ashish Jain
2019-10-30 18:32:07 +01:00
parent e96bd14d21
commit e8d649b152
1 changed files with 21 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
docs/pie.md
View File

@@ -1,11 +1,12 @@
# Pie chart diagrams # 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 > 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
-Wikipedia
Mermaid can render Pie Chart diagrams. Mermaid can render Pie Chart diagrams.
``` ```
pie pie title Pets adopted by volunteers
"Dogs" : 386 "Dogs" : 386
"Cats" : 85 "Cats" : 85
"Rats" : 15 "Rats" : 15
@@ -19,17 +20,34 @@ pie title Pets adopted by volunteers
## Syntax ## Syntax
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]
.
.
## Example
``` ```
pie pie
"DataKey1" : Positive numeric value (upto two decimal places) title Key elements in Product X
"Calcium" : 42.96 "Calcium" : 42.96
"Potassium" : 50.05 "Potassium" : 50.05
"Magnesium" : 10.01 "Magnesium" : 10.01
"Iron" : 5 "Iron" : 5
``` ```
```mermaid ```mermaid
pie title Key elements in Product X pie
title Key elements in Product X
"Calcium" : 42.96 "Calcium" : 42.96
"Potassium" : 50.05 "Potassium" : 50.05
"Magnesium" : 25.01 "Magnesium" : 25.01