Radial Bar Chart
Simple Example
This example demonstrates how to use a radial_bar_chart with a radial_bar. The radial_bar_chart takes in data and then the radial_bar takes in a data_key. A radial bar chart is a circular visualization where data categories are represented by bars extending outward from a central point, with the length of each bar proportional to its value.
rx.color(), which automatically adapts to dark/light mode changes.Advanced Example
The start_angle and end_angle define the circular arc over which the bars are distributed, while inner_radius and outer_radius determine the radial extent of the bars from the center.
API Reference
rx.recharts.RadialBarChart
A RadialBar 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. |
data | Sequence | The source data which each element is an object. |
margin | Dict[str, Any] | The sizes of whitespace around the chart. |
cx | Union[int, str] | The The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of width. Number | Percentage. |
cy | Union[int, str] | The The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of height. Number | Percentage. |
start_angle | int | The angle of first radial direction line. |
end_angle | int | The angle of last point in the circle which should be startAngle - 360 or startAngle + 360. We'll calculate the direction of chart by 'startAngle' and 'endAngle'. |
inner_radius | Union[int, str] | The inner radius of first circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. Number | Percentage. |
outer_radius | Union[int, str] | The outer radius of last circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. Number | Percentage. |
bar_category_gap | Union[int, str] | The gap between two bar categories, which can be a percent value or a fixed value. Percentage | Number. |
bar_gap | str | The gap between two bars in the same category, which can be a percent value or a fixed value. Percentage | Number. |
bar_size | int | The size of each bar. If the barSize is not specified, the size of bar will be calculated by the barCategoryGap, barGap and the quantity of bar groups. |
Valid Children
PolarAngleAxisPolarRadiusAxisPolarGridLegendGraphingTooltipRadialBarDefs