> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.jotterpad.app/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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](https://mermaid-js.github.io/mermaid/#/gantt) 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](/en/article/format-text-with-markdown-gexkc6/#3-pre-formatted-code). To declare Mermaid in the code block to be rendered globally, use `codeBlockRenderAs: mermaid` in the Markdown file's [YAML](/en/article/customize-template-in-markdown-19ir6fu/).

![](https://storage.crisp.chat/users/helpdesk/website/a720bae09aee9000/mermaid-pie-chart-syntax-in-ma_1xxjj63.png)

To declare Mermaid to render on individual code block, 
1. Type 3 backticks (```) at the start of the code followed by space or return key.
2. Press the `</>` button at the top right corner.
3. Choose `Mermaid`.
4. 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](https://mermaid-js.github.io/mermaid/#/pie)


# Examples

![](https://storage.crisp.chat/users/helpdesk/website/a720bae09aee9000/mermaid-pie-chart-markdown_1qynlh.png)

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

1. [Pie Chart Infographics Slides](https://jotterpad.app/app/templates/pie-chart-slides-md)

For a more detailed guide on Mermaid Pie chart, please refer to the Mermaid official page [here](https://mermaid-js.github.io/mermaid/#/pie).