Star
Chart primitives
Layouts & specialized
Interactions
SVG utilities
Data utilities
Umbrella package

@visx/grid

The @visx/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 '@visx/grid';
// or
// import * as Grid from '@visx/grid';
// <Grid.Grid />

const grid = (
  <Grid
    xScale={xScale}
    yScale={yScale}
    width={xMax}
    height={yMax}
    numTicksRows={numTicksForHeight(height)}
    numTicksColumns={numTicksForWidth(width)}
  />
);

Installation

npm install --save @visx/grid

Examples

Axes & scales
<Axis.AxisBottom />
Bar Stack
<Shape.BarStack />
Area difference chart
<Threshold />
Radial Lines
<Shape.LineRadial />

APIs

#<GridRows />

# scaleScalerequired

@visx/scale or d3-scale object used to convert value to position.

# widthnumberrequired

Total width of each grid row line.

# children((props: { lines: GridLines; }) => ReactNode) | undefined

Optionally override rendering of grid lines.

# classNamestring | undefined

classname to apply to line group element.

# fillstring | undefined

fill color applied to line element.

# fromPoint | undefined

Starting x,y point of the line.

# innerRef((instance: SVGLineElement | null) => void) | RefObject<SVGLineElement> | null | undefined

reference to line element.

# leftnumber | undefined

Left offset to apply to glyph g element container.

Default 0

# lineStyleCSSProperties | undefined

Styles to apply as grid line style.

# numTicksnumber | undefined

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

Default 10

# offsetnumber | undefined

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

# strokestring | undefined

Grid line stroke color.

Default #eaf0f6

# strokeDasharraystring | undefined

Grid line stroke-dasharray attribute.

# strokeWidthstring | number | undefined

Grid line stroke thickness.

Default 1

# tickValuesScaleInput<Scale>[] | undefined

Exact values used to generate grid lines using scale. Overrides numTicks if specified.

# toPoint | undefined

Ending x,y point of the line.

# topnumber | undefined

Top offset to apply to glyph g element container.

Default 0

#<GridColumns />

# heightnumberrequired

Total height of each grid column line.

# scaleScalerequired

@visx/scale or d3-scale object used to convert value to position.

# children((props: { lines: GridLines; }) => ReactNode) | undefined

Optionally override rendering of grid lines.

# classNamestring | undefined

classname to apply to line group element.

# fillstring | undefined

fill color applied to line element.

# fromPoint | undefined

Starting x,y point of the line.

# innerRef((instance: SVGLineElement | null) => void) | RefObject<SVGLineElement> | null | undefined

reference to line element.

# leftnumber | undefined

Left offset to apply to glyph g element container.

Default 0

# lineStyleCSSProperties | undefined

Styles to apply as grid line style.

# numTicksnumber | undefined

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

Default 10

# offsetnumber | undefined

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

# strokestring | undefined

Grid line stroke color.

Default #eaf0f6

# strokeDasharraystring | undefined

Grid line stroke-dasharray attribute.

# strokeWidthstring | number | undefined

Grid line stroke thickness.

Default 1

# tickValuesScaleInput<Scale>[] | undefined

Exact values used to generate grid lines using scale. Overrides numTicks if specified.

# toPoint | undefined

Ending x,y point of the line.

# topnumber | undefined

Top offset to apply to glyph g element container.

Default 0

#<Grid />

# xScaleXScalerequired

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

# yScaleYScalerequired

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

# classNamestring | undefined

classname to apply to line group element.

# columnLineStyleCSSProperties | undefined

Style object to apply to GridColumns.

# columnTickValuesScaleInput<XScale>[] | undefined

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

# fillstring | undefined

fill color applied to line element.

# innerRef((instance: SVGLineElement | null) => void) | RefObject<SVGLineElement> | null | undefined

reference to line element.

# leftnumber | undefined

Left offset to apply to glyph g element container.

# numTicksColumnsnumber | undefined

Approximate number of column gridlines.

# numTicksRowsnumber | undefined

Approximate number of row gridlines.

# rowLineStyleCSSProperties | undefined

Style object to apply to GridRows.

# rowTickValuesScaleInput<YScale>[] | undefined

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

# strokestring | undefined

Grid line stroke color.

# strokeDasharraystring | undefined

Grid line stroke-dasharray attribute.

# strokeWidthstring | number | undefined

Grid line stroke thickness.

# topnumber | undefined

Top offset to apply to glyph g element container.

# widthnumber

Total width of each grid row line.

# xOffsetnumber | undefined

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

# yOffsetnumber | undefined

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

#<GridRadial />

# scaleScalerequired

@visx/scale or d3-scale object used to convert value to position.

# arcThicknessnumber | undefined

If specified, the arc of each radial grid line will have this thickness, useful for fills.

# children((props: { lines: GridLines; }) => ReactNode) | (() => ReactNode) | undefined

Optionally override rendering of grid lines. Child components to the Arc.

# classNamestring | undefined

classname to apply to line group element.

# cornerRadiusnumber | Accessor<Datum, number> | undefined

Number or accessor function which returns a number, which defines the arc cornerRadius.

# dataDatum | undefined

A Datum for which to generate an arc.

# endAnglenumber | undefined

The end angle of the arc of radial grid lines in radians.

Default 2 * Math.PI

# fillstring | undefined

The color applied to the fill of the radial lines.

Default transparent

# fillOpacitynumber | undefined

The fill opacity applied to the fill of the radial lines.

Default 1

# innerRadiusnumber | Accessor<Datum, number> | undefined

Number or accessor function which returns a number, which defines the arc innerRadius.

# innerRef((instance: SVGPathElement | null) => void) | RefObject<SVGPathElement> | null | undefined

React ref to the path element.

# leftnumber | undefined

Left offset to apply to glyph g element container.

Default 0

# lineClassNamestring | undefined

The class name applied to all radial lines.

# lineStyleCSSProperties | undefined

Styles to apply as grid line style.

# numTicksnumber | undefined

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

Default 10

# offsetnumber | undefined

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

# outerRadiusnumber | Accessor<Datum, number> | undefined

Number or accessor function which returns a number, which defines the arc outerRadius.

# padAnglenumber | Accessor<Datum, number> | undefined

Number or accessor function which returns a number, which defines the arc padAngle.

# padRadiusnumber | Accessor<Datum, number> | undefined

Number or accessor function which returns a number, which defines the arc padRadius.

# startAnglenumber | undefined

The start angle of the arc of radial grid lines in radians.

Default 0

# strokestring | undefined

Grid line stroke color.

Default #eaf0f6

# strokeDasharraystring | undefined

Grid line stroke-dasharray attribute.

# strokeWidthstring | number | undefined

Grid line stroke thickness.

Default 1

# tickValuesScaleInput<Scale>[] | undefined

Exact values used to generate grid lines using scale. Overrides numTicks if specified.

# topnumber | undefined

Top offset to apply to glyph g element container.

Default 0

#<GridAngle />

# scaleScalerequired

@visx/scale or d3-scale object used to convert value to angle.

# children((props: { lines: GridLines; }) => ReactNode) | undefined

Optionally override rendering of grid lines.

# classNamestring | undefined

classname to apply to line group element.

# fillstring | undefined

fill color applied to line element.

# fromPoint | undefined

Starting x,y point of the line.

# innerRadiusnumber | undefined

Radius which determines the start position of angle lines.

Default 0

# innerRef((instance: SVGLineElement | null) => void) | RefObject<SVGLineElement> | null | undefined

reference to line element.

# leftnumber | undefined

Left offset to apply to glyph g element container.

Default 0

# lineClassNamestring | undefined

The class name applied to all angle lines.

# lineStyleCSSProperties | undefined

Styles to apply as grid line style.

# numTicksnumber | undefined

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

Default 10

# offsetnumber | undefined

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

# outerRadiusnumber

Radius which determines the end position of angle lines.

Default 0

# strokestring | undefined

Grid line stroke color.

Default #eaf0f6

# strokeDasharraystring | undefined

Grid line stroke-dasharray attribute.

# strokeWidthstring | number | undefined

Grid line stroke thickness.

Default 1

# tickValuesScaleInput<Scale>[] | undefined

Exact values used to generate angle grid lines using scale. Overrides numTicks if specified.

# toPoint | undefined

Ending x,y point of the line.

# topnumber | undefined

Top offset to apply to glyph g element container.

Default 0

#<GridPolar />

# outerRadiusnumberrequired

Radius which determines the end position of angle lines.

# scaleAngleScalerequired

A d3 or visx scale function used to generate the angle of angle lines.

# scaleRadialScalerequired

A d3 or visx scale function used to generate the radius of radial lines.

# arcThicknessnumber | undefined

If specified, the arc of each radial grid line will have this thickness, useful for fills.

# children((props: { lines: GridLines; }) => ReactNode) | undefined

Optionally override rendering of grid lines.

# classNamestring | undefined

classname to apply to line group element.

# classNameAnglestring | undefined

The class name applied to the angle grid group.

# classNameRadialstring | undefined

The class name applied to the radial grid group.

# endAnglenumber | undefined

The end angle of the arc of radial grid lines in radians.

# fillRadialstring | undefined

The color applied to the fill of the radial lines.

# innerRadiusnumber | undefined

Radius which determines the start position of angle lines.

# leftnumber | undefined

Left offset to apply to glyph g element container.

# lineClassNameAnglestring | undefined

Classname applied to all angle line paths.

# lineClassNameRadialstring | undefined

Classname applied to all radial line paths.

# lineStyleCSSProperties | undefined

Styles to apply as grid line style.

# lineStyleAngle(CSSProperties & LineProps & Pick<SVGProps<SVGLineElement>, "string" | "children" | "width" | "height" | "scale" | "color" | ... 459 more ... | "key">) | undefined

Style object set as the angle line path style attribute.

# lineStyleRadial(CSSProperties & LineProps & Pick<SVGProps<SVGLineElement>, "string" | "children" | "width" | "height" | "scale" | "color" | ... 459 more ... | "key">) | undefined

Style object set as the radius line path style attribute.

# numTicksnumber | undefined

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

# numTicksAnglenumber | undefined

The number of angle ticks wanted for the grid. Note this is approximate due to d3's algorithm, you can use tickValues for greater control

# numTicksRadialnumber | undefined

The number of radial ticks wanted for the grid. Note this is approximate due to d3's algorithm, you can use tickValues for greater control

# offsetnumber | undefined

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

# startAnglenumber | undefined

The start angle of the arc of radial grid lines in radians.

# strokestring | undefined

Grid line stroke color.

# strokeAnglestring | undefined

The color applied to the stroke of the angle lines.

# strokeDasharraystring | undefined

Grid line stroke-dasharray attribute.

# strokeDasharrayAnglestring | undefined

The pattern of dashes for angle line stroke.

# strokeDasharrayRadialstring | undefined

The pattern of dashes for angle radial stroke.

# strokeRadialstring | undefined

The color applied to the stroke of the radial lines.

# strokeWidthstring | number | undefined

Grid line stroke thickness.

# strokeWidthAnglestring | number | undefined

The pixel value for the width of the angle lines.

# strokeWidthRadialstring | number | undefined

The pixel value for the width of the radial lines.

# tickValuesAngleScaleInput<Scale>[] | undefined

An array of values that determine the number and values of the angle ticks. Falls back to scale.ticks() or .domain().

# tickValuesRadialScaleInput<Scale>[] | undefined

An array of values that determine the number and values of the radial ticks. Falls back to scale.ticks() or .domain().

# topnumber | undefined

Top offset to apply to glyph g element container. A top pixel offset applied to the entire grid group.

Exports