Articles on: Writing & Editing Tools

Add Pie Chart in Markdown Using Mermaid

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:

Parameter	Type	Possible Values	Example
renderAs	string	mermaid	renderAs=mermaid
height	number	200	height=200
width	number	200	width=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.

Updated on: 21/09/2022

Was this article helpful?

Thank you!