SebastianJS

pie

3 samples from the mermaid demo corpus, rendered both ways.

123

Example 1

match
0.00% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source 
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

match
0.00% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source 
%%{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

match
0.34% width difference
SebastianJSno browser
SebastianJS rendering
mermaid-cliheadless Chrome
mermaid-cli rendering
Mermaid source 
%%{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