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.
Simple Example
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
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,
)Ranged Charts
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,
)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.
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,
)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.
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,
)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.
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.
API Reference
rx.recharts.BarChart
A Bar chart component in Recharts.
Valid Children
XAxisYAxisReferenceAreaReferenceDotReferenceLineBrushCartesianGridLegendGraphingTooltipBar