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