Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

Getting Started

Tutorial

Hosting

Reflex Deploy

Self Hosting

Library

Graphing

Barchart

Bar Chart

A bar chart presents categorical data with rectangular bars with heights or lengths proportional to the values that they represent.

For a bar chart we must define an rx.recharts.bar() component for each set of values we wish to plot. Each rx.recharts.bar() component has a data_key which clearly states which variable in our data we are tracking. In this simple example we plot uv as a bar against the name column which we set as the data_key in rx.recharts.x_axis.

rx.recharts.bar_chart(
    rx.recharts.bar(
        data_key="uv", stroke="#8884d8", fill="#8884d8"
    ),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=data,
)

data = [
    {"name": "Page A", "uv": 4000, "pv": 2400, "amt": 2400},
    {"name": "Page B", "uv": 3000, "pv": 1398, "amt": 2210},
    {"name": "Page C", "uv": 2000, "pv": 9800, "amt": 2290},
    {"name": "Page D", "uv": 2780, "pv": 3908, "amt": 2000},
    {"name": "Page E", "uv": 1890, "pv": 4800, "amt": 2181},
    {"name": "Page F", "uv": 2390, "pv": 3800, "amt": 2500},
    {"name": "Page G", "uv": 3490, "pv": 4300, "amt": 2100},
]

Multiple bars can be placed on the same bar_chart, using multiple rx.recharts.bar() components.

rx.recharts.bar_chart(
    rx.recharts.bar(
        data_key="uv", stroke="#8884d8", fill="#8884d8"
    ),
    rx.recharts.bar(
        data_key="pv", stroke="#82ca9d", fill="#82ca9d"
    ),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=data,
)

data = [
    {"name": "Page A", "uv": 4000, "pv": 2400, "amt": 2400},
    {"name": "Page B", "uv": 3000, "pv": 1398, "amt": 2210},
    {"name": "Page C", "uv": 2000, "pv": 9800, "amt": 2290},
    {"name": "Page D", "uv": 2780, "pv": 3908, "amt": 2000},
    {"name": "Page E", "uv": 1890, "pv": 4800, "amt": 2181},
    {"name": "Page F", "uv": 2390, "pv": 3800, "amt": 2500},
    {"name": "Page G", "uv": 3490, "pv": 4300, "amt": 2100},
]

You can also assign a range in the bar by assiging the data_key in the rx.recharts.bar to a list with two elements, i.e. here a range of two temperatures for each date.

rx.recharts.bar_chart(
    rx.recharts.bar(
        data_key="temperature",
        stroke="#8884d8",
        fill="#8884d8",
    ),
    rx.recharts.x_axis(data_key="day"),
    rx.recharts.y_axis(),
    data=range_data,
)

data = [
    {"day": "05-01", "temperature": [-1, 10]},
    {"day": "05-02", "temperature": [2, 15]},
    {"day": "05-03", "temperature": [3, 12]},
    {"day": "05-04", "temperature": [4, 12]},
    {"day": "05-05", "temperature": [12, 16]},
    {"day": "05-06", "temperature": [5, 16]},
    {"day": "05-07", "temperature": [3, 12]},
    {"day": "05-08", "temperature": [0, 8]},
    {"day": "05-09", "temperature": [-3, 5]},
]

Here is an example of a bar graph with a State. Here we have defined a function randomize_data, which randomly changes the data for both graphs when the first defined bar is clicked on using on_click=BarState.randomize_data.

class BarState(rx.State):
    data = data

    def randomize_data(self):
        for i in range(len(self.data)):
            self.data[i]["uv"] = random.randint(0, 10000)
            self.data[i]["pv"] = random.randint(0, 10000)
            self.data[i]["amt"] = random.randint(0, 10000)


def index():
    return rx.recharts.bar_chart(
        rx.recharts.bar(
            data_key="uv",
            stroke="#8884d8",
            fill="#8884d8",
            type_="natural",
            on_click=BarState.randomize_data,
        ),
        rx.recharts.bar(
            data_key="pv",
            stroke="#82ca9d",
            fill="#82ca9d",
            type_="natural",
        ),
        rx.recharts.x_axis(
            data_key="name",
        ),
        rx.recharts.y_axis(),
        rx.recharts.legend(),
        rx.recharts.cartesian_grid(
            stroke_dasharray="3 3",
        ),
        data=BarState.data,
        width="100%",
        height=400,
    )

API Reference

BarChart

A Bar chart component in Recharts.

Prop	Type	Description
`bar_category_gap`	Union	The gap between two bar categories, which can be a percent value or a fixed value. Percentage \| Number
`bar_gap`	Union	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 width of all the bars in the chart. Number
`max_bar_size`	int	The maximum width of all the bars in a horizontal BarChart, or maximum height in a vertical BarChart.
`stack_offset`	Literal	The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape.
`reverse_stack_order`	bool	If false set, stacked items will be rendered left to right. If true set, stacked items will be rendered right to left. (Render direction affects SVG layering, not x position.)
`data`	List	The source data, in which each element is an object.
`sync_id`	str	If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush.
`sync_method`	Literal	When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' \| 'value' \| function
`width`	Union	The width of chart container. String or Integer
`height`	Union	The height of chart container.
`layout`	Literal	The layout of area in the chart. 'horizontal' \| 'vertical'
`margin`	Dict	The sizes of whitespace around the chart.
`stack_offset`	Literal	The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape. 'expand' \| 'none' \| 'wiggle' \| 'silhouette'

Valid Children

XAxis
YAxis
ReferenceArea
ReferenceDot
ReferenceLine
Brush
CartesianGrid
Legend
GraphingTooltip
Bar

Event Triggers

See the full list of default event triggers

RadialBarChart

A RadialBar chart component in Recharts.

Prop	Type	Description
`cx`	Union	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	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	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	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	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.
`data`	List	The source data, in which each element is an object.
`sync_id`	str	If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush.
`sync_method`	Literal	When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' \| 'value' \| function
`width`	Union	The width of chart container. String or Integer
`height`	Union	The height of chart container.
`layout`	Literal	The layout of area in the chart. 'horizontal' \| 'vertical'
`margin`	Dict	The sizes of whitespace around the chart.
`stack_offset`	Literal	The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape. 'expand' \| 'none' \| 'wiggle' \| 'silhouette'

Valid Children

PolarAngleAxis
PolarRadiusAxis
PolarGrid
Legend
GraphingTooltip
RadialBar

Event Triggers

See the full list of default event triggers

Bar

A Bar component in Recharts.

Prop	Type	Description
`stroke`	str	The color of the line stroke.
`stroke_width`	int	The width of the line stroke.
`fill`	str	The width of the line stroke.
`background`	bool	If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally.
`label`	bool	If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally.
`stack_id`	str	The stack id of bar, when two areas have the same value axis and same stackId, then the two areas area stacked in order.
`bar_size`	int	Size of the bar
`max_bar_size`	int	Max size of the bar
`layout`	Literal	The layout of bar in the chart, usually inherited from parent. 'horizontal' \| 'vertical'
`data_key`	Union	The key of a group of data which should be unique in an area chart.
`x_axis_id`	Union	The id of x-axis which is corresponding to the data.
`y_axis_id`	Union	The id of y-axis which is corresponding to the data.

Valid Children

Cell
LabelList
ErrorBar

Event Triggers

See the full list of default event triggers

← Axis Brush →

Did you find this useful?

Yes

Raise an issue

Edit this page

Home Gallery Changelog Introduction Hosting

Bar Chart

API Reference

BarChart

RadialBarChart

Bar