For AI agents: the complete documentation index is at [llms.txt](/content/docs/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](https://recharts.org/), 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!](https://build.reflex.dev/)

#### 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

| Prop | Type | Description |
| --- | --- | --- |
| `width` | `Union[int, str]` | The width of chart container. String or Integer. |
| `height` | `Union[int, str]` | The height of chart container. |
| `data` | `Sequence` | The source data, in which each element is an object. |
| `margin` | `Dict[str, Any]` | The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}. |
| `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` | `"index" or "value"` | When sync_id is provided, allows customization of how the charts will synchronize GraphingTooltips and brushes. |
| `layout` | `"vertical" or "horizontal"` | The layout of area in the chart. |
| `stack_offset` | `"expand" or "none" or "wiggle" or "silhouette"` | The type of offset function used to generate the lower and upper values in the series array. |
| `bar_category_gap` | `Union[int, str]` | The gap between two bar categories, which can be a percent value or a fixed value. |
| `bar_gap` | `Union[int, str]` | The gap between two bars in the same category, which can be a percent value or a fixed value. |
| `bar_size` | `int` | The width of all the bars in the chart. |
| `max_bar_size` | `int` | The maximum width of all the bars in a horizontal BarChart, or maximum height in a vertical BarChart. |
| `reverse_stack_order` | `bool` | If false set, stacked items will be rendered left to right. |

### Valid Children

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

### rx.recharts.Bar

A Bar component in Recharts.

### Props

| Prop | Type | Description |
| --- | --- | --- |
| `layout` | `"vertical" or "horizontal"` | The layout of bar in the chart, usually inherited from parent. |
| `data_key` | `Union[int, str]` | The key of a group of data which should be unique in an area chart. |
| `x_axis_id` | `Union[int, str]` | The id of x-axis which is corresponding to the data. |
| `y_axis_id` | `Union[int, str]` | The id of y-axis which is corresponding to the data. |
| `legend_type` | `"circle" or "cross" or "diamond" or "line" or "plainline" or "rect" or "square" or "star" or "triangle" or "wye" or "none"` | The type of icon in legend. If set to 'none', no legend item will be rendered. |
| `label` | `Union[dict, bool]` | If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally. |
| `is_animation_active` | `bool` | If set false, animation of bar will be disabled. |
| `animation_begin` | `int` | Specifies when the animation should begin, the unit of this option is ms. |
| `animation_duration` | `int` | Specifies the duration of animation, the unit of this option is ms. |
| `animation_easing` | `"ease" or "ease-in" or "ease-out" or "ease-in-out" or "linear"` | The type of easing function. |
| `unit` | `Union[int, str]` | The unit of data. This option will be used in tooltip. |
| `name` | `Union[int, str]` | The name of data. This option will be used in tooltip and legend to represent a bar. |
| `stroke` | `Union[str, Color]` | The color of the line stroke. |
| `stroke_width` | `Union[str, int, float]` | The width of the line stroke. |
| `fill` | `Union[str, Color]` | The width of the line stroke. |
| `background` | `bool` | If false set, background of bars will not be drawn. |
| `stack_id` | `str` | The stack id of bar. |
| `min_point_size` | `int` | The minimal height of a bar in a horizontal BarChart. |
| `bar_size` | `int` | Size of the bar. |
| `max_bar_size` | `int` | Max size of the bar. |
| `radius` | `Union[int, Sequence]` | If set a value, the option is the radius of all the rounded corners. |

### Valid Children

`Cell`, `LabelList`, `ErrorBar`

### Event Triggers

| Trigger | Description |
| --- | --- |
| `on_animation_start` | The customized event handler of animation start. |
| `on_animation_end` | The customized event handler of animation end. |