apps/www/content/docs/charts/cartesian-grid.mdx
This guide will show you how to customize the cartesian grid of the charts component.
:::note
The charts component is built on top of Recharts. For advanced usage, refer to their documentation.
:::
import { CartesianGrid } from "recharts"
<CartesianGrid />
This will render a default grid with light gray lines on both the X and Y axes.
Modify the appearance of the grid lines using stroke, strokeDasharray, and
opacity
<CartesianGrid stroke="#ccc" strokeDasharray="3 3" opacity={0.5} />
| Property | Description |
|---|---|
stroke | Changes the grid line color (e.g., #ddd, red, etc.). |
strokeDasharray | Defines the dash pattern (e.g., 5 5 for dashed lines). |
opacity | Controls grid line transparency (0 to 1). |
To control whether horizontal or vertical lines are displayed:
<CartesianGrid vertical={false} horizontal={true} />
vertical={false} → Hides vertical grid lineshorizontal={false} → Hides horizontal grid lineshorizontal={true} and vertical={true} → Shows both (default behavior)To remove the grid completely, simply omit the CartesianGrid component or
explicitly hide both horizontal and vertical lines:
<CartesianGrid horizontal={false} vertical={false} />