A Pie chart is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. JotterPad uses Mermaid.js to design and preview Pie chart in Markdown files.

Add Pie chart using Mermaid
Pie chart can be added using Mermaid Pie chart syntax in JotterPad's Markdown code block. To declare Mermaid in the code block to be rendered globally, use codeBlockRenderAs: mermaid in the Markdown file's YAML.



To declare Mermaid to render on individual code block,
Type 3 backticks (```) at the start of the code followed by space or return key.
Press the </> button at the top right corner.
Choose Mermaid.
Add renderAs=mermaid in metadata.

Supported Metadata:
ParameterTypePossible ValuesExample
renderAsstringmermaidrenderAs=mermaid
heightnumber200height=200
widthnumber200width=200

Use , to add multiple parameters. E.g. renderAs=mermaid, height=200.

Example:

pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15


Mermaid Pie Chart Syntax

Please refer to the Mermaid official documentation here:
Pie Chart Syntax

Examples



Here are some examples of JotterPad Markdown templates using Mermaid Pie chart:

Pie Chart Infographics Slides

For a more detailed guide on Mermaid Pie chart, please refer to the Mermaid official page here.
Was this article helpful?
Cancel
Thank you!