Bar Chart · Library · Reflex Docs

For AI agents: the complete documentation index is at llms.txt. Markdown versions are available by appending .md or sending Accept: text/markdown.

NewReflex Agent Toolkit

Overview

Bar charts in Reflex are built on Recharts, a React charting library, and let you visualize categorical data in pure Python. A bar chart presents categorical data with rectangular bars whose heights or lengths are 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.

Simple Example

Start Building Now!

Multiple Bars

Multiple bars can be placed on the same bar_chart, using multiple rx.recharts.bar() components. Drawn side by side like this, they form a grouped (or clustered) bar chart.

Stacked Bar Chart

To build a stacked bar chart, give each rx.recharts.bar() the same stack_id. Instead of being drawn side by side, the bars are stacked on top of one another, which is ideal for showing part-to-whole composition (also called a segmented bar chart). Set stack_offset="expand" on the bar_chart to turn it into a 100% stacked bar chart.

Ranged Charts

You can also assign a range in the bar by assigning 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.

Stateful Charts

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.

Click Events and Drill-Down

The on_click event on rx.recharts.bar provides no arguments, so it cannot tell you which bar was clicked. To handle clicks with data — for example, to drill down into a category — render an rx.recharts.cell for each data point with rx.foreach, so each cell binds its click data at render time from the loop variable.

Example with Props

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.

Rounded Bars

The radius prop on rx.recharts.bar rounds the corners of each bar. Pass a single number to round all four corners, or a list of four values in the order [top-left, top-right, bottom-right, bottom-left] — for example [8, 8, 0, 0] rounds only the top corners.

Gradient Fill

Bars can be styled with SVG linear gradients. Define one gradient per series inside an rx.el.svg.defs block as the first child of the chart, then reference each gradient from the bar's fill prop with "url(#gradient-id)".

Vertical Example

The layout prop allows you to set the orientation of the graph to be vertical or horizontal, it is set horizontally by default. Setting layout="vertical" makes the bars run left-to-right, which is how you create a horizontal bar chart in Reflex.

API Reference

rx.recharts.BarChart

A Bar chart component in Recharts.

Props

Valid Children

XAxis, YAxis, ReferenceArea, ReferenceDot, ReferenceLine, Brush, CartesianGrid, Legend, GraphingTooltip, Bar, Defs, Layer, Rectangle

rx.recharts.Bar

A Bar component in Recharts.

Props

Valid Children

Cell, LabelList, ErrorBar

Event Triggers