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 (opens in a new tab)
| Prop | Description | Default |
|---|---|---|
yScale | D3 scale for Y Axis.any | |
xScale | D3 scale for X Axis.any | |
yAxis | The linear axis component for the Y Axis of the chart.LinearAxisProps | |
xAxis | The linear axis component for the X Axis of the chart.LinearAxisProps | |
height | Height of the chart.number | |
width | Width of the chart.number | |
line | Gridline that is rendered.GridLineElement | <Gridline direction="all" /> |
stripe | GridStripe that is rendered.GridStripeElement | null |
Gridline (opens in a new tab)
| Prop | Description | Default |
|---|---|---|
height | Height of the line set by the `GridlineSeries`.number | |
width | Width of the line set by the `GridlineSeries`.number | |
className | CSS Classname to apply.string | |
direction | Direction set by the `GridlineSeries`."all" | "x" | "y" | all |
scale | D3 Scale set by `GridlineSeries`.any | |
strokeWidth | SVG Stroke Width Property.number | 1 |
strokeColor | SVG Stroke Color Property.string | rgba(153, 153, 153, 0.5) |
data | Data point for the position set by the `GridlineSeries`.number | |
index | Index set by the `GridlineSeries`.number | |
strokeDasharray | SVG Stroke Dash Array Property.string | 2 5 |
GridStripe (opens in a new tab)
| Prop | Description | Default |
|---|---|---|
position | Position set by the `GridlineSeries`."horizontal" | "vertical" | |
className | CSS Classname to apply.string | |
fill | Stripe fill color.string | #393c3e |
height | Height of the line set by the `GridlineSeries`.number | |
width | Width of the line set by the `GridlineSeries`.number | |
direction | Direction set by the `GridlineSeries`."all" | "x" | "y" | |
scale | D3 Scale set by `GridlineSeries`.any | |
data | Data point for the position set by the `GridlineSeries`.number | |
index | Index set by the `GridlineSeries`.number |