## PieChart  
Pie chart component  
Category: Charts  

### Introduction

PieChart is based on [PieChart recharts](https://recharts.org/en-US/api/PieChart) component:

### Usage

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.PieChart(data=data)
```
### Data
Here is the data imported for the examples on this page:

```python

data = [
  { "name": "USA", "value": 400, "color": "indigo.6" },
  { "name": "India", "value": 300, "color": "yellow.6" },
  { "name": "Japan", "value": 100, "color": "teal.6" },
  { "name": "Other", "value": 200, "color": "gray.6" }
]
```

### Segment labels

Set `withLabels` prop to display labels next to each segment. Use `labelPosition` prop to control the position of labels
relative to the corresponding segment. Note that if your chart has a lot of segments and labelPosition="inside" is
set, labels might overlap. In this case, use labelPosition="outside".

```python
import dash_mantine_components as dmc
from .data import data

dmc.PieChart(
    data=data,
    withLabelsLine=True,
    labelsPosition="inside",
    labelsType="percent",
    withLabels=True,
)
```

### Size

Set `size` prop to control width and height of the chart. Note that if `withLabels` and labelPosition="outside" prop
are set, the chart height is automatically increased by 80px to make room for labels. You can override this behavior
by setting `h` and `w` style prop.


```python
import dash_mantine_components as dmc
from .data import data

dmc.PieChart(
    data=data,
    size=275  
)
```
### Segment color

You can reference colors from theme the same way as in other components, for example, `blue`, `red.5`, `orange.7`, etc. 
Any valid CSS color value is also accepted.

```python
import dash_mantine_components as dmc

data = [
    {"name": "USA", "value": 400, "color": "blue"},
    {"name": "Other", "value": 200, "color": "gray.6"},
]

component = dmc.PieChart(data=data)
```
### Enable Tooltip

To enable the tooltip, set `withTooltip` prop:

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.PieChart(data=data, withTooltip=True)
```
### Tooltip data source

By default, the tooltip displays data for all segments when hovered over any segment. To display data only for the hovered segment, set tooltipDataSource="segment":

```python
import dash_mantine_components as dmc
from dash import html
from .data import data

component = dmc.Group(
    [
        html.Div(
            [
                dmc.Text(
                    "Data only for hovered segment", fz="xs", mb="sm", ta="center"
                ),
                dmc.PieChart(
                    data=data,
                    withTooltip=True,
                    tooltipDataSource="segment",
                    mx="auto",
                ),
            ]
        ),
        html.Div(
            [
                dmc.Text("Data only for all segments", fz="xs", mb="sm", ta="center"),
                dmc.PieChart(
                    data=data,
                    withTooltip=True,
                    mx="auto",
                ),
            ]
        ),
    ],
    gap=50,
)
```
### Start and end angle

Use `startAngle` and `endAngle` props to control the start and end angle of the chart. For example, to display a
half-circle chart, set `startAngle=180` and `endAngle=0`:

```python
import dash_mantine_components as dmc
from .data import data

component = dmc.PieChart(data=data, startAngle=180, endAngle=0)
```
### Segments stroke

Use `strokeWidth` prop to control the width of the stroke around each segment.

```python
import dash_mantine_components as dmc
from .data import data

dmc.PieChart(
    data=data,
    strokeWidth=1
)
```

To change color of the stroke, use `strokeColor` prop. You can reference colors from theme the same way as in other
components, for example, `blue`, `red.5`, `orange.7`, etc. Any valid CSS color value is also accepted.

```python
dmc.PieChart(
    data=data,
    strokeWidth=1.8,
    strokeColor="red.5"
)
```

By default, segments stroke color is the same as the background color of the body element
(`--mantine-color-body` CSS variable). If you want to change it depending on the color scheme, define CSS variable
and pass it to the `strokeColor` prop:


```python
import dash_mantine_components as dmc
from .data import data

component = dmc.PieChart(data=data, strokeColor="var(--card-bg)")
```
```css
.root {
  --card-bg: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));

  background-color: var(--card-bg);
  padding: var(--mantine-spacing-md);
  border-radius: var(--mantine-radius-md);
}

```



### Pie animation
By default, the Recharts data animation is disabled. To enable and customize the animation, use `pieProps` to pass properties to the Recharts `Pie` component.


```python
from random import randint
import dash_mantine_components as dmc
from dash import callback, Input, Output


def get_data(values):
    return [
        {"name": "A", "value": values[0], "color": "indigo.6"},
        {"name": "B", "value": values[1], "color": "yellow.6"},
        {"name": "C", "value": values[2], "color": "teal.6"},
        {"name": "C", "value": values[3], "color": "gray.6"},
    ]


component = dmc.Box(
    [
        dmc.Button("Update Chart", id="btn-piechart-animation", n_clicks=0, mb="md"),
        dmc.PieChart(
            id="piechart-animation",
            data=get_data([100, 0, 0, 0]),
            pieProps={"isAnimationActive": True},
        ),
    ]
)


@callback(
    Output("piechart-animation", "data"), Input("btn-piechart-animation", "n_clicks")
)
def update(n):
    if n % 2 == 0:
        return get_data([400, 300, 600, 100])
    return get_data([100, 0, 0, 0])
```
### clickData
Use the `clickData` property in a callback to retrieve data from the most recent click event. To get the name of the
clicked series, use the `clickSeriesName` property.
```python
from dash import callback, Input, Output
import dash_mantine_components as dmc
from .data import data

component = dmc.Stack(
    [
        dmc.PieChart(
            id="figure-piechart",
            data=data,
        ),
        dmc.Text(id="clickdata-piechart1"),
        dmc.Text(id="clickdata-piechart2"),
    ]
)


@callback(
    Output("clickdata-piechart1", "children"),
    Output("clickdata-piechart2", "children"),
    Input("figure-piechart", "clickData"),
    Input("figure-piechart", "clickSeriesName"),
)
def update(data, name):
    return f"clickData:  {data}", f"clickSeriesName: {name}"
```
### hoverData
Use the `hoverData` property in a callback to retrieve data from the most recent hover event. To get the name of the 
hovered series, use the `hoverSeriesName` property.

```python
from dash import callback, Input, Output
import dash_mantine_components as dmc
from .data import data

component = dmc.Stack(
    [
        dmc.PieChart(
            id="figure-piechart-hover",
            data=data,
        ),
        dmc.Text(id="hoverdata-piechart1"),
        dmc.Text(id="hoverdata-piechart2"),
    ]
)


@callback(
    Output("hoverdata-piechart1", "children"),
    Output("hoverdata-piechart2", "children"),
    Input("figure-piechart-hover", "hoverData"),
    Input("figure-piechart-hover", "hoverSeriesName"),
)
def update(data, name):
    return f"hoverData:  {data}", f"hoverSeriesName: {name}"
```
### Styles API


This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.


#### PieChart selectors

| Selector    | Static selector           | Description                             |
|:------------|:--------------------------|:----------------------------------------|
| root        | .mantine-PieChart-root    | Root element                            |


#### PieChart CSS variables

| Selector         | Variable               | Description                              |
|:-----------------|:-----------------------|:-----------------------------------------|
| root             | --chart-labels-color   | Controls color of the chart labels       |
|                  | --chart-size           | Controls size of the chart               |
|                  | --chart-stroke-color   | Controls color of the chart stroke       |


### Keyword Arguments
#### PieChart

- children (a list of or a singular dash component, string or number; optional):
    Additional elements rendered inside `PieChart` component.

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- clickData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Click data.

- clickSeriesName (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Name of the series that was clicked.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data (list of dicts; required):
    Data used to render chart.

    `data` is a list of dicts with keys:

- data-* (string; optional):
    Wild card data attributes.

- endAngle (number; optional):
    Controls angle at which charts ends, `360` by default. Set to `0`
    to render the chart as semicircle.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- hoverData (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Hover data.

- hoverSeriesName (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Name of the series that is hovered.

- labelColor (optional):
    Controls text color of all labels, white by default.

- labelsPosition (a value equal to: 'inside', 'outside'; optional):
    Controls labels position relative to the segment, `'outside'` by
    default.

- labelsType (a value equal to: 'percent', 'value'; optional):
    Type of labels to display, `'value'` by default.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- paddingAngle (number; optional):
    Controls padding between segments, `0` by default.

- pieChartProps (dict; optional):
    Props passed down to recharts `PieChart` component.

- pieProps (boolean | number | string | dict | list; optional):
    Props passed down to recharts `Pie` component.

- size (number; optional):
    Controls chart width and height, height is increased by 40 if
    `withLabels` prop is set. Cannot be less than `thickness`. `80` by
    default.

- startAngle (number; optional):
    Controls angle at which chart starts, `0` by default. Set to `180`
    to render the chart as semicircle.

- strokeColor (optional):
    Controls color of the segments stroke, by default depends on color
    scheme.

- strokeWidth (number; optional):
    Controls width of segments stroke, `1` by default.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- tooltipAnimationDuration (number; optional):
    Tooltip animation duration in ms, `0` by default.

- tooltipDataSource (a value equal to: 'segment', 'all'; optional):
    Determines which data is displayed in the tooltip. `'all'` –
    display all values, `'segment'` – display only hovered segment.
    `'all'` by default.

- tooltipProps (boolean | number | string | dict | list; optional):
    Props passed down to `Tooltip` recharts component.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- withLabels (boolean; optional):
    Determines whether each segment should have associated label,
    `False` by default.

- withLabelsLine (boolean; optional):
    Determines whether segments labels should have lines that connect
    the segment with the label, `True` by default.

- withTooltip (boolean; optional):
    Determines whether the tooltip should be displayed when one of the
    section is hovered, `True` by default.