Reflex | BarChart

✨ Reflex is in Hosting Alpha! Learn more here. ✨

Docs Blog Gallery

Search documentation...

Star

13k+

[ Learn ]

Getting Started

Tutorial

[ Concepts ]

[ Reference ]

API Reference

Recipes

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.

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

BarChart

A Bar chart component in Recharts.

Props

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'

Base Event Triggers

RadialBarChart

A RadialBar chart component in Recharts.

Props

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'

Base Event Triggers

Bar

A Bar component in Recharts.

Props

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.

Base Event Triggers

← Area Composed →

[ Learn ]

[ Concepts ]

[ Reference ]

[ Core Charts ]

[ Core Helpers ]

[ Other Graphing ]

BarChart

BarChart

Props

Base Event Triggers

RadialBarChart

Props

Base Event Triggers

Bar

Props

Base Event Triggers

.css-1ibpn7w{color:#DACEEE;}[ Learn ]

[ Concepts ]

[ Reference ]

[ Core Charts ]

[ Core Helpers ]

[ Other Graphing ]

BarChart

BarChart

Props

Base Event Triggers

RadialBarChart

Props

Base Event Triggers

Bar

Props

Base Event Triggers

[ Learn ]