Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

Library

/

Graphing

/

Charts

/

Radialbarchart

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.

Fill color supports rx.color(), which automatically adapts to dark/light mode changes.

def radial_bar_simple():
    return rx.recharts.radial_bar_chart(
        rx.recharts.radial_bar(
            data_key="x",
            min_angle=15,
        ),
        data=data,
        width="100%",
        height=500,
    )

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.

def radial_bar_advanced():
    return rx.recharts.radial_bar_chart(
        rx.recharts.radial_bar(
            data_key="uv",
            min_angle=90,
            background=True,
            label={
                "fill": "#666",
                "position": "insideStart",
            },
        ),
        data=data_radial_bar,
        inner_radius="10%",
        outer_radius="80%",
        start_angle=180,
        end_angle=0,
        width="100%",
        height=300,
    )

A RadialBar chart component in Recharts.

PropTypeDescriptionValues
dataList

The source data which each element is an object.

marginDict

The sizes of whitespace around the chart.

cxUnion

The The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of width. Number | Percentage

cyUnion

The The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of height. Number | Percentage

start_angleint

The angle of first radial direction line.

end_angleint

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_radiusUnion

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_radiusUnion

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_gapUnion

The gap between two bar categories, which can be a percent value or a fixed value. Percentage | Number

bar_gapstr

The gap between two bars in the same category, which can be a percent value or a fixed value. Percentage | Number

bar_sizeint

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.

widthUnion

The width of chart container. String or Integer

heightUnion

The height of chart container.

Valid Children

  • PolarAngleAxis
  • PolarRadiusAxis
  • PolarGrid
  • Legend
  • GraphingTooltip
  • RadialBar

Did you find this useful?

HomeGalleryChangelogIntroductionHosting