> For AI agents: the complete documentation index is at [llms.txt](https://reflex.dev/docs/llms.txt). Markdown versions are available by appending `.md` or sending `Accept: text/markdown`. --- components: - rx.recharts.PieChart - rx.recharts.Pie --- # Pie Chart ```python exec import reflex as rx ``` A pie chart is a circular statistical graphic which is divided into slices to illustrate numerical proportion. For a pie chart we must define an `rx.recharts.pie()` component for each set of values we wish to plot. Each `rx.recharts.pie()` component has a `data`, a `data_key` and a `name_key` which clearly states which data and which variables in our data we are tracking. In this simple example we plot `value` column as our `data_key` against the `name` column which we set as our `name_key`. We also use the `fill` prop to set the color of the pie slices. ```python demo graphing data01 = [ {"name": "Group A", "value": 400}, {"name": "Group B", "value": 300, "fill": "#AC0E08FF"}, {"name": "Group C", "value": 300, "fill": "rgb(80,40, 190)"}, {"name": "Group D", "value": 200, "fill": rx.color("yellow", 10)}, {"name": "Group E", "value": 278, "fill": "purple"}, {"name": "Group F", "value": 189, "fill": "orange"}, ] def pie_simple(): return rx.recharts.pie_chart( rx.recharts.pie( data=data01, data_key="value", name_key="name", fill="#8884d8", label=True, ), width="100%", height=300, ) ``` We can also add two pies on one chart by using two `rx.recharts.pie` components. In this example `inner_radius` and `outer_radius` props are used. They define the doughnut shape of a pie chart: `inner_radius` creates the hollow center (use "0%" for a full pie), while `outer_radius` sets the overall size. The `padding_angle` prop, used on the green pie below, adds space between pie slices, enhancing visibility of individual segments. ```python demo graphing data01 = [ {"name": "Group A", "value": 400}, {"name": "Group B", "value": 300}, {"name": "Group C", "value": 300}, {"name": "Group D", "value": 200}, {"name": "Group E", "value": 278}, {"name": "Group F", "value": 189}, ] data02 = [ {"name": "Group A", "value": 2400}, {"name": "Group B", "value": 4567}, {"name": "Group C", "value": 1398}, {"name": "Group D", "value": 9800}, {"name": "Group E", "value": 3908}, {"name": "Group F", "value": 4800}, ] def pie_double(): return rx.recharts.pie_chart( rx.recharts.pie( data=data01, data_key="value", name_key="name", fill="#82ca9d", inner_radius="60%", padding_angle=5, ), rx.recharts.pie( data=data02, data_key="value", name_key="name", fill="#8884d8", outer_radius="50%", ), rx.recharts.graphing_tooltip(), width="100%", height=300, ) ``` ## Dynamic Data Chart data tied to a State var causes the chart to automatically update when the state changes, providing a nice way to visualize data in response to user interface elements. View the "Data" tab to see the substate driving this half-pie chart. ```python demo exec from typing import Any class PieChartState(rx.State): resources: list[dict[str, Any]] = [ dict(type_="🏆", count=1), dict(type_="🪵", count=1), dict(type_="🥑", count=1), dict(type_="🧱", count=1), ] @rx.var(cache=True) def resource_types(self) -> list[str]: return [r["type_"] for r in self.resources] @rx.event def increment(self, type_: str): for resource in self.resources: if resource["type_"] == type_: resource["count"] += 1 break @rx.event def decrement(self, type_: str): for resource in self.resources: if resource["type_"] == type_ and resource["count"] > 0: resource["count"] -= 1 break def dynamic_pie_example(): return rx.hstack( rx.recharts.pie_chart( rx.recharts.pie( data=PieChartState.resources, data_key="count", name_key="type_", cx="50%", cy="50%", start_angle=180, end_angle=0, fill="#8884d8", label=True, ), rx.recharts.graphing_tooltip(), ), rx.vstack( rx.foreach( PieChartState.resource_types, lambda type_, i: rx.hstack( rx.button("-", on_click=PieChartState.decrement(type_)), rx.text(type_, PieChartState.resources[i]["count"]), rx.button("+", on_click=PieChartState.increment(type_)), ), ), ), width="100%", height="15em", ) ``` ## API Reference ### rx.recharts.PieChart A Pie chart component in Recharts. #### Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `width` | str, int | - | The width of chart container. String or Integer. | | `height` | str, int | - | The height of chart container. | | `margin` | dict[str, Any] | - | The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}. | #### Event Triggers Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/ ### rx.recharts.Pie A Pie chart component in Recharts. #### Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `data` | Sequence[dict[str, Any]] | - | The source data which each element is an object. | | `data_key` | str, int | - | The key of each sector's value. | | `cx` | str, int | `"50%"` | The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of container width. | | `cy` | str, int | `"50%"` | The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of container height. | | `inner_radius` | str, int | `0` | The inner radius of pie, which can be set to a percent value. | | `outer_radius` | str, int | `"80%"` | The outer radius of pie, which can be set to a percent value. | | `start_angle` | int | `0` | The angle of first sector. | | `end_angle` | int | `360` | The end angle of last sector, which should be unequal to start_angle. | | `min_angle` | int | `0` | The minimum angle of each unzero data. | | `padding_angle` | int | `0` | The angle between two sectors. | | `name_key` | str | `"name"` | The key of each sector's name. | | `legend_type` | Literal["circle", "cross", "diamond", "line", "plainline", "rect", "square", "star", "triangle", "wye", "none"] | `"rect"` | The type of icon in legend. If set to 'none', no legend item will be rendered. | | `label` | dict[str, Any], bool | `False` | If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally. | | `label_line` | dict[str, Any], bool | `False` | If false set, label lines will not be drawn. If true set, label lines will be drawn which have the props calculated internally. | | `stroke` | str, Color | `rx.color("accent", 9)` | Stoke color. | | `fill` | str, Color | `rx.color("accent", 3)` | Fill color. | | `is_animation_active` | bool | `true in CSR, and false in SSR` | If set false, animation of tooltip will be disabled. | | `animation_begin` | int | `400` | Specifies when the animation should begin, the unit of this option is ms. | | `animation_duration` | int | `1500` | Specifies the duration of animation, the unit of this option is ms. | | `animation_easing` | Literal["ease", "ease-in", "ease-out", "ease-in-out", "linear"] | `"ease"` | The type of easing function. | | `root_tab_index` | int | `0` | The tabindex of wrapper surrounding the cells. | #### Event Triggers Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/ Component-specific event triggers: | Event Trigger | Description | | --- | --- | | `on_animation_start` | | | `on_animation_end` | |