Chart primitives

Layouts & specialized

Interactions

SVG utilities

Data utilities

Umbrella package

visx

@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

Optionally override rendering of grid lines.

# classNamestring

classname to apply to line group element.

# fillstring

fill color applied to line element.

# fromPoint

Starting x,y point of the line.

# innerRefRef<SVGLineElement>

reference to line element.

# leftnumber

Left offset to apply to glyph g element container.

Default 0

# lineStyleCSSProperties

Styles to apply as grid line style.

# numTicksnumber

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

Default 10

# offsetnumber

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

# strokestring

Grid line stroke color.

Default #eaf0f6

# strokeDasharraystring

Grid line stroke-dasharray attribute.

# strokeWidthReactText

Grid line stroke thickness.

Default 1

# tickValuesScaleInput<Scale>[]

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

# toPoint

Ending x,y point of the line.

# topnumber

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

Optionally override rendering of grid lines.

# classNamestring

classname to apply to line group element.

# fillstring

fill color applied to line element.

# fromPoint

Starting x,y point of the line.

# innerRefRef<SVGLineElement>

reference to line element.

# leftnumber

Left offset to apply to glyph g element container.

Default 0

# lineStyleCSSProperties

Styles to apply as grid line style.

# numTicksnumber

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

Default 10

# offsetnumber

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

# strokestring

Grid line stroke color.

Default #eaf0f6

# strokeDasharraystring

Grid line stroke-dasharray attribute.

# strokeWidthReactText

Grid line stroke thickness.

Default 1

# tickValuesScaleInput<Scale>[]

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

# toPoint

Ending x,y point of the line.

# topnumber

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

classname to apply to line group element.

# columnLineStyleCSSProperties

Style object to apply to GridColumns.

# columnTickValuesScaleInput<XScale>[]

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

# fillstring

fill color applied to line element.

# innerRefRef<SVGLineElement>

reference to line element.

# leftnumber

Left offset to apply to glyph g element container.

# numTicksColumnsnumber

Approximate number of column gridlines.

# numTicksRowsnumber

Approximate number of row gridlines.

# rowLineStyleCSSProperties

Style object to apply to GridRows.

# rowTickValuesScaleInput<YScale>[]

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

# strokestring

Grid line stroke color.

# strokeDasharraystring

Grid line stroke-dasharray attribute.

# strokeWidthReactText

Grid line stroke thickness.

# topnumber

Top offset to apply to glyph g element container.

# widthnumber

Total width of each grid row line.

# xOffsetnumber

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

# yOffsetnumber

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

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

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

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

# classNamestring

classname to apply to line group element.

# cornerRadiusnumber | Accessor<Datum, number>

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

# dataDatum

A Datum for which to generate an arc.

# endAnglenumber

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

Default 2 * Math.PI

# fillstring

The color applied to the fill of the radial lines.

Default transparent

# fillOpacitynumber

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

Default 1

# innerRadiusnumber | Accessor<Datum, number>

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

# innerRefRef<SVGPathElement>

React ref to the path element.

# leftnumber

Left offset to apply to glyph g element container.

Default 0

# lineClassNamestring

The class name applied to all radial lines.

# lineStyleCSSProperties

Styles to apply as grid line style.

# numTicksnumber

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

Default 10

# offsetnumber

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

# outerRadiusnumber | Accessor<Datum, number>

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

# padAnglenumber | Accessor<Datum, number>

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

# padRadiusnumber | Accessor<Datum, number>

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

# startAnglenumber

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

Default 0

# strokestring

Grid line stroke color.

Default #eaf0f6

# strokeDasharraystring

Grid line stroke-dasharray attribute.

# strokeWidthReactText

Grid line stroke thickness.

Default 1

# tickValuesScaleInput<Scale>[]

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

# topnumber

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

Optionally override rendering of grid lines.

# classNamestring

classname to apply to line group element.

# fillstring

fill color applied to line element.

# fromPoint

Starting x,y point of the line.

# innerRadiusnumber

Radius which determines the start position of angle lines.

Default 0

# innerRefRef<SVGLineElement>

reference to line element.

# leftnumber

Left offset to apply to glyph g element container.

Default 0

# lineClassNamestring

The class name applied to all angle lines.

# lineStyleCSSProperties

Styles to apply as grid line style.

# numTicksnumber

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

Default 10

# offsetnumber

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

Grid line stroke color.

Default #eaf0f6

# strokeDasharraystring

Grid line stroke-dasharray attribute.

# strokeWidthReactText

Grid line stroke thickness.

Default 1

# tickValuesScaleInput<Scale>[]

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

# toPoint

Ending x,y point of the line.

# topnumber

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

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

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

Optionally override rendering of grid lines.

# classNamestring

classname to apply to line group element.

# classNameAnglestring

The class name applied to the angle grid group.

# classNameRadialstring

The class name applied to the radial grid group.

# endAnglenumber

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

# fillRadialstring

The color applied to the fill of the radial lines.

# innerRadiusnumber

Radius which determines the start position of angle lines.

# leftnumber

Left offset to apply to glyph g element container.

# lineClassNameAnglestring

Classname applied to all angle line paths.

# lineClassNameRadialstring

Classname applied to all radial line paths.

# lineStyleCSSProperties

Styles to apply as grid line style.

# lineStyleAngle

CSSProperties & LineProps & Pick<SVGProps<SVGLineElement>, "string" | "children" | "scale" | "width" | "height" | "x" | ... 459 more ... | "key">

Style object set as the angle line path style attribute.

# lineStyleRadial

CSSProperties & LineProps & Pick<SVGProps<SVGLineElement>, "string" | "children" | "scale" | "width" | "height" | "x" | ... 459 more ... | "key">

Style object set as the radius line path style attribute.

# numTicksnumber

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

# numTicksAnglenumber

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

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

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

# startAnglenumber

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

# strokestring

Grid line stroke color.

# strokeAnglestring

The color applied to the stroke of the angle lines.

# strokeDasharraystring

Grid line stroke-dasharray attribute.

# strokeDasharrayAnglestring

The pattern of dashes for angle line stroke.

# strokeDasharrayRadialstring

The pattern of dashes for angle radial stroke.

# strokeRadialstring

The color applied to the stroke of the radial lines.

# strokeWidthReactText

Grid line stroke thickness.

# strokeWidthAngleReactText

The pixel value for the width of the angle lines.

# strokeWidthRadialReactText

The pixel value for the width of the radial lines.

# tickValuesAngleScaleInput<Scale>[]

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

# tickValuesRadialScaleInput<Scale>[]

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

# topnumber

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