marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-18 06:49:47 +02:00
Code Issues Packages Projects Releases Wiki Activity
Files
bd19523f5d849b0604f9fcfb58b2d8daf34b025d
mermaid/packages/mermaid/src/docs/syntax/pie.md
Sidharth Vinod 803e2e14be Merge remote-tracking branch 'upstream/develop' into advisory-fix-1 
* 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
  ...
2025-08-18 16:59:44 +05:30

2.3 KiB
Raw Blame History

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 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

---
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