Cartesian Grid
How to customize the cartesian grid of the charts component
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.Usage
import { CartesianGrid } from "recharts"<CartesianGrid />This will render a default grid with light gray lines on both the X and Y axes.
Customize Stroke
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). |
Show/Hide Grid Lines
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}andvertical={true}→ Shows both (default behavior)
Remove Grid Lines
To remove the grid completely, simply omit the CartesianGrid component or
explicitly hide both horizontal and vertical lines:
<CartesianGrid horizontal={false} vertical={false} />