Pie Chart

Official Mermaid documentation: Pie Chart.

Note

All Mermaid diagrams can be configured, by passing a MermaidConfig object to any of the methods in the Mermaid class. Read more on Mermaid configuration.

Simple pie chart

The following code sample shows how to create a simple Mermaid pie chart.

Use the PieChart method of the Mermaid class to create a pie chart.

Add data sets with the AddDataSet method.

Generate the diagram mermaid code with the Build method.

var pieChart = Mermaid
    .PieChart()
    .AddDataSet("Label1", 42.7)
    .AddDataSet("Label2", 57.3)
    .Build();

The code above generates the following Mermaid code:

pie
    "Label1": 42.7
    "Label2": 57.3

That renders as:

pie
    "Label1": 42.7
    "Label2": 57.3

⬆ Back to top

Display values on legend

The values can be displayed on the legend by setting the displayValuesOnLegend parameter of the PieChart method to true.

Example:

var pieChart = Mermaid
    .PieChart(displayValuesOnLegend: true)
    .AddDataSet("Label1", 42.7)
    .AddDataSet("Label2", 57.3)
    .Build();

The code above generates the following Mermaid code:

pie showData
    "Label1": 42.7
    "Label2": 57.3

That renders as:

pie showData
    "Label1": 42.7
    "Label2": 57.3

⬆ Back to top

Title

The title of the pie chart can be set by setting the title parameter of the PieChart method.

Example:

var pieChart = Mermaid
    .PieChart(title: "My Pie Chart")
    .AddDataSet("Label1", 42.7)
    .AddDataSet("Label2", 57.3)
    .Build();

The code above generates the following Mermaid code:

---
title: My Pie Chart
---
pie
    "Label1": 42.7
    "Label2": 57.3

That renders as:

---
title: My Pie Chart
---
pie
    "Label1": 42.7
    "Label2": 57.3

⬆ Back to top