From e8d649b152712efd371c7d9a51eef2b7ea092ba8 Mon Sep 17 00:00:00 2001 From: Ashish Jain Date: Wed, 30 Oct 2019 18:32:07 +0100 Subject: [PATCH] Updated documentation for Pie Chart --- docs/pie.md | 24 +++++++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/docs/pie.md b/docs/pie.md index 821c955da..57d2a7b85 100644 --- a/docs/pie.md +++ b/docs/pie.md @@ -1,11 +1,12 @@ # 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 +-Wikipedia Mermaid can render Pie Chart diagrams. ``` -pie +pie title Pets adopted by volunteers "Dogs" : 386 "Cats" : 85 "Rats" : 15 @@ -19,17 +20,34 @@ pie title Pets adopted by volunteers ## 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 - "DataKey1" : Positive numeric value (upto two decimal places) + title Key elements in Product X "Calcium" : 42.96 "Potassium" : 50.05 "Magnesium" : 10.01 "Iron" : 5 ``` ```mermaid -pie title Key elements in Product X +pie +title Key elements in Product X "Calcium" : 42.96 "Potassium" : 50.05 "Magnesium" : 25.01