Pie Chart Diagrams

What are Pie Charts?

Mermaid's pie charts visualize proportional data by dividing a circle into slices, where each slice represents a percentage of the whole. For data teams, they're useful for showing distributions, composition breakdowns, and relative proportions in your data.

Creating Your First Pie Chart

1. From the Code IDE, Click Apps and Agents from the lefthand panel

2. Select Mermaid. Paradime will automatically start a new mermaid project

3. In the terminal that appears, use the arrow keys to select "Pie Charts"

4. A new pie.mmd file will be created in your editor with this starter template:

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

1. Click the eye icon (👁️) in the top right corner of your Mermaid file to preview the diagram

2. Edit and update your .mmd file as needed - the preview will update automatically

Diagram Syntax Guide

Basic Structure

pie
    title Chart Title
    "Label 1" : 50
    "Label 2" : 30
    "Label 3" : 20

Optional Features

• Add showData after pie to display values

• Title is optional

• Values support up to 2 decimal places

Data Team Examples

Data Quality Metrics

pie title Data Quality Overview
    "Clean Records" : 85.5
    "Missing Values" : 10.25
    "Anomalies" : 4.25

Resource Allocation

pie showData title CPU Usage by Process
    "ETL Jobs" : 45.5
    "Queries" : 30.2
    "Analytics" : 15.8
    "Other" : 8.5

Configuration Options

Label Position

%%{init: {"pie": {"textPosition": 0.5}} }%%
pie
    "A" : 50
    "B" : 50

• textPosition: 0.0 (center) to 1.0 (edge)

• Default: 0.75

Visual Customization

%%{init: {"themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
pie
    "Group A" : 50
    "Group B" : 50

Best Practices

1. Limit to 6-8 slices for readability

2. Order slices by size (largest first)

3. Use clear, concise labels

4. Consider using showData for precise values

5. Use meaningful titles

---

Additional Resources

For more syntax options and configuration parameters, visit the official Mermaid documentation