@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/grid

Examples

Components

APIs

#<GridRows />

# GridRows.scaleScale<ScaleInput, number>required

@vx/scale or d3-scale object used to map from ScaleInput to y-coordinates.

# GridRows.widthnumberrequired

Total width of the each grid row line.

# GridRows.classNamestringoptional

classname to apply to line group element.

# GridRows.fillstringoptional

fill color applied to line element.

# GridRows.fromPointoptional

Starting x,y point of the line.

# GridRows.innerRefRef<SVGLineElement>optional

reference to line element.

# GridRows.leftnumberoptional

Left offset to apply to glyph g element container.

Default 0

# GridRows.lineStyleCSSPropertiesoptional

Styles to apply as grid line style.

# GridRows.numTicksnumberoptional

Approximate number of grid lines. Approximate due to d3 alogrithm, specify tickValues for precise control.

Default 10

# GridRows.offsetnumberoptional

Pixel offset to apply as a translation (y- for Rows, x- for Columns) to each grid lines.

# GridRows.strokestringoptional

Grid line stroke color.

Default #eaf0f6

# GridRows.strokeDasharraystringoptional

Grid line stroke-dasharray attribute.

# GridRows.strokeWidthReactTextoptional

Grid line stroke thickness.

Default 1

# GridRows.tickValuesnumber[]optional

Exact values used to generate grid cordinates (y- for Rows, x- for Columns) lines using scale. Overrides numTicks if specified.

# GridRows.toPointoptional

Ending x,y point of the line.

# GridRows.topnumberoptional

Top offset to apply to glyph g element container.

Default 0

#<GridColumns />

# GridColumns.heightnumberrequired

Total height of the each grid column line.

# GridColumns.scaleScale<ScaleInput, number>required

@vx/scale or d3-scale object used to map from ScaleInput to x-coordinates.

# GridColumns.classNamestringoptional

classname to apply to line group element.

# GridColumns.fillstringoptional

fill color applied to line element.

# GridColumns.fromPointoptional

Starting x,y point of the line.

# GridColumns.innerRefRef<SVGLineElement>optional

reference to line element.

# GridColumns.leftnumberoptional

Left offset to apply to glyph g element container.

Default 0

# GridColumns.lineStyleCSSPropertiesoptional

Styles to apply as grid line style.

# GridColumns.numTicksnumberoptional

Approximate number of grid lines. Approximate due to d3 alogrithm, specify tickValues for precise control.

Default 10

# GridColumns.offsetnumberoptional

Pixel offset to apply as a translation (y- for Rows, x- for Columns) to each grid lines.

# GridColumns.strokestringoptional

Grid line stroke color.

Default #eaf0f6

# GridColumns.strokeDasharraystringoptional

Grid line stroke-dasharray attribute.

# GridColumns.strokeWidthReactTextoptional

Grid line stroke thickness.

Default 1

# GridColumns.tickValuesnumber[]optional

Exact values used to generate grid cordinates (y- for Rows, x- for Columns) lines using scale. Overrides numTicks if specified.

# GridColumns.toPointoptional

Ending x,y point of the line.

# GridColumns.topnumberoptional

Top offset to apply to glyph g element container.

Default 0

#<Grid />

# Grid.xScaleScale<XScaleInput, number>required

@vx/scale or d3-scale object used to map from ScaleInput to x-coordinates (GridColumns).

# Grid.yScaleScale<YScaleInput, number>required

@vx/scale or d3-scale object used to map from ScaleInput to y-coordinates (GridRows).

# Grid.classNamestringoptional

classname to apply to line group element.

# Grid.columnLineStyleCSSPropertiesoptional

Style object to apply to GridColumns.

# Grid.columnTickValuesnumber[]optional

Exact values to be used for GridColumns lines, passed to xScale. Use this if you need precise control over GridColumns values.

# Grid.fillstringoptional

fill color applied to line element.

# Grid.innerRefRef<SVGLineElement>optional

reference to line element.

# Grid.leftnumberoptional

Left offset to apply to glyph g element container.

# Grid.numTicksColumnsnumberoptional

Approximate number of column gridlines.

# Grid.numTicksRowsnumberoptional

Approximate number of row gridlines.

# Grid.rowLineStyleCSSPropertiesoptional

Style object to apply to GridRows.

# Grid.rowTickValuesnumber[]optional

Exact values to be used for GridRows lines, passed to yScale. Use this if you need precise control over GridRows values.

# Grid.strokestringoptional

Grid line stroke color.

# Grid.strokeDasharraystringoptional

Grid line stroke-dasharray attribute.

# Grid.strokeWidthReactTextoptional

Grid line stroke thickness.

# Grid.topnumberoptional

Top offset to apply to glyph g element container.

# Grid.widthReactTextoptional

Total width of the each grid row line.

# Grid.xOffsetnumberoptional

Pixel offset to apply as an x-translation to each GridColumns line.

# Grid.yOffsetnumberoptional

Pixel offset to apply as an y-translation to each GridRows line.