Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

Library

/

Graphing

/

Charts

/

Barchart

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.

def bar_simple():
    return rx.recharts.bar_chart(
        rx.recharts.bar(
            data_key="uv",
            stroke=rx.color("accent", 9),
            fill=rx.color("accent", 8),
        ),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(),
        data=data,
        width="100%",
        height=250,
    )

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

def bar_double():
    return rx.recharts.bar_chart(
        rx.recharts.bar(
            data_key="uv",
            stroke=rx.color("accent", 9),
            fill=rx.color("accent", 8),
        ),
        rx.recharts.bar(
            data_key="pv",
            stroke=rx.color("green", 9),
            fill=rx.color("green", 8),
        ),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(),
        data=data,
        width="100%",
        height=250,
    )

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.

def bar_range():
    return rx.recharts.bar_chart(
        rx.recharts.bar(
            data_key="temperature",
            stroke=rx.color("accent", 9),
            fill=rx.color("accent", 8),
        ),
        rx.recharts.x_axis(data_key="day"),
        rx.recharts.y_axis(),
        data=range_data,
        width="100%",
        height=250,
    )

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 bar_with_state():
    return rx.recharts.bar_chart(
        rx.recharts.cartesian_grid(
            stroke_dasharray="3 3",
        ),
        rx.recharts.bar(
            data_key="uv",
            stroke=rx.color("accent", 9),
            fill=rx.color("accent", 8),
        ),
        rx.recharts.bar(
            data_key="pv",
            stroke=rx.color("green", 9),
            fill=rx.color("green", 8),
        ),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(),
        rx.recharts.legend(),
        on_click=BarState.randomize_data,
        data=BarState.data,
        width="100%",
        height=300,
    )

Here's an example demonstrates how to customize the appearance and layout of bars using the bar_category_gap, bar_gap, bar_size, and max_bar_size props. These props accept values in pixels to control the spacing and size of the bars.

def bar_features():
    return rx.recharts.bar_chart(
        rx.recharts.bar(
            data_key="value",
            fill=rx.color("accent", 8),
        ),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(),
        data=data,
        bar_category_gap="15%",
        bar_gap=6,
        bar_size=100,
        max_bar_size=40,
        width="100%",
        height=300,
    )

The layout prop allows you to set the orientation of the graph to be vertical or horizontal, it is set horizontally by default.

Include margins around your graph to ensure proper spacing and enhance readability. By default, provide margins on all sides of the chart to create a visually appealing and functional representation of your data.

def bar_vertical():
    return rx.recharts.bar_chart(
        rx.recharts.bar(
            data_key="uv",
            stroke=rx.color("accent", 8),
            fill=rx.color("accent", 3),
        ),
        rx.recharts.x_axis(type_="number"),
        rx.recharts.y_axis(
            data_key="name", type_="category"
        ),
        data=data,
        layout="vertical",
        margin={
            "top": 20,
            "right": 20,
            "left": 20,
            "bottom": 20,
        },
        width="100%",
        height=300,
    )

To learn how to use the sync_id, stack_id,x_axis_id and y_axis_id props check out the of the area chart documentation, where these props are all described with examples.

A Bar chart component in Recharts.

PropTypeDescriptionValues
bar_category_gapUnion

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

bar_gapUnion

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

bar_sizeint

The width of all the bars in the chart. Number

max_bar_sizeint

The maximum width of all the bars in a horizontal BarChart, or maximum height in a vertical BarChart.

stack_offsetLiteral

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_orderbool

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.)

dataList

The source data, in which each element is an object.

marginDict

The sizes of whitespace around the chart.

sync_idstr

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_methodLiteral

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

layoutLiteral

The layout of area in the chart. 'horizontal' | 'vertical'

stack_offsetLiteral

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'

widthUnion

The width of chart container. String or Integer

heightUnion

The height of chart container.

Valid Children

  • XAxis
  • YAxis
  • ReferenceArea
  • ReferenceDot
  • ReferenceLine
  • Brush
  • CartesianGrid
  • Legend
  • GraphingTooltip
  • Bar

A Bar component in Recharts.

PropTypeDescriptionValues
strokeUnion

The color of the line stroke.

stroke_widthint

The width of the line stroke.

fillUnion

The width of the line stroke.

backgroundbool

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.

labelbool

If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally.

stack_idstr

The stack id of bar, when two bars have the same value axis and same stack_id, then the two bars are stacked in order.

unitUnion

The unit of data. This option will be used in tooltip.

min_point_sizeint

The minimal height of a bar in a horizontal BarChart, or the minimal width of a bar in a vertical BarChart. By default, 0 values are not shown. To visualize a 0 (or close to zero) point, set the minimal point size to a pixel value like 3. In stacked bar charts, minPointSize might not be respected for tightly packed values. So we strongly recommend not using this prop in stacked BarCharts.

nameUnion

The name of data. This option will be used in tooltip and legend to represent a bar. If no value was set to this option, the value of dataKey will be used alternatively.

bar_sizeint

Size of the bar (if one bar_size is set then a bar_size must be set for all bars)

max_bar_sizeint

Max size of the bar

is_animation_activebool

Valid children components If set false, animation of bar will be disabled.

animation_beginint

Specifies when the animation should begin, the unit of this option is ms, default 0.

animation_durationint

Specifies the duration of animation, the unit of this option is ms, default 1500.

animation_easingLiteral

The type of easing function, default 'ease'

layoutLiteral

The layout of bar in the chart, usually inherited from parent. 'horizontal' | 'vertical'

data_keyUnion

The key of a group of data which should be unique in an area chart.

x_axis_idUnion

The id of x-axis which is corresponding to the data.

y_axis_idUnion

The id of y-axis which is corresponding to the data.

legend_typeLiteral

The type of icon in legend. If set to 'none', no legend item will be rendered. 'line' | 'plainline' | 'square' | 'rect'| 'circle' | 'cross' | 'diamond' | 'star' | 'triangle' | 'wye' | 'none'optional

Valid Children

  • Cell
  • LabelList
  • ErrorBar

Event Triggers

TriggerDescription
on_animation_begin

The customized event handler of animation start

on_animation_end

The customized event handler of animation end

Did you find this useful?

HomeGalleryChangelogIntroductionHosting