Gridlines

import { Gridlines } from 'cx/charts';

The Gridlines component draws horizontal and vertical gridlines in the chart background. Besides aesthetics, gridlines make it easier to read axis values.

Gridlines automatically align with axis tick marks. Use xAxis and yAxis properties to target different axes or set them to false to hide gridlines in that direction.

 <Svg style="width: 400px; height: 300px; border: 1px dashed #ddd">
  <Chart
    margin="40 20 40 50"
    axes={{
      x: <NumericAxis />,
      y: <NumericAxis vertical />,
    }}
  >
    <Rectangle fill="white" />
    <Gridlines />
  </Chart>
</Svg> 

Configuration

Property	Type	Description
`xAxis`	`string/boolean`	Name of the horizontal axis. Default is `"x"`. Set to `false` to hide horizontal gridlines.
`yAxis`	`string/boolean`	Name of the vertical axis. Default is `"y"`. Set to `false` to hide vertical gridlines.
`style`	`object/string`	Custom CSS styles for the gridlines path element.