Chart primitives
Layouts & specialized
Interactions
Data utilities
Umbrella package
@vx/grid
The @vx/grid package lets you create gridlines for charts. <GridRows /> render horizontally,
<GridColumns /> render vertically, or you can use a <Grid /> to get them both at once!
Usage
import { Grid } from '@vx/grid';
// or
// import * as Grid from '@vx/grid';
// <Grid.Grid />
const grid = (
<Grid
xScale={xScale}
yScale={yScale}
width={xMax}
height={yMax}
numTicksRows={numTicksForHeight(height)}
numTicksColumns={numTicksForWidth(width)}
/>
);Installation
npm install --save @vx/gridExamples
<Axis.AxisBottom />
<Shape.BarStack />
<Threshold />
Components
APIs
#<GridRows />
@vx/scale or d3-scale object used to convert value to position.
Total width of each grid row line.
Optionally override rendering of grid lines.
classname to apply to line group element.
fill color applied to line element.
Starting x,y point of the line.
((instance: SVGLineElement | null) => void) | RefObject<SVGLineElement> | null | undefinedoptional reference to line element.
Left offset to apply to glyph g element container.
Default 0
Styles to apply as grid line style.
Approximate number of grid lines. Approximate due to d3 alogrithm, specify tickValues for precise control.
Default 10
Pixel offset to apply as a translation (y- for Rows, x- for Columns) to each grid lines.
Grid line stroke color.
Default #eaf0f6
Grid line stroke-dasharray attribute.
Grid line stroke thickness.
Default 1
Exact values used to generate grid lines using scale.
Overrides numTicks if specified.
Ending x,y point of the line.
Top offset to apply to glyph g element container.
Default 0
#<GridColumns />
Total height of each grid column line.
@vx/scale or d3-scale object used to convert value to position.
Optionally override rendering of grid lines.
classname to apply to line group element.
fill color applied to line element.
Starting x,y point of the line.
((instance: SVGLineElement | null) => void) | RefObject<SVGLineElement> | null | undefinedoptional reference to line element.
Left offset to apply to glyph g element container.
Default 0
Styles to apply as grid line style.
Approximate number of grid lines. Approximate due to d3 alogrithm, specify tickValues for precise control.
Default 10
Pixel offset to apply as a translation (y- for Rows, x- for Columns) to each grid lines.
Grid line stroke color.
Default #eaf0f6
Grid line stroke-dasharray attribute.
Grid line stroke thickness.
Default 1
Exact values used to generate grid lines using scale.
Overrides numTicks if specified.
Ending x,y point of the line.
Top offset to apply to glyph g element container.
Default 0
#<Grid />
@vx/scale or d3-scale object used to map from ScaleInput to x-coordinates (GridColumns).
@vx/scale or d3-scale object used to map from ScaleInput to y-coordinates (GridRows).
classname to apply to line group element.
Style object to apply to GridColumns.
Exact values to be used for GridColumns lines, passed to xScale. Use this if you need precise control over GridColumns values.
fill color applied to line element.
((instance: SVGLineElement | null) => void) | RefObject<SVGLineElement> | null | undefinedoptional reference to line element.
Left offset to apply to glyph g element container.
Approximate number of column gridlines.
Approximate number of row gridlines.
Style object to apply to GridRows.
Exact values to be used for GridRows lines, passed to yScale. Use this if you need precise control over GridRows values.
Grid line stroke color.
Grid line stroke-dasharray attribute.
Grid line stroke thickness.
Top offset to apply to glyph g element container.
Total width of each grid row line.
Pixel offset to apply as an x-translation to each GridColumns line.
Pixel offset to apply as an y-translation to each GridRows line.