Pie Chart

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

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.

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.

# 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.

# 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.

# 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.

# 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.

# 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.

# 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 — interactive props playground with nested two-ring pies

Source: /pie