marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-12-09 22:14:10 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'neo-new-shapes' of https://github.com/Mermaid-Chart/alana-mermaid into sidv/configReturn

Browse Source 
* 'neo-new-shapes' of https://github.com/Mermaid-Chart/alana-mermaid: (45 commits)
  updated styles, testcases and fixed html labels for image shape
  MC-1733 Reset layout
  updated ImageSqaure shape
  updated styles
  updated pos changes
  fixed html labels for icon shape
  updated test cases
  Added rounded icon shape
  Updated circle icon
  updated image shape
  Updated labels for shapes
  updated icon square and icon
  MC-1733 Reset layout
  Updated logic for vertex label
  Updated test cases
  Update .changeset/rude-meals-invite.md
  changesets
  added neo-fication and shape-resize for linedCylinder shape
  added neo-fication for curvedTrapezoid shape
  Version Packages
  ...
This commit is contained in:
Sidharth Vinod
2024-09-12 15:19:21 +05:30
parent db6242590e d964893a5d
commit ef428dc555
151 changed files with 2908 additions and 19513 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
docs/syntax/pie.md
View File

@@ -1,76 +0,0 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/pie.md](../../packages/mermaid/src/docs/syntax/pie.md).
# 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.
```mermaid-example
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
```
```mermaid
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
```
## Syntax
Drawing a pie chart is really simple in mermaid.
- Start with `pie` keyword to begin the diagram
- `showData` to render the actual data values after the legend text. This is **_OPTIONAL_**
- Followed by `title` keyword and its value in string to give a title to the pie-chart. This is **_OPTIONAL_**
- Followed by dataSet. Pie slices will be ordered clockwise in the same order as the labels.
- `label` for a section in the pie diagram within `" "` quotes.
- Followed by `:` colon as separator
- Followed by `positive numeric value` (supported up to two decimal places)
\[pie] \[showData] (OPTIONAL)
\[title] \[titlevalue] (OPTIONAL)
"\[datakey1]" : \[dataValue1]
"\[datakey2]" : \[dataValue2]
"\[datakey3]" : \[dataValue3]
.
.
## Example
```mermaid-example
%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
pie showData
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
```
```mermaid
%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
pie showData
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
```
## Configuration
Possible pie diagram configuration parameters:
| Parameter | Description | Default value |
| -------------- | ------------------------------------------------------------------------------------------------------------ | ------------- |
| `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` |