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
<Axis.AxisBottom />
<Shape.BarStack />
<Threshold />
<Shape.LineRadial />
APIs
#<GridRows />
@visx/scale
or d3-scale
object used to convert value to position.
Total width of each grid row line.
((props: { lines: GridLines; }) => ReactNode) | undefined
Optionally override rendering of grid lines.
string | undefined
classname to apply to line group element.
string | undefined
fill color applied to line element.
Point | undefined
Starting x,y point of the line.
((instance: SVGLineElement | null) => void) | RefObject<SVGLineElement> | null | undefined
reference to line element.
number | undefined
Left offset to apply to glyph g element container.
Default 0
CSSProperties | undefined
Styles to apply as grid line style.
number | undefined
Approximate number of grid lines. Approximate due to d3 alogrithm, specify tickValues
for precise control.
Default 10
number | undefined
Pixel offset to apply as a translation (y- for Rows, x- for Columns) to each grid lines.
string | undefined
Grid line stroke color.
Default #eaf0f6
string | undefined
Grid line stroke-dasharray attribute.
string | number | undefined
Grid line stroke thickness.
Default 1
ScaleInput<Scale>[] | undefined
Exact values used to generate grid lines using scale
.
Overrides numTicks
if specified.
Point | undefined
Ending x,y point of the line.
number | undefined
Top offset to apply to glyph g element container.
Default 0
#<GridColumns />
Total height of each grid column line.
@visx/scale
or d3-scale
object used to convert value to position.
((props: { lines: GridLines; }) => ReactNode) | undefined
Optionally override rendering of grid lines.
string | undefined
classname to apply to line group element.
string | undefined
fill color applied to line element.
Point | undefined
Starting x,y point of the line.
((instance: SVGLineElement | null) => void) | RefObject<SVGLineElement> | null | undefined
reference to line element.
number | undefined
Left offset to apply to glyph g element container.
Default 0
CSSProperties | undefined
Styles to apply as grid line style.
number | undefined
Approximate number of grid lines. Approximate due to d3 alogrithm, specify tickValues
for precise control.
Default 10
number | undefined
Pixel offset to apply as a translation (y- for Rows, x- for Columns) to each grid lines.
string | undefined
Grid line stroke color.
Default #eaf0f6
string | undefined
Grid line stroke-dasharray attribute.
string | number | undefined
Grid line stroke thickness.
Default 1
ScaleInput<Scale>[] | undefined
Exact values used to generate grid lines using scale
.
Overrides numTicks
if specified.
Point | undefined
Ending x,y point of the line.
number | undefined
Top offset to apply to glyph g element container.
Default 0
#<Grid />
@visx/scale
or d3-scale
object used to map from ScaleInput to x-coordinates (GridColumns).
@visx/scale
or d3-scale
object used to map from ScaleInput to y-coordinates (GridRows).
string | undefined
classname to apply to line group element.
CSSProperties | undefined
Style object to apply to GridColumns.
ScaleInput<XScale>[] | undefined
Exact values to be used for GridColumns lines, passed to xScale. Use this if you need precise control over GridColumns values.
string | undefined
fill color applied to line element.
((instance: SVGLineElement | null) => void) | RefObject<SVGLineElement> | null | undefined
reference to line element.
number | undefined
Left offset to apply to glyph g element container.
number | undefined
Approximate number of column gridlines.
number | undefined
Approximate number of row gridlines.
CSSProperties | undefined
Style object to apply to GridRows.
ScaleInput<YScale>[] | undefined
Exact values to be used for GridRows lines, passed to yScale. Use this if you need precise control over GridRows values.
string | undefined
Grid line stroke color.
string | undefined
Grid line stroke-dasharray attribute.
string | number | undefined
Grid line stroke thickness.
number | undefined
Top offset to apply to glyph g element container.
number
Total width of each grid row line.
number | undefined
Pixel offset to apply as an x-translation to each GridColumns line.
number | undefined
Pixel offset to apply as an y-translation to each GridRows line.
#<GridRadial />
@visx/scale
or d3-scale
object used to convert value to position.
number | undefined
If specified, the arc of each radial grid line will have this thickness, useful for fills.
((props: { lines: GridLines; }) => ReactNode) | (() => ReactNode) | undefined
Optionally override rendering of grid lines. Child components to the Arc.
string | undefined
classname to apply to line group element.
number | Accessor<Datum, number> | undefined
Number or accessor function which returns a number, which defines the arc cornerRadius.
Datum | undefined
A Datum for which to generate an arc.
number | undefined
The end angle of the arc of radial grid lines in radians.
Default 2 * Math.PI
string | undefined
The color applied to the fill of the radial lines.
Default transparent
number | undefined
The fill opacity applied to the fill of the radial lines.
Default 1
number | Accessor<Datum, number> | undefined
Number or accessor function which returns a number, which defines the arc innerRadius.
((instance: SVGPathElement | null) => void) | RefObject<SVGPathElement> | null | undefined
React ref to the path element.
number | undefined
Left offset to apply to glyph g element container.
Default 0
string | undefined
The class name applied to all radial lines.
CSSProperties | undefined
Styles to apply as grid line style.
number | undefined
Approximate number of grid lines. Approximate due to d3 alogrithm, specify tickValues
for precise control.
Default 10
number | undefined
Pixel offset to apply as a translation (y- for Rows, x- for Columns) to each grid lines.
number | Accessor<Datum, number> | undefined
Number or accessor function which returns a number, which defines the arc outerRadius.
number | Accessor<Datum, number> | undefined
Number or accessor function which returns a number, which defines the arc padAngle.
number | Accessor<Datum, number> | undefined
Number or accessor function which returns a number, which defines the arc padRadius.
number | undefined
The start angle of the arc of radial grid lines in radians.
Default 0
string | undefined
Grid line stroke color.
Default #eaf0f6
string | undefined
Grid line stroke-dasharray attribute.
string | number | undefined
Grid line stroke thickness.
Default 1
ScaleInput<Scale>[] | undefined
Exact values used to generate grid lines using scale
.
Overrides numTicks
if specified.
number | undefined
Top offset to apply to glyph g element container.
Default 0
#<GridAngle />
@visx/scale
or d3-scale
object used to convert value to angle.
((props: { lines: GridLines; }) => ReactNode) | undefined
Optionally override rendering of grid lines.
string | undefined
classname to apply to line group element.
string | undefined
fill color applied to line element.
Point | undefined
Starting x,y point of the line.
number | undefined
Radius which determines the start position of angle lines.
Default 0
((instance: SVGLineElement | null) => void) | RefObject<SVGLineElement> | null | undefined
reference to line element.
number | undefined
Left offset to apply to glyph g element container.
Default 0
string | undefined
The class name applied to all angle lines.
CSSProperties | undefined
Styles to apply as grid line style.
number | undefined
Approximate number of grid lines. Approximate due to d3 alogrithm, specify tickValues
for precise control.
Default 10
number | undefined
Pixel offset to apply as a translation (y- for Rows, x- for Columns) to each grid lines.
number
Radius which determines the end position of angle lines.
Default 0
string | undefined
Grid line stroke color.
Default #eaf0f6
string | undefined
Grid line stroke-dasharray attribute.
string | number | undefined
Grid line stroke thickness.
Default 1
ScaleInput<Scale>[] | undefined
Exact values used to generate angle grid lines using scale
.
Overrides numTicks
if specified.
Point | undefined
Ending x,y point of the line.
number | undefined
Top offset to apply to glyph g element container.
Default 0
#<GridPolar />
Radius which determines the end position of angle lines.
number | undefined
If specified, the arc of each radial grid line will have this thickness, useful for fills.
((props: { lines: GridLines; }) => ReactNode) | undefined
Optionally override rendering of grid lines.
string | undefined
classname to apply to line group element.
string | undefined
The class name applied to the angle grid group.
string | undefined
The class name applied to the radial grid group.
number | undefined
The end angle of the arc of radial grid lines in radians.
string | undefined
The color applied to the fill of the radial lines.
number | undefined
Radius which determines the start position of angle lines.
number | undefined
Left offset to apply to glyph g element container.
string | undefined
Classname applied to all angle line paths.
string | undefined
Classname applied to all radial line paths.
CSSProperties | undefined
Styles to apply as grid line style.
(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.
(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.
number | undefined
Approximate number of grid lines. Approximate due to d3 alogrithm, specify tickValues
for precise control.
number | 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
number | 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
number | undefined
Pixel offset to apply as a translation (y- for Rows, x- for Columns) to each grid lines.
number | undefined
The start angle of the arc of radial grid lines in radians.
string | undefined
Grid line stroke color.
string | undefined
The color applied to the stroke of the angle lines.
string | undefined
Grid line stroke-dasharray attribute.
string | undefined
The pattern of dashes for angle line stroke.
string | undefined
The pattern of dashes for angle radial stroke.
string | undefined
The color applied to the stroke of the radial lines.
string | number | undefined
Grid line stroke thickness.
string | number | undefined
The pixel value for the width of the angle lines.
string | number | undefined
The pixel value for the width of the radial lines.
ScaleInput<Scale>[] | undefined
An array of values that determine the number and values of the angle ticks. Falls
back to scale.ticks()
or .domain()
.
ScaleInput<Scale>[] | undefined
An array of values that determine the number and values of the radial ticks. Falls
back to scale.ticks()
or .domain()
.
number | undefined
Top offset to apply to glyph g element container. A top pixel offset applied to the entire grid group.