> For AI agents: the complete documentation index is at [llms.txt](https://reflex.dev/docs/llms.txt). Markdown versions are available by appending `.md` or sending `Accept: text/markdown`.

---
components:
  - rx.recharts.Brush
---

# Brush

```python exec
import reflex as rx
```

## Simple Example

The brush component allows us to view charts that have a large number of data points. To view and analyze them efficiently, the brush provides a slider with two handles that helps the viewer to select some range of data points to be displayed.

```python demo graphing
data = [
    {"name": "1", "uv": 300, "pv": 456},
    {"name": "2", "uv": -145, "pv": 230},
    {"name": "3", "uv": -100, "pv": 345},
    {"name": "4", "uv": -8, "pv": 450},
    {"name": "5", "uv": 100, "pv": 321},
    {"name": "6", "uv": 9, "pv": 235},
    {"name": "7", "uv": 53, "pv": 267},
    {"name": "8", "uv": 252, "pv": -378},
    {"name": "9", "uv": 79, "pv": -210},
    {"name": "10", "uv": 294, "pv": -23},
    {"name": "12", "uv": 43, "pv": 45},
    {"name": "13", "uv": -74, "pv": 90},
    {"name": "14", "uv": -71, "pv": 130},
    {"name": "15", "uv": -117, "pv": 11},
    {"name": "16", "uv": -186, "pv": 107},
    {"name": "17", "uv": -16, "pv": 926},
    {"name": "18", "uv": -125, "pv": 653},
    {"name": "19", "uv": 222, "pv": 366},
    {"name": "20", "uv": 372, "pv": 486},
    {"name": "21", "uv": 182, "pv": 512},
    {"name": "22", "uv": 164, "pv": 302},
    {"name": "23", "uv": 316, "pv": 425},
    {"name": "24", "uv": 131, "pv": 467},
    {"name": "25", "uv": 291, "pv": -190},
    {"name": "26", "uv": -47, "pv": 194},
    {"name": "27", "uv": -415, "pv": 371},
    {"name": "28", "uv": -182, "pv": 376},
    {"name": "29", "uv": -93, "pv": 295},
    {"name": "30", "uv": -99, "pv": 322},
    {"name": "31", "uv": -52, "pv": 246},
    {"name": "32", "uv": 154, "pv": 33},
    {"name": "33", "uv": 205, "pv": 354},
    {"name": "34", "uv": 70, "pv": 258},
    {"name": "35", "uv": -25, "pv": 359},
    {"name": "36", "uv": -59, "pv": 192},
    {"name": "37", "uv": -63, "pv": 464},
    {"name": "38", "uv": -91, "pv": -2},
    {"name": "39", "uv": -66, "pv": 154},
    {"name": "40", "uv": -50, "pv": 186},
]


def brush_simple():
    return 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.brush(data_key="name", height=30, stroke="#8884d8"),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(),
        data=data,
        width="100%",
        height=300,
    )
```

## Position, Size, and Range

This example showcases ways to set the Position, Size, and Range. The `gap` prop provides the spacing between stops on the brush when the graph will refresh. The `start_index` and `end_index` props defines the default range of the brush. `traveller_width` prop specifies the width of each handle ("traveller" in recharts lingo).

```python demo graphing
data = [
    {"name": "1", "uv": 300, "pv": 456},
    {"name": "2", "uv": -145, "pv": 230},
    {"name": "3", "uv": -100, "pv": 345},
    {"name": "4", "uv": -8, "pv": 450},
    {"name": "5", "uv": 100, "pv": 321},
    {"name": "6", "uv": 9, "pv": 235},
    {"name": "7", "uv": 53, "pv": 267},
    {"name": "8", "uv": 252, "pv": -378},
    {"name": "9", "uv": 79, "pv": -210},
    {"name": "10", "uv": 294, "pv": -23},
    {"name": "12", "uv": 43, "pv": 45},
    {"name": "13", "uv": -74, "pv": 90},
    {"name": "14", "uv": -71, "pv": 130},
    {"name": "15", "uv": -117, "pv": 11},
    {"name": "16", "uv": -186, "pv": 107},
    {"name": "17", "uv": -16, "pv": 926},
    {"name": "18", "uv": -125, "pv": 653},
    {"name": "19", "uv": 222, "pv": 366},
    {"name": "20", "uv": 372, "pv": 486},
    {"name": "21", "uv": 182, "pv": 512},
    {"name": "22", "uv": 164, "pv": 302},
    {"name": "23", "uv": 316, "pv": 425},
    {"name": "24", "uv": 131, "pv": 467},
    {"name": "25", "uv": 291, "pv": -190},
    {"name": "26", "uv": -47, "pv": 194},
    {"name": "27", "uv": -415, "pv": 371},
    {"name": "28", "uv": -182, "pv": 376},
    {"name": "29", "uv": -93, "pv": 295},
    {"name": "30", "uv": -99, "pv": 322},
    {"name": "31", "uv": -52, "pv": 246},
    {"name": "32", "uv": 154, "pv": 33},
    {"name": "33", "uv": 205, "pv": 354},
    {"name": "34", "uv": 70, "pv": 258},
    {"name": "35", "uv": -25, "pv": 359},
    {"name": "36", "uv": -59, "pv": 192},
    {"name": "37", "uv": -63, "pv": 464},
    {"name": "38", "uv": -91, "pv": -2},
    {"name": "39", "uv": -66, "pv": 154},
    {"name": "40", "uv": -50, "pv": 186},
]


def brush_pos_size_range():
    return rx.recharts.area_chart(
        rx.recharts.area(
            data_key="uv",
            stroke="#8884d8",
            fill="#8884d8",
        ),
        rx.recharts.area(
            data_key="pv",
            stroke="#82ca9d",
            fill="#82ca9d",
        ),
        rx.recharts.brush(
            data_key="name",
            traveller_width=15,
            start_index=3,
            end_index=10,
            stroke=rx.color("mauve", 10),
            fill=rx.color("mauve", 3),
        ),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(),
        data=data,
        width="100%",
        height=200,
    )
```

## API Reference

### rx.recharts.Brush

A Brush component in Recharts.

#### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `stroke` | str, Color | `rx.color("gray", 9)` | Stroke color. |
| `fill` | str, Color | `rx.color("gray", 2)` | The fill color of brush. |
| `data_key` | str, int | - | The key of data displayed in the axis. |
| `x` | int | `0` | The x-coordinate of brush. |
| `y` | int | `0` | The y-coordinate of brush. |
| `width` | int | `0` | The width of brush. |
| `height` | int | `40` | The height of brush. |
| `data` | Sequence[Any] | - | The original data of a LineChart, a BarChart or an AreaChart. |
| `traveller_width` | int | `5` | The width of each traveller. |
| `gap` | int | `1` | The data with gap of refreshing chart. If the option is not set, the chart will be refreshed every time. |
| `start_index` | int | `0` | The default start index of brush. If the option is not set, the start index will be 0. |
| `end_index` | int | - | The default end index of brush. If the option is not set, the end index will be calculated by the length of data. |

#### Event Triggers

Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/

Component-specific event triggers:

| Event Trigger | Description |
| --- | --- |
| `on_change` |  |