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

# Brush

```python exec
import reflex as rx
from pcweb.templates.docpage import docgraphing

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 },
]



brush_example = """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)"""
```

The brush component allows us to view charts that have a large number of data points. So to view and analyze them efficiently, there is a slider down them that helps the viewer to select some data points that the viewer needs to be displayed.

```python eval
docgraphing(
  brush_example, 
  comp = eval(brush_example),
  data =  "data=" + str(data)
)
```