HomeDiagramsPie chartPie: Highlight Slice

Pie: Highlight Slice

`%%{init: {"pie": {"highlightSlice": "Cats"}}}%%` draws the named slice 5% larger and fully opaque, as Mermaid does; `hover` only applies under a pointer, so a static image ignores it. The ASCII bar chart has no emphasis, so it is unchanged.

pie-highlight-slice.mmd
%%{init: {"pie": {"highlightSlice": "Cats"}}}%%
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

More Pie chart examples

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