Pie chart
A pie chart is a circular statistical graphic that is divided into slices to show numerical proportions. In a pie chart, the arc length of each slice is proportional to the quantity it represents.
Mermaid can render pie charts.
Code
Copy
Embed
pie title The most popular pets
"Dogs" : 386
"Cats" : 85
"Rats" : 15
Syntax
Drawing a pie chart in Mermaid is very simple.
showData indicates rendering the actual values after the legend text; this is optional.
- It is followed by the title syntax and its string value to set a title for the pie chart; this is optional.
- Next is the data set; the slices of the pie chart are arranged clockwise in the order of the labels.
The label of a section of the pie chart, enclosed in double quotes.
It is followed by a colon : as the separator.
It is followed by a positive numeric value representing the specific value, supporting up to two decimal places.
mermaid.grammar_pie_data_option_title_value
Example
Code
Copy
Embed
---
config:
pie:
textPosition: 0.5
themeVariables:
pieOuterStrokeWidth: "5px"
---
pie showData
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
Configuration
Pie charts support the following configuration parameters:
| Parameter | Description | Default value |
|---|---|---|
| textPosition | The axial position of the pie chart slice labels, from 0.0 at the center to 1.0 at the edge of the circle. | 0.75 |
| donutHole | The donut hole ratio. The valid range is 0 to 0.9. | 0.1 |
| legendPosition | The position of the legend relative to the chart. Valid values are top, bottom, left, right, and center. | top |
| highlightSlice | Highlights a specific slice with a matching label; set it to hover to highlight the hovered slice. | hover |
