pie

3 samples from the mermaid demo corpus, rendered both ways. The three SebastianJS forms come off one layout, so the measurements below hold for all of them.

1 2 3

SebastianJS pane shows SVGSVG, text tracedPNG

Example 1

match

0.00% width difference

SebastianJSHTML labels, as mermaid emits themno foreignObject, no stylesheet, no font neededrasterized at 2x by resvg, fonts from the registry

mermaid-cliheadless Chrome

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

SebastianJSHTML labels, as mermaid emits themno foreignObject, no stylesheet, no font neededrasterized at 2x by resvg, fonts from the registry

mermaid-cliheadless Chrome

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

SebastianJSHTML labels, as mermaid emits themno foreignObject, no stylesheet, no font neededrasterized at 2x by resvg, fonts from the registry

mermaid-cliheadless Chrome

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