HomeDiagramsPie chart

Pie chart

Pie charts show how a whole divides into labelled parts. zombie-mermaid renders SVG wedges with a legend and, in ASCII, a proportional bar chart, with optional raw values via showData.

Source → render

One whole, split into labelled shares.

share.mmd
pie title Pets adopted by volunteers
  "Dogs" : 386
  "Cats" : 85
  "Rats" : 15
Output
Pie chart, Zombie Mermaid 79% 17% 3% Pets adopted by volunteers Dogs Cats Rats
About this notation

Where pie charts come from, and how the syntax works.

Pie charts divide a total into proportional slices and are the simplest data chart Mermaid offers. Mermaid’s syntax starts with `pie`, an optional `showData` flag that prints each raw value in the legend, and an optional `title`, followed by one `"Label" : value` line per slice. Slice sizes are computed as a share of the sum of all values.

Read the full syntax reference in the Mermaid docs →
Every example

Every Pie chart example, on its own page.

Pie chart, Zombie Mermaid 79% 17% 3% Pets adopted by volunteers Dogs Cats Rats
Pie: Basic
Pie chart, Zombie Mermaid 40% 46% 9% 5% Key elements in Product X Calcium [42.96] Potassium [50.05] Magnesium [10.01] Iron [5]
Pie: showData
Pie chart, Zombie Mermaid 13% 8% 12% 7% 11% 6% 10% 6% 9% 5% 5% 3% 4% 2% Commits by weekday and team Mon core Mon docs Tue core Tue docs Wed core Wed docs Thu core Thu docs Fri core Fri docs Sat core Sat docs Sun core Sun docs
Pie: Many Slices
Pie chart, Zombie Mermaid 64% 19% 12% 5% Browser share Chrome [640] Safari [190] Firefox [120] Edge [45] Opera [4] Lynx [1] Netscape [0]
Pie: Tiny Slices
Pie chart, Zombie Mermaid 100% Uptime this week Up
Pie: Single Slice
Pie chart, Zombie Mermaid Coding takes half the day, meetings a quarter. 50% 25% 15% 10% Time spent Coding Meetings Review Email
Pie: Dark Theme
Show 20 more examples
Pie chart, Zombie Mermaid
Pie: Empty
Pie chart, Zombie Mermaid Nothing to show yet
Pie: Empty With Title
Pie chart, Zombie Mermaid Nothing counted Apples [0] Pears [0] Plums [0]
Pie: All Zero
Pie chart, Zombie Mermaid 7% 7% 6% 6% 6% 6% 5% 5% 5% 5% 5% 4% 4% 4% 4% 3% 3% 3% 3% 2% 2% 2% 2% 2% Tickets by component Component 01 Component 02 Component 03 Component 04 Component 05 Component 06 Component 07 Component 08 Component 09 Component 10 Component 11 Component 12 Component 13 Component 14 Component 15 Component 16 Component 17 Component 18 Component 19 Component 20 Component 21 Component 22 Component 23 Component 24
Pie: Tall Legend
Pie chart, Zombie Mermaid 40% 30% 20% 10% 宠物 ペット 반려동물 狗 Dogs 猫 Cats さかな Fish ＢＩＲＤ
Pie: Wide Characters
Pie chart, Zombie Mermaid 55% 30% 15% Where the quarterly infrastructure budget actually went this year Cloud compute for the continuous integration and nightly regression fleet Storage A label that is long but not the longest one in this chart
Pie: Long Labels
Pie chart, Zombie Mermaid 71% 29% Revenue by region North [2500000.75] South [1000000] East [42.1] West [0.5]
Pie: showData Decimals
Pie chart, Zombie Mermaid 50% 50% Coin flips Heads Tails
Pie: Two Even Slices
Pie chart, Zombie Mermaid Most people answered yes. A few said no. 70% 30% Yes No
Pie: Accessibility Only
Pie chart, Zombie Mermaid 30% 25% 20% 15% 10% Labels <&> "quotes" R&D Single quoted <script> Say "hi" It's
Pie: Label Edge Cases
Pie chart, Zombie Mermaid 98% 1% Percentage boundaries Most [98] Exactly 1% [1] Just under 1% [0.99] One hundredth [0.01] Negative zero [0]
Pie: Percentage Boundaries
Pie chart, Zombie Mermaid 67% 15% 3% 10% 5% Pets adopted by volunteers Dogs Cats Rats Birds Fish
Pie: Custom Accent
Pie chart, Zombie Mermaid 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% 2% Sixty equal slices S01 S02 S03 S04 S05 S06 S07 S08 S09 S10 S11 S12 S13 S14 S15 S16 S17 S18 S19 S20 S21 S22 S23 S24 S25 S26 S27 S28 S29 S30 S31 S32 S33 S34 S35 S36 S37 S38 S39 S40 S41 S42 S43 S44 S45 S46 S47 S48 S49 S50 S51 S52 S53 S54 S55 S56 S57 S58 S59 S60
Pie: More Slices Than Bar Cells
Pie chart, Zombie Mermaid 79% 17% 3% Pets adopted by volunteers Dogs Cats Rats
Pie: Donut Hole
Pie chart, Zombie Mermaid 79% 17% 3% Pets adopted by volunteers Dogs Cats Rats
Pie: Text Position
Pie chart, Zombie Mermaid 79% 17% 3% Pets adopted by volunteers Dogs Cats Rats
Pie: Legend Left
Pie chart, Zombie Mermaid 79% 17% 3% Pets adopted by volunteers Dogs Cats Rats
Pie: Legend Top
Pie chart, Zombie Mermaid 79% 17% 3% Pets adopted by volunteers Dogs Cats Rats
Pie: Legend Bottom
Pie chart, Zombie Mermaid 79% 17% 3% Pets adopted by volunteers Dogs Cats Rats
Pie: Legend Center
Pie chart, Zombie Mermaid 79% 17% 3% Pets adopted by volunteers Dogs Cats Rats
Pie: Highlight Slice