Mermaid Pie Charts

Mermaid Pie Charts (pie) provide a quick, text-based way to render circular data visualizations. They automatically calculate percentages and slice proportions based on the raw numerical values you input.

Pie charts show parts of a whole.

The values supplied to Mermaid determine the relative slice sizes.

Basic Syntax

Pie
  title chart name
  "Slice Label" : NumericalValue

A pie chart block initializes with the pie keyword, followed by optional configuration choices.

Title: Use the title keyword followed by the chart name.
Data Slices: Data rows are written as "Slice Label" : NumericalValue.
Quotes: Labels must be wrapped inside "double quotes".

Example

pie
    title Quarterly Revenue
    "Product A" : 55
    "Product B" : 25
    "Product C" : 20

Try this code ❯

pie
    title Favorite Fruits
    "Apples" : 40
    "Bananas" : 30
    "Oranges" : 20
    "Grapes" : 10

Try this code ❯

Example

pie
    title Programming Languages
    "JavaScript" : 40
    "Python" : 30
    "HTML/CSS" : 20
    "Other" : 10

Try this code ❯

Standard Configuration Options

You can change the visual styling (like adding a dataset legend or displaying percentages directly on the slices) by passing a config header block at the absolute top of your file:
showData: Setting this to true displays the raw numeric value alongside the label in the legend.

Example

pie showData
    title Monthly Expenses
    "Rent" : 500
    "Food" : 250
    "Transport" : 100
    "Other" : 150

Try this code ❯

Rendering Behavior & Best Practices

The source notes that pie values should be positive.

Auto-Scaling: You don't need to manually compute percentages or ensure the values add up to exactly 100. Mermaid aggregates the total sum internally and scales each slice proportionally.
Sorting order: Slices are rendered in clockwise order, starting from the top (12 o'clock position), following the exact sequence they are typed in the code block.
No Code Interleaving: Unlike flowcharts, you cannot apply individual colors or custom click events directly to slices using syntax properties. Theme variations must be applied universally through the top config block.