Gridlines

The Gridlines component in REAVIZ provides a visual representation of the value marks in a chart. You can customize the grid lines to render only the x-axis, y-axis, or both, enhancing the readability and clarity of your data visualizations.

Where to use:

Enhance Readability: Ideal for improving the readability of charts by providing reference lines.
Visualize Data Points: Useful for visually aligning data points with their corresponding values.
Custom Gridlines: Great for customizing the appearance of gridlines to match the style of your chart.

Examples

API

GridlineSeries

Name	Type	Default
`yScale`	`any` D3 scale for Y Axis.
`xScale`	`any` D3 scale for X Axis.
`yAxis`	`LinearAxisProps` The linear axis component for the Y Axis of the chart.
`xAxis`	`LinearAxisProps` The linear axis component for the X Axis of the chart.
`height`	`number` Height of the chart.
`width`	`number` Width of the chart.
`line`	`GridLineElement \| null` Gridline that is rendered.	`<Gridline direction="all" />`
`stripe`	`GridStripeElement \| null` GridStripe that is rendered.

Gridline

Name	Type	Default
`height`	`number` Height of the line set by the `GridlineSeries`.
`width`	`number` Width of the line set by the `GridlineSeries`.
`className`	`string` CSS Classname to apply.
`direction`	`"all" \| "x" \| "y"` Direction set by the `GridlineSeries`.	`'all'`
`scale`	`any` D3 Scale set by `GridlineSeries`.
`strokeWidth`	`number` SVG Stroke Width Property.	`1`
`strokeColor`	`string` SVG Stroke Color Property.	`'rgba(153, 153, 153, 0.5)'`
`data`	`number` Data point for the position set by the `GridlineSeries`.
`index`	`number` Index set by the `GridlineSeries`.
`strokeDasharray`	`string` SVG Stroke Dash Array Property.	`'2 5'`

GridStripe

Name	Type	Default
`position`	`"horizontal" \| "vertical"` Position set by the `GridlineSeries`.
`className`	`string` CSS Classname to apply.
`fill`	`string` Stripe fill color.	`'#393c3e'`
`height`	`number` Height of the line set by the `GridlineSeries`.
`width`	`number` Width of the line set by the `GridlineSeries`.
`direction`	`"all" \| "x" \| "y"` Direction set by the `GridlineSeries`.
`scale`	`any` D3 Scale set by `GridlineSeries`.
`data`	`number` Data point for the position set by the `GridlineSeries`.
`index`	`number` Index set by the `GridlineSeries`.

Last updated on June 10, 2026

Gradient Legends