← Back to index

pie

Example 1

SebastianJS (SVG)
../assets/pie-1.svg
Mermaid (code)
pie title Default text position: Animal adoption
accTitle: simple pie char demo
accDescr: pie chart with 3 sections: dogs, cats, rats. Most are dogs.
"Dogs": 386
"Cats": 85
"Rats": 15

Example 2

SebastianJS (SVG)
../assets/pie-2.svg
Mermaid (code)
%%{init: {"pie": {"textPosition": 0.9}, "themeVariables": {"pieOuterStrokeWidth": "5px"}}}%%
pie
  title Offset labels close to border: Product X
  accTitle: Key elements in Product X
  accDescr: This is a pie chart showing the key elements in Product X.
  "Calcium": 42.96
  "Potassium": 50.05
  "Magnesium": 10.01
  "Iron": 5

Example 3

SebastianJS (SVG)
../assets/pie-3.svg
Mermaid (code)
%%{init: {"pie": {"textPosition": 0.45}, "themeVariables": {"pieOuterStrokeWidth": "5px"}}}%%
pie
  title Centralized labels: Languages
  accTitle: Key elements in Product X
  accDescr: This is a pie chart showing the key elements in Product X.
  "JavaScript": 30
  "Python": 25
  "Java": 20
  "C#": 15
  "Others": 10