Pie Chart
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.
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.
ExpandCollapse
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.
🏆1
🪵1
🥑1
🧱1
ExpandCollapse
API Reference
rx.recharts.PieChart
A Pie chart component in Recharts.
Props
| Prop | Type | Description |
|---|---|---|
width | Union[int, str] | The width of chart container. String or Integer. |
height | Union[int, str] | 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}. |
Valid Children
PolarAngleAxisPolarRadiusAxisPolarGridLegendGraphingTooltipPieDefsEvent Triggers
See the full list of default event triggersrx.recharts.Pie
A Pie chart component in Recharts.
Props
| Prop | Type | Description |
|---|---|---|
data | Sequence | The source data which each element is an object. |
data_key | Union[int, str] | The key of each sector's value. |
cx | Union[int, str] | The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of container width. |
cy | Union[int, str] | The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of container height. |
inner_radius | Union[int, str] | The inner radius of pie, which can be set to a percent value. |
outer_radius | Union[int, str] | The outer radius of pie, which can be set to a percent value. |
start_angle | int | The angle of first sector. |
end_angle | int | The end angle of last sector, which should be unequal to start_angle. |
min_angle | int | The minimum angle of each unzero data. |
padding_angle | int | The angle between two sectors. |
name_key | str | The key of each sector's name. |
legend_type | "circle""cross""diamond""line""plainline""rect""square""star""triangle""wye""none" | The type of icon in legend. If set to 'none', no legend item will be rendered. |
label | Union[dict, bool] | If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally. |
label_line | Union[dict, bool] | If false set, label lines will not be drawn. If true set, label lines will be drawn which have the props calculated internally. |
stroke | Union[str, Color] | Stoke color. |
fill | Union[str, Color] | Fill color. |
is_animation_active | bool | If set false, animation of tooltip will be disabled. |
animation_begin | int | Specifies when the animation should begin, the unit of this option is ms. |
animation_duration | int | Specifies the duration of animation, the unit of this option is ms. |
animation_easing | "ease""ease-in""ease-out""ease-in-out""linear" | The type of easing function. |
root_tab_index | int | The tabindex of wrapper surrounding the cells. |
Valid Children
CellLabelListBare