# Pie Chart

> PieChart demos: basic pie, donut, arc labels, styled slices, half-pie gauge, and an interactive example with clickData and highlightedItem callbacks.

**Site index:** [https://muicharts.2plot.dev/llms.txt](https://muicharts.2plot.dev/llms.txt) — every page on this site, as Markdown.  
**Network index:** [https://2plot.dev/llms.txt](https://2plot.dev/llms.txt) — The 2plot network; start here to discover sibling sites.  
**Sibling sites:** 13 more in The 2plot network — listed in the site index above.  
**Sitemap:** https://muicharts.2plot.dev/sitemap.xml  


---



### Overview

`PieChart` renders pie, donut, and nested/concentric pie charts, wrapping
the MUI X Charts pie chart for Plotly Dash. It is a **Community (free)**
component — no MUI X Pro license required.

Slices come from a flat `data` list (single series) or a `series` list
(nested pies). Interaction flows back to Dash through `clickData` and
`highlightedItem`; `highlightedItem` also works as an input for
synchronized highlighting across charts.

```python
from dash_mui_charts import PieChart

PieChart(
    data=[
        {'id': 'a', 'value': 35, 'label': 'Marketing', 'color': '#1976d2'},
        {'id': 'b', 'value': 25, 'label': 'Engineering'},
    ],
    innerRadius=50,   # >0 creates donut
    outerRadius=100,
    cornerRadius=5,
    paddingAngle=2,
)
```


    MUI X Charts uses `seriesId` (a string such as
    `"auto-generated-id-0"`), not `seriesIndex`, in event payloads like
    `clickData` and `highlightedItem`.

---

### Basic pie chart

A simple pie chart showing budget allocation by department. Hover over
slices to see values, click to interact.



```python
# File: docs/pie/basic_example.py

from dash import html

from dash_mui_charts import PieChart

budget_data = [
    {'id': 0, 'value': 35, 'label': 'Marketing'},
    {'id': 1, 'value': 25, 'label': 'Engineering'},
    {'id': 2, 'value': 20, 'label': 'Sales'},
    {'id': 3, 'value': 15, 'label': 'Support'},
    {'id': 4, 'value': 5, 'label': 'Other'},
]

component = html.Div(
    PieChart(
        id='basic-pie',
        data=budget_data,
        height=300,
    ),
    style={'display': 'flex', 'justifyContent': 'center'},
)
```

    :defaultExpanded: false
    :withExpandedButton: true

---

### Donut chart

Set `innerRadius` to create a donut chart. The hollow center can be used
for additional information or just aesthetic appeal.



```python
# File: docs/pie/donut_example.py

from dash import html

from dash_mui_charts import PieChart

browser_data = [
    {'id': 0, 'value': 63.5, 'label': 'Chrome'},
    {'id': 1, 'value': 19.2, 'label': 'Safari'},
    {'id': 2, 'value': 4.3, 'label': 'Firefox'},
    {'id': 3, 'value': 3.9, 'label': 'Edge'},
    {'id': 4, 'value': 9.1, 'label': 'Other'},
]

component = html.Div(
    PieChart(
        id='donut-pie',
        data=browser_data,
        innerRadius=60,  # Creates the donut hole
        height=300,
    ),
    style={'display': 'flex', 'justifyContent': 'center'},
)
```

    :defaultExpanded: false
    :withExpandedButton: true

---

### Arc labels

Display values directly on the arcs with `arcLabel` (`'value'`, `'label'`
or `'formattedValue'`). Use `arcLabelMinAngle` to hide labels on small
slices that would be too crowded.



```python
# File: docs/pie/labels_example.py

from dash import html

from dash_mui_charts import PieChart

budget_data = [
    {'id': 0, 'value': 35, 'label': 'Marketing'},
    {'id': 1, 'value': 25, 'label': 'Engineering'},
    {'id': 2, 'value': 20, 'label': 'Sales'},
    {'id': 3, 'value': 15, 'label': 'Support'},
    {'id': 4, 'value': 5, 'label': 'Other'},
]

component = html.Div(
    PieChart(
        id='labeled-pie',
        data=budget_data,
        arcLabel='value',      # Options: 'value', 'label', 'formattedValue'
        arcLabelMinAngle=30,   # Hide labels on slices < 30 degrees
        height=300,
    ),
    style={'display': 'flex', 'justifyContent': 'center'},
)
```

    :defaultExpanded: false
    :withExpandedButton: true

---

### Styled pie

Customize the appearance with padding between slices, rounded corners, and
custom color palettes.



```python
# File: docs/pie/styled_example.py

from dash import html

from dash_mui_charts import PieChart

budget_data = [
    {'id': 0, 'value': 35, 'label': 'Marketing'},
    {'id': 1, 'value': 25, 'label': 'Engineering'},
    {'id': 2, 'value': 20, 'label': 'Sales'},
    {'id': 3, 'value': 15, 'label': 'Support'},
    {'id': 4, 'value': 5, 'label': 'Other'},
]

component = html.Div(
    PieChart(
        id='styled-pie',
        data=budget_data,
        paddingAngle=3,     # Gap between slices in degrees
        cornerRadius=8,     # Rounded corners on slices
        colors=['#1976d2', '#dc004e', '#ff9800', '#4caf50', '#9c27b0'],
        height=300,
    ),
    style={'display': 'flex', 'justifyContent': 'center'},
)
```

    :defaultExpanded: false
    :withExpandedButton: true

---

### Half pie / gauge

Create gauge-style visualizations by adjusting `startAngle` and
`endAngle`. Perfect for progress indicators or completion metrics.



```python
# File: docs/pie/gauge_example.py

from dash import html

from dash_mui_charts import PieChart

task_data = [
    {'id': 0, 'value': 72, 'label': 'Completed'},
    {'id': 1, 'value': 28, 'label': 'Remaining'},
]

component = html.Div(
    PieChart(
        id='gauge-pie',
        data=task_data,
        startAngle=-90,    # Start at 12 o'clock
        endAngle=90,       # End at 6 o'clock (half circle)
        innerRadius=50,    # Donut style
        colors=['#4caf50', '#e0e0e0'],
        height=200,
    ),
    style={'display': 'flex', 'justifyContent': 'center'},
)
```

    :defaultExpanded: false
    :withExpandedButton: true

---

### Interactive example

Click on slices to see detailed click data. Hover to highlight slices and
see the highlight state update in real time — `clickData` and
`highlightedItem` both arrive as callback inputs.



```python
# File: docs/pie/interactive_example.py

import json

from dash import Input, Output, callback, html

from dash_mui_charts import PieChart

budget_data = [
    {'id': 0, 'value': 35, 'label': 'Marketing'},
    {'id': 1, 'value': 25, 'label': 'Engineering'},
    {'id': 2, 'value': 20, 'label': 'Sales'},
    {'id': 3, 'value': 15, 'label': 'Support'},
    {'id': 4, 'value': 5, 'label': 'Other'},
]

component = html.Div(
    [
        html.Div(
            PieChart(
                id='interactive-pie',
                data=budget_data,
                innerRadius=40,
                paddingAngle=2,
                cornerRadius=4,
                highlightScope={'highlight': 'item', 'fade': 'global'},
                height=300,
            ),
            style={'flex': '1'},
        ),
        html.Div(
            [
                html.Div(
                    [
                        html.H4("Click Data",
                                style={'marginTop': 0, 'marginBottom': '10px'}),
                        html.Pre(
                            id='pie-click-data',
                            children='Click on a slice',
                            style={
                                'backgroundColor': '#e3f2fd',
                                'padding': '15px',
                                'borderRadius': '8px',
                                'minHeight': '80px',
                                'fontSize': '13px',
                                'margin': 0,
                            },
                        ),
                    ],
                    style={'marginBottom': '20px'},
                ),
                html.Div(
                    [
                        html.H4("Highlighted Item",
                                style={'marginTop': 0, 'marginBottom': '10px'}),
                        html.Pre(
                            id='pie-highlight-data',
                            children='Hover over a slice',
                            style={
                                'backgroundColor': '#e8f5e9',
                                'padding': '15px',
                                'borderRadius': '8px',
                                'minHeight': '80px',
                                'fontSize': '13px',
                                'margin': 0,
                            },
                        ),
                    ]
                ),
            ],
            style={'flex': '1', 'paddingLeft': '30px'},
        ),
    ],
    style={'display': 'flex', 'alignItems': 'flex-start'},
)


@callback(
    Output('pie-click-data', 'children'),
    Input('interactive-pie', 'clickData'),
    prevent_initial_call=True
)
def display_click_data(click_data):
    if click_data:
        return json.dumps(click_data, indent=2)
    return 'Click on a slice'


@callback(
    Output('pie-highlight-data', 'children'),
    Input('interactive-pie', 'highlightedItem'),
    prevent_initial_call=True
)
def display_highlight_data(highlighted_item):
    if highlighted_item:
        return json.dumps(highlighted_item, indent=2)
    return 'Hover over a slice'
```

    :defaultExpanded: false
    :withExpandedButton: true

---

### Related pages

- [Props Explorer](/pie-props) — interactive props playground with nested two-ring pies


---

*Source: /pie*