mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-19 07:19:41 +02:00
803e2e14be
* upstream/develop: (68 commits) fix: sanitize addHtmlLabel in createLabel docs(integrations): update Tiki to Tiki Wiki CMS Groupware community in list cms/ecm to avoid confusion updated lock file #6856 Exposing elk configuration forceNodeModelOrder and considerModelOrder to the mermaid configuration chore: Modify changeset Update .changeset/strong-laws-confess.md fix: fallback to raw text instead of rendering empty boxes when `htmlLabels: false` chore: Modify changeset [autofix.ci] apply automated fixes test: Add E2E test for unsupported markdown Create strong-laws-confess.md fix: Remove data loss when unsupported markdown is encountered Apply suggestion from @sidharthv96 Add changeset and integration test chore: update E2E timings Make elk not force model order, but strongly consider it instead chore(deps): update peter-evans/create-pull-request digest to 1310d7d added changeset Fix border style for hand drawn shapes test: Verify label is sanitized ...
65 lines
2.3 KiB
Markdown
65 lines
2.3 KiB
Markdown
# 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
|
|
```
|
|
|
|
## 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)
|
|
|
|
**Note:**
|
|
|
|
> Pie chart values must be **positive numbers greater than zero**.
|
|
> **Negative values are not allowed** and will result in an error.
|
|
|
|
[pie] [showData] (OPTIONAL)
|
|
[title] [titlevalue] (OPTIONAL)
|
|
"[datakey1]" : [dataValue1]
|
|
"[datakey2]" : [dataValue2]
|
|
"[datakey3]" : [dataValue3]
|
|
.
|
|
.
|
|
|
|
## Example
|
|
|
|
```mermaid-example
|
|
---
|
|
config:
|
|
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` |
|