Chart primitives

Layouts & specialized

Interactions

SVG utilities

Data utilities

Umbrella package

visx

@visx/shape

Shapes are the core elements of visx. Most of what you see on the screen, like lines, bars, and areas are all made with shape primitives.

Installation

npm install --save @visx/shape

Examples

Radial Lines

<Shape.LineRadial />

Pies & donuts

<Shape.Pie />

Streamgraph

<Shape.Stack />

Area difference chart

<Threshold />

Stacked Areas

<Shape.AreaStack />

Bar Stack Horizontal

<Shape.BarStackHorizontal />

Bar Group

<Shape.BarGroup />

Radar

<Shape.Line /> + <Shape.LineRadial />

Link Types

<Shape.Link* />

APIs

#arc()

# cornerRadiusnumber | Accessor<Datum, number> | undefined

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

# endAnglenumber | Accessor<Datum, number> | undefined

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

# innerRadiusnumber | Accessor<Datum, number> | undefined

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

# 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 | Accessor<Datum, number> | undefined

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

#<Arc />

# children((args: { path: Arc<any, Datum>; }) => ReactNode) | undefined

Override render function which is passed the configured arc generator as input.

# classNamestring | undefined

className applied to path 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 | Accessor<Datum, number> | undefined

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

# 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.

# 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 | Accessor<Datum, number> | undefined

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

#area()

# curveCurveFactory | undefined

Sets the curve factory (from @visx/curve or d3-curve) for the area generator. Defaults to curveLinear.

# definedAccessorForArrayItem<Datum, boolean> | undefined

The defined accessor for the shape. The final area shape includes all points for which this function returns true. By default all points are defined.

# xnumber | AccessorForArrayItem<Datum, number> | undefined

Sets the x0 accessor function, and sets x1 to null.

# x0number | AccessorForArrayItem<Datum, number> | undefined

Specifies the x0 accessor function which defaults to d => d0.

# x1number | AccessorForArrayItem<Datum, number> | undefined

Specifies the x1 accessor function which defaults to null.

# ynumber | AccessorForArrayItem<Datum, number> | undefined

Sets the y0 accessor function, and sets y1 to null.

# y0number | AccessorForArrayItem<Datum, number> | undefined

Specifies the y0 accessor function which defaults to d => 0.

# y1number | AccessorForArrayItem<Datum, number> | undefined

Specifies the y1 accessor function which defaults to d => d1.

#<Area />

# children((args: { path: Area<Datum>; }) => ReactNode) | undefined

Override render function which is passed the configured area generator as input.

# classNamestring | undefined

Classname applied to path element.

# curveCurveFactory | undefined

Sets the curve factory (from @visx/curve or d3-curve) for the area generator. Defaults to curveLinear.

# dataDatum[] | undefined

Array of data for which to generate an area shape.

Default []

# definedAccessorForArrayItem<Datum, boolean> | undefined

The defined accessor for the shape. The final area shape includes all points for which this function returns true. By default all points are defined.

Default () => true

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

React RefObject passed to the path element.

# xnumber | AccessorForArrayItem<Datum, number> | undefined

Sets the x0 accessor function, and sets x1 to null.

# x0number | AccessorForArrayItem<Datum, number> | undefined

Specifies the x0 accessor function which defaults to d => d0.

# x1number | AccessorForArrayItem<Datum, number> | undefined

Specifies the x1 accessor function which defaults to null.

# ynumber | AccessorForArrayItem<Datum, number> | undefined

Sets the y0 accessor function, and sets y1 to null.

# y0number | AccessorForArrayItem<Datum, number> | undefined

Specifies the y0 accessor function which defaults to d => 0.

# y1number | AccessorForArrayItem<Datum, number> | undefined

Specifies the y1 accessor function which defaults to d => d1.

#<AreaClosed />

# yScaleValueOf<ScaleTypeToD3Scale<number, any, any>>required

# children((args: { path: Area<Datum>; }) => ReactNode) | undefined

Override render function which is passed the configured area generator as input.

# classNamestring | undefined

Classname applied to path element.

# curveCurveFactory | undefined

Sets the curve factory (from @visx/curve or d3-curve) for the area generator. Defaults to curveLinear.

# dataDatum[] | undefined

Array of data for which to generate an area shape.

Default []

# definedAccessorForArrayItem<Datum, boolean> | undefined

The defined accessor for the shape. The final area shape includes all points for which this function returns true. By default all points are defined.

Default () => true

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

React RefObject passed to the path element.

# xnumber | AccessorForArrayItem<Datum, number> | undefined

Sets the x0 accessor function, and sets x1 to null.

# x0number | AccessorForArrayItem<Datum, number> | undefined

Specifies the x0 accessor function which defaults to d => d0.

# x1number | AccessorForArrayItem<Datum, number> | undefined

Specifies the x1 accessor function which defaults to null.

# ynumber | AccessorForArrayItem<Datum, number> | undefined

Sets the y0 accessor function, and sets y1 to null.

# y0number | AccessorForArrayItem<Datum, number> | undefined

Specifies the y0 accessor function which defaults to d => 0.

# y1number | AccessorForArrayItem<Datum, number> | undefined

Specifies the y1 accessor function which defaults to d => d1.

#<AreaStack />

# dataDatum[]required

Array of data for which generates a stack.

# children

((args: { stacks: Series<Datum, Key>[]; path: Area<SeriesPoint<Datum>>; stack: Stack<any, Datum, Key>; }) => ReactNode) | undefined

Override render function which is passed the configured arc generator as input.

# classNamestring | undefined

className applied to path element.

# color((key: Key, index: number) => string) | undefined

Returns a color for a given stack key and index.

# curveCurveFactory | undefined

Sets the curve factory (from @visx/curve or d3-curve) for the area generator. Defaults to curveLinear.

# definedAccessorForArrayItem<SeriesPoint<Datum>, boolean> | undefined

The defined accessor for the shape. The final area shape includes all points for which this function returns true. By default all points are defined.

# keysKey[] | undefined

Array of keys corresponding to stack layers.

# leftnumber | undefined

Left offset of rendered Stack.

# offset"none" | "expand" | "diverging" | "silhouette" | "wiggle" | undefined

Sets the stack offset to the pre-defined d3 offset, see https://github.com/d3/d3-shape#stack_offset.

# order"none" | "ascending" | "descending" | "reverse" | "insideout" | undefined

Sets the stack order to the pre-defined d3 function, see https://github.com/d3/d3-shape#stack_order.

# topnumber | undefined

Top offset of rendered Stack.

# valuenumber | ((d: Datum, key: Key) => number) | undefined

Sets the value accessor for a Datum, which defaults to dkey.

# xAccessorForArrayItem<SeriesPoint<Datum>, number> | undefined

Sets the x0 accessor function, and sets x1 to null.

# x0AccessorForArrayItem<SeriesPoint<Datum>, number> | undefined

Specifies the x0 accessor function which defaults to d => d0.

# x1AccessorForArrayItem<SeriesPoint<Datum>, number> | undefined

Specifies the x1 accessor function which defaults to null.

# y0AccessorForArrayItem<SeriesPoint<Datum>, number> | undefined

Specifies the y0 accessor function which defaults to d => 0.

# y1AccessorForArrayItem<SeriesPoint<Datum>, number> | undefined

Specifies the y1 accessor function which defaults to d => d1.

#<Bar />

# classNamestring | undefined

className to apply to rect element.

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

reference to rect element.

#<BarGroup />

# color(key: Key, index: number) => stringrequired

Returns the desired color for a bar with a given key and index.

# dataDatum[]required

Array of data for which to generate grouped bars.

# heightnumberrequired

Total height of the y-axis.

# keysKey[]required

Array of keys corresponding to stack layers.

# x0Accessor<Datum, ScaleInput<X0Scale>>required

Returns the value mapped to the x0 (group position) of a bar

# x0ScaleX0Scalerequired

@visx /scale or d3-scale that takes an x0 value (position of group) and maps it to an x0 axis position of the group.

# x1ScaleX1Scalerequired

@visx /scale or d3-scale that takes a group key and maps it to an x axis position (within a group).

# yScaleValueOf<ScaleTypeToD3Scale<number, any, any>>required

@visx /scale or d3-scale that takes an y value (Datumkey) and maps it to a y axis position.

# children((barGroups: BarGroup<Key>[]) => ReactNode) | undefined

Override render function which is passed the computed BarGroups.

# classNamestring | undefined

className applied to Bars.

# leftnumber | undefined

Left offset of rendered Bars.

# topnumber | undefined

Top offset of rendered Bars.

#<BarGroupHorizontal />

# color(key: Key, index: number) => stringrequired

Returns the desired color for a bar with a given key and index.

# dataDatum[]required

Array of data for which to generate grouped bars.

# keysKey[]required

Array of keys corresponding to stack layers.

# widthnumberrequired

Total width of the x-axis.

# xScaleValueOf<ScaleTypeToD3Scale<number, any, any>>required

@visx /scale or d3-scale that takes a key value (Datumkey) and maps it to an x axis position (width of bar).

# y0Accessor<Datum, ScaleInput<Y0Scale>>required

Returns the value mapped to the y0 (position of group) of a bar

# y0ScaleY0Scalerequired

@visx /scale or d3-scale that takes a y0 value (position of group) and maps it to a y axis position.

# y1ScaleY1Scalerequired

@visx /scale or d3-scale that takes a group key and maps it to an y axis position (within a group).

# children((barGroups: BarGroupHorizontal<Key>[]) => ReactNode) | undefined

Override render function which is passed the computed Ba/rGroups.

# classNamestring | undefined

className applied to Bars.

# leftnumber | undefined

Left offset of rendered Bars.

# topnumber | undefined

Top offset of rendered Bars.

# x((barValue: number) => number) | undefined

Returns the value (Datumkey) mapped to the x of a bar

Default (/** val */) => 0

#<BarRounded />

# heightnumberrequired

height of the bar starting from y

# radiusnumberrequired

corner radius of the bar. clamped to center of the shorter side of the bar (Math.min(width,height) / 2)

# widthnumberrequired

width of the bar starting from x

# xnumberrequired

left position of the bar

# ynumberrequired

top position of the bar

# allboolean | undefined

apply corner radius to top left corner, top right corner, bottom right corner, and bottom left corner

Default false

# bottomboolean | undefined

apply corner radius to bottom right corner, and bottom left corner

Default false

# bottomLeftboolean | undefined

apply corner radius to bottom left corner

Default false

# bottomRightboolean | undefined

apply corner radius to bottom right

Default false

# classNamestring | undefined

className to apply to path element.

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

reference to path element.

# leftboolean | undefined

apply corner radius to top left corner, and bottom left corner

Default false

# rightboolean | undefined

apply corner radius to top right corner, and bottom right corner

Default false

# topboolean | undefined

apply corner radius to top left corner, and top right corner

Default false

# topLeftboolean | undefined

apply corner radius to top left corner

Default false

# topRightboolean | undefined

apply corner radius to top right corner

Default false

#<BarStack />

# color(key: Key, index: number) => stringrequired

Returns the desired color for a bar with a given key and index.

# dataDatum[]required

Array of data for which generates a stack.

# xAccessor<Datum, ScaleInput<XScale>>required

Returns the value mapped to the x of a bar.

# xScaleXScalerequired

@visx /scale or d3-scale that takes an x value and maps it to an x axis position.

# yScaleYScalerequired

@visx /scale or d3-scale that takes a y value and maps it to an y axis position.

# children((stacks: BarStack<Datum, Key>[]) => ReactNode) | undefined

Override render function which is passed the configured stack generator as input.

# classNamestring | undefined

className applied to path element.

# keysKey[] | undefined

Array of keys corresponding to stack layers.

# leftnumber | undefined

Left offset of rendered Stack.

# offset"none" | "expand" | "diverging" | "silhouette" | "wiggle" | undefined

Sets the stack offset to the pre-defined d3 offset, see https://github.com/d3/d3-shape#stack_offset.

# order"none" | "ascending" | "descending" | "reverse" | "insideout" | undefined

Sets the stack order to the pre-defined d3 function, see https://github.com/d3/d3-shape#stack_order.

# topnumber | undefined

Top offset of rendered Stack.

# valuenumber | ((d: Datum, key: Key) => number) | undefined

Sets the value accessor for a Datum, which defaults to dkey.

# y0Accessor<SeriesPoint<Datum>, ScaleInput<YScale>> | undefined

Returns the value mapped to the y0 of a bar.

# y1Accessor<SeriesPoint<Datum>, ScaleInput<YScale>> | undefined

Returns the value mapped to the y1 of a bar.

#<BarStackHorizontal />

# color(key: Key, index: number) => stringrequired

Returns the desired color for a bar with a given key and index.

# dataDatum[]required

Array of data for which generates a stack.

# xScaleXScalerequired

@visx /scale or d3-scale that takes an x value and maps it to an x axis position.

# yAccessor<Datum, ScaleInput<YScale>>required

Returns the value mapped to the y of a bar.

# yScaleYScalerequired

@visx /scale or d3-scale that takes a y value and maps it to an y axis position.

# children((stacks: BarStack<Datum, Key>[]) => ReactNode) | undefined

Override render function which is passed the configured stack generator as input.

# classNamestring | undefined

className applied to path element.

# keysKey[] | undefined

Array of keys corresponding to stack layers.

# leftnumber | undefined

Left offset of rendered Stack.

# offset"none" | "expand" | "diverging" | "silhouette" | "wiggle" | undefined

Sets the stack offset to the pre-defined d3 offset, see https://github.com/d3/d3-shape#stack_offset.

# order"none" | "ascending" | "descending" | "reverse" | "insideout" | undefined

Sets the stack order to the pre-defined d3 function, see https://github.com/d3/d3-shape#stack_order.

# topnumber | undefined

Top offset of rendered Stack.

# valuenumber | ((d: Datum, key: Key) => number) | undefined

Sets the value accessor for a Datum, which defaults to dkey.

# x0Accessor<SeriesPoint<Datum>, ScaleInput<XScale>> | undefined

Returns the value mapped to the x0 of a bar.

# x1Accessor<SeriesPoint<Datum>, ScaleInput<XScale>> | undefined

Returns the value mapped to the x1 of a bar.

#<Circle />

# classNamestring | undefined

className to apply to circle element.

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

reference to circle element.

#degreesToRadians()

#getPoint()

# sidenumberrequired

# center{ x: number; y: number; } | undefined

Polygon center position.

# rotatenumber | undefined

Rotation transform to apply to polygon.

Default 0

# sidesnumber | undefined

Number of polygon sides.

Default 4

# sizenumber | undefined

Size of the shape.

Default 25

#getPoints()

# center{ x: number; y: number; } | undefined

Polygon center position.

# rotatenumber | undefined

Rotation transform to apply to polygon.

Default 0

# sidesnumber | undefined

Number of polygon sides.

Default 4

# sizenumber | undefined

Size of the shape.

Default 25

#line()

# curveCurveFactory | CurveFactoryLineOnly | undefined

Sets the curve factory (from @visx/curve or d3-curve) for the line generator. Defaults to curveLinear.

# definedAccessorForArrayItem<Datum, boolean> | undefined

The defined accessor for the shape. The final line shape includes all points for which this function returns true. By default all points are defined.

# xnumber | AccessorForArrayItem<Datum, number> | undefined

Sets the x0 accessor function, and sets x1 to null.

# ynumber | AccessorForArrayItem<Datum, number> | undefined

Sets the y0 accessor function, and sets y1 to null.

#<Line />

# classNamestring | undefined

className to apply to line element.

# fillstring | undefined

fill color applied to line element.

Default transparent

# fromPoint | undefined

Starting x,y point of the line.

Default { x: 0, y: 0 }

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

reference to line element.

# toPoint | undefined

Ending x,y point of the line.

Default { x: 1, y: 1 }

#<LinePath />

# children((args: { path: Line<Datum>; }) => ReactNode) | undefined

Override render function which is passed the configured path generator as input.

# classNamestring | undefined

className applied to path element.

# curveCurveFactory | CurveFactoryLineOnly | undefined

Sets the curve factory (from @visx/curve or d3-curve) for the line generator. Defaults to curveLinear.

# dataDatum[] | undefined

Array of data for which to generate a line shape.

Default []

# definedAccessorForArrayItem<Datum, boolean> | undefined

The defined accessor for the shape. The final line shape includes all points for which this function returns true. By default all points are defined.

Default () => true

# fillstring | undefined

Fill color of the path element.

Default transparent

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

React RefObject passed to the path element.

# xnumber | AccessorForArrayItem<Datum, number> | undefined

Sets the x0 accessor function, and sets x1 to null.

# ynumber | AccessorForArrayItem<Datum, number> | undefined

Sets the y0 accessor function, and sets y1 to null.

#<LineRadial />

# anglenumber | AccessorForArrayItem<Datum, number> | undefined

Returns the angle value in radians for a given Datum, with 0 at -y (12 o’clock).

# children((args: { path: RadialLine<Datum>; }) => ReactNode) | undefined

Override render function which is passed the configured path generator as input.

# classNamestring | undefined

className applied to path element.

# curveCurveFactory | CurveFactoryLineOnly | undefined

Sets the curve factory (from @visx/curve or d3-curve) for the radialLine generator. Defaults to curveLinear.

# dataDatum[] | undefined

Array of data for which to generate a line shape.

Default []

# definedAccessorForArrayItem<Datum, boolean> | undefined

The defined accessor for the shape. The final radialLine shape includes all points for which this function returns true. By default all points are defined.

# fillstring | undefined

Fill color of the path element.

Default transparent

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

React RefObject passed to the path element.

# radiusnumber | AccessorForArrayItem<Datum, number> | undefined

Returns the radius value in radians for a given Datum, with 0 at the center.

#<LinkHorizontalCurve />

# dataLinkrequired

Datum for which to render a link.

# children((args: { path: PathType<Link>; }) => ReactNode) | undefined

Render function override which is passed the configured path generator as input.

# classNamestring | undefined

className applied to path element.

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

React ref to the path element.

# pathPathType<Link> | undefined

Path generator, given a link returns a path d attribute string

# percentnumber | undefined

Default 0.2

# source((link: Link) => Node) | undefined

Given a link, returns the source node.

# target((link: Link) => Node) | undefined

Given a link, returns the target node.

# x((node: Node) => number) | undefined

Given a node, returns its x coordinate.

# y((node: Node) => number) | undefined

Given a node, returns its y coordinate.

#<LinkHorizontalLine />

# dataLinkrequired

Datum for which to render a link.

# children((args: { path: PathType<Link>; }) => ReactNode) | undefined

Render function override which is passed the configured path generator as input.

# classNamestring | undefined

className applied to path element.

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

React ref to the path element.

# pathPathType<Link> | undefined

Path generator, given a link returns a path d attribute string

# source((link: Link) => Node) | undefined

Given a link, returns the source node.

# target((link: Link) => Node) | undefined

Given a link, returns the target node.

# x((node: Node) => number) | undefined

Given a node, returns its x coordinate.

# y((node: Node) => number) | undefined

Given a node, returns its y coordinate.

#<LinkHorizontalStep />

# dataLinkrequired

Datum for which to render a link.

# children((args: { path: PathType<Link>; }) => ReactNode) | undefined

Render function override which is passed the configured path generator as input.

# classNamestring | undefined

className applied to path element.

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

React ref to the path element.

# pathPathType<Link> | undefined

Path generator, given a link returns a path d attribute string

# percentnumber | undefined

Default 0.5

# source((link: Link) => Node) | undefined

Given a link, returns the source node.

# target((link: Link) => Node) | undefined

Given a link, returns the target node.

# x((node: Node) => number) | undefined

Given a node, returns its x coordinate.

# y((node: Node) => number) | undefined

Given a node, returns its y coordinate.

#<LinkRadialCurve />

# dataLinkrequired

Datum for which to render a link.

# children((args: { path: PathType<Link>; }) => ReactNode) | undefined

Render function override which is passed the configured path generator as input.

# classNamestring | undefined

className applied to path element.

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

React ref to the path element.

# pathPathType<Link> | undefined

Path generator, given a link returns a path d attribute string

# percentnumber | undefined

Default 0.2

# source((link: Link) => Node) | undefined

Given a link, returns the source node.

# target((link: Link) => Node) | undefined

Given a link, returns the target node.

# x((node: Node) => number) | undefined

Given a node, returns its x coordinate.

# y((node: Node) => number) | undefined

Given a node, returns its y coordinate.

#<LinkRadialLine />

# dataLinkrequired

Datum for which to render a link.

# children((args: { path: PathType<Link>; }) => ReactNode) | undefined

Render function override which is passed the configured path generator as input.

# classNamestring | undefined

className applied to path element.

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

React ref to the path element.

# pathPathType<Link> | undefined

Path generator, given a link returns a path d attribute string

# source((link: Link) => Node) | undefined

Given a link, returns the source node.

# target((link: Link) => Node) | undefined

Given a link, returns the target node.

# x((node: Node) => number) | undefined

Given a node, returns its x coordinate.

# y((node: Node) => number) | undefined

Given a node, returns its y coordinate.

#<LinkRadialStep />

# dataLinkrequired

Datum for which to render a link.

# children((args: { path: PathType<Link>; }) => ReactNode) | undefined

Render function override which is passed the configured path generator as input.

# classNamestring | undefined

className applied to path element.

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

React ref to the path element.

# pathPathType<Link> | undefined

Path generator, given a link returns a path d attribute string

# percentnumber | undefined

# source((link: Link) => Node) | undefined

Given a link, returns the source node.

# target((link: Link) => Node) | undefined

Given a link, returns the target node.

# x((node: Node) => number) | undefined

Given a node, returns its x coordinate.

# y((node: Node) => number) | undefined

Given a node, returns its y coordinate.

#<LinkVerticalCurve />

# dataLinkrequired

Datum for which to render a link.

# children((args: { path: PathType<Link>; }) => ReactNode) | undefined

Render function override which is passed the configured path generator as input.

# classNamestring | undefined

className applied to path element.

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

React ref to the path element.

# pathPathType<Link> | undefined

Path generator, given a link returns a path d attribute string

# percentnumber | undefined

Default 0.2

# source((link: Link) => Node) | undefined

Given a link, returns the source node.

# target((link: Link) => Node) | undefined

Given a link, returns the target node.

# x((node: Node) => number) | undefined

Given a node, returns its x coordinate.

# y((node: Node) => number) | undefined

Given a node, returns its y coordinate.

#<LinkVerticalLine />

# dataLinkrequired

Datum for which to render a link.

# children((args: { path: PathType<Link>; }) => ReactNode) | undefined

Render function override which is passed the configured path generator as input.

# classNamestring | undefined

className applied to path element.

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

React ref to the path element.

# pathPathType<Link> | undefined

Path generator, given a link returns a path d attribute string

# source((link: Link) => Node) | undefined

Given a link, returns the source node.

# target((link: Link) => Node) | undefined

Given a link, returns the target node.

# x((node: Node) => number) | undefined

Given a node, returns its x coordinate.

# y((node: Node) => number) | undefined

Given a node, returns its y coordinate.

#<LinkVerticalStep />

# dataLinkrequired

Datum for which to render a link.

# children((args: { path: PathType<Link>; }) => ReactNode) | undefined

Render function override which is passed the configured path generator as input.

# classNamestring | undefined

className applied to path element.

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

React ref to the path element.

# pathPathType<Link> | undefined

Path generator, given a link returns a path d attribute string

# percentnumber | undefined

Default 0.5

# source((link: Link) => Node) | undefined

Given a link, returns the source node.

# target((link: Link) => Node) | undefined

Given a link, returns the target node.

# x((node: Node) => number) | undefined

Given a node, returns its x coordinate.

# y((node: Node) => number) | undefined

Given a node, returns its y coordinate.

#pathHorizontalCurve()

# percentnumberrequired

# source(link: Link) => Node

Given a link, returns the source node.

# target(link: Link) => Node

Given a link, returns the target node.

# x(node: Node) => number

Given a node, returns its x coordinate.

# y(node: Node) => number

Given a node, returns its y coordinate.

#pathHorizontalDiagonal()

# source(link: Link) => Node

Given a link, returns the source node.

# target(link: Link) => Node

Given a link, returns the target node.

# x(node: Node) => number

Given a node, returns its x coordinate.

# y(node: Node) => number

Given a node, returns its y coordinate.

#pathHorizontalLine()

# source(link: Link) => Node

Given a link, returns the source node.

# target(link: Link) => Node

Given a link, returns the target node.

# x(node: Node) => number

Given a node, returns its x coordinate.

# y(node: Node) => number

Given a node, returns its y coordinate.

#pathHorizontalStep()

# percentnumberrequired

# source(link: Link) => Node

Given a link, returns the source node.

# target(link: Link) => Node

Given a link, returns the target node.

# x(node: Node) => number

Given a node, returns its x coordinate.

# y(node: Node) => number

Given a node, returns its y coordinate.

#pathRadialCurve()

# percentnumberrequired

# source(link: Link) => Node

Given a link, returns the source node.

# target(link: Link) => Node

Given a link, returns the target node.

# x(node: Node) => number

Given a node, returns its x coordinate.

# y(node: Node) => number

Given a node, returns its y coordinate.

#pathRadialDiagonal()

# angle(node: Node) => number

Given a node, returns its x coordinate.

# radius(node: Node) => number

Given a node, returns its y coordinate.

# source(link: Link) => Node

Given a link, returns the source node.

# target(link: Link) => Node

Given a link, returns the target node.

#pathRadialLine()

# source(link: Link) => Node

Given a link, returns the source node.

# target(link: Link) => Node

Given a link, returns the target node.

# x(node: Node) => number

Given a node, returns its x coordinate.

# y(node: Node) => number

Given a node, returns its y coordinate.

#pathRadialStep()

# source(link: Link) => Node

Given a link, returns the source node.

# target(link: Link) => Node

Given a link, returns the target node.

# x(node: Node) => number

Given a node, returns its x coordinate.

# y(node: Node) => number

Given a node, returns its y coordinate.

#pathVerticalCurve()

# percentnumberrequired

# source(link: Link) => Node

Given a link, returns the source node.

# target(link: Link) => Node

Given a link, returns the target node.

# x(node: Node) => number

Given a node, returns its x coordinate.

# y(node: Node) => number

Given a node, returns its y coordinate.

#pathVerticalDiagonal()

# source(link: Link) => Node

Given a link, returns the source node.

# target(link: Link) => Node

Given a link, returns the target node.

# x(node: Node) => number

Given a node, returns its x coordinate.

# y(node: Node) => number

Given a node, returns its y coordinate.

#pathVerticalLine()

# source(link: Link) => Node

Given a link, returns the source node.

# target(link: Link) => Node

Given a link, returns the target node.

# x(node: Node) => number

Given a node, returns its x coordinate.

# y(node: Node) => number

Given a node, returns its y coordinate.

#pathVerticalStep()

# percentnumberrequired

# source(link: Link) => Node

Given a link, returns the source node.

# target(link: Link) => Node

Given a link, returns the target node.

# x(node: Node) => number

Given a node, returns its x coordinate.

# y(node: Node) => number

Given a node, returns its y coordinate.

#pie()

# endAnglenumber | AngleAccessor<Datum> | undefined

Returns the end angle of the overall Pie shape (the last value ends at endAngle), with 0 at -y (12 o’clock) and positive angles proceeding clockwise.

# padAnglenumber | AngleAccessor<Datum> | undefined

Padding angle of the Pie shape, which sets a fixed linear distance separating adjacent arcs.

# sort((a: Datum, b: Datum) => number) | null | undefined

Comparator function to sort arcs, overridden by sortValues if defined. If sort and sortValues are null, arcs match input data order.

# sortValues((a: number, b: number) => number) | null | undefined

Comparator function to sort arc values, overrides sort if defined. If sort and sortValues are null, arcs match input data order.

# startAnglenumber | AngleAccessor<Datum> | undefined

Returns the start angle of the overall Pie shape (the first value starts at startAngle), with 0 at -y (12 o’clock) and positive angles proceeding clockwise.

# valueAccessor<Datum, number> | undefined

Invoked for each datum, returns the value for a given Pie segment/arc datum.

#<Pie />

# centroid((xyCoords: [number, number], arc: PieArcDatum<Datum>) => ReactNode) | undefined

Optional render function invoked for each Datum to render something (e.g., a Label) at each pie centroid.

# children((provided: ProvidedProps<Datum>) => ReactNode) | undefined

Render function override which is passed the configured arc generator as input.

# classNamestring | undefined

className applied to path element.

# cornerRadiusnumber | Accessor<PieArcDatum<Datum>, number> | undefined

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

# dataDatum[] | undefined

Array of data to generate a Pie for.

Default []

# endAnglenumber | AngleAccessor<Datum> | undefined

Returns the end angle of the overall Pie shape (the last value ends at endAngle), with 0 at -y (12 o’clock) and positive angles proceeding clockwise.

# fillstring | StringAccessor<Datum> | undefined

Optional accessor function to return the fill string value of a given arc.

Default ""

# innerRadiusnumber | Accessor<PieArcDatum<Datum>, number> | undefined

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

Default 0

# leftnumber | undefined

Left offset of rendered Pie.

# outerRadiusnumber | Accessor<PieArcDatum<Datum>, number> | undefined

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

# padAnglenumber | AngleAccessor<Datum> | undefined

Padding angle of the Pie shape, which sets a fixed linear distance separating adjacent arcs.

# padRadiusnumber | Accessor<PieArcDatum<Datum>, number> | undefined

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

# pieSort((a: Datum, b: Datum) => number) | null | undefined

Comparator function to sort arcs, overridden by pieSortValues if defined. If pieSort and pieSortValues are null, arcs match input data order.

# pieSortValues((a: number, b: number) => number) | null | undefined

Comparator function to sort arc values, overrides pieSort if defined. If pieSort and pieSortValues are null, arcs match input data order.

# pieValueAccessor<Datum, number> | undefined

Invoked for each datum, returns the value for a given Pie segment/arc datum.

# startAnglenumber | AngleAccessor<Datum> | undefined

Returns the start angle of the overall Pie shape (the first value starts at startAngle), with 0 at -y (12 o’clock) and positive angles proceeding clockwise.

# topnumber | undefined

Top offset of rendered Pie.

#<Polygon />

# center{ x: number; y: number; } | undefined

Polygon center position.

# children((args: { points: [number, number][]; }) => ReactNode) | undefined

Render function override which is passed the generated polygon points.

# classNamestring | undefined

className to apply to polygon element.

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

Reference to polygon element.

# points[number, number][] | undefined

Points to use to render the polygon. If this is defined, sides, size, rotate, and center are ignored.

# rotatenumber | undefined

Rotation transform to apply to polygon.

Default 0

# sidesnumber | undefined

Number of polygon sides.

Default 4

# sizenumber | undefined

Size of the shape.

Default 25

#radialLine()

# anglenumber | AccessorForArrayItem<Datum, number> | undefined

Returns the angle value in radians for a given Datum, with 0 at -y (12 o’clock).

# curveCurveFactory | CurveFactoryLineOnly | undefined

Sets the curve factory (from @visx/curve or d3-curve) for the radialLine generator. Defaults to curveLinear.

# definedAccessorForArrayItem<Datum, boolean> | undefined

The defined accessor for the shape. The final radialLine shape includes all points for which this function returns true. By default all points are defined.

# radiusnumber | AccessorForArrayItem<Datum, number> | undefined

Returns the radius value in radians for a given Datum, with 0 at the center.

#<SplitLinePath />

# segmentationLineSegmentationrequired

How to segment the line

x: Split based on x-position, assuming x values increase only (segment[i].x > segment[i-1].x) or decrease only (segment[i].x < segment[i-1].x).
y: Split based on y-position, assuming y values increase only (segment[i].y > segment[i-1].y) or decrease only (segment[i].y < segment[i-1].y).
length: Assuming the path length between consecutive points are equal.

Default is x.

# segmentsDatum[][]required

Array of data segments, where each segment will be a separate path in the rendered line.

# styles

Pick<SVGProps<SVGPathElement>, "string" | "className" | "width" | "height" | "scale" | "color" | "id" | "lang" | "max" | "media" | "method" | "min" | ... 454 more ... | "key">[]

required

Styles to apply to each segment. If fewer styles are specified than the number of segments, they will be re-used.

# childrenSplitLinePathRenderer | undefined

Override render function which is passed the configured path generator as input.

# classNamestring | undefined

className applied to path element.

# curveCurveFactory | CurveFactoryLineOnly | undefined

Sets the curve factory (from @visx/curve or d3-curve) for the line generator. Defaults to curveLinear.

# definedAccessorForArrayItem<Datum, boolean> | undefined

The defined accessor for the shape. The final line shape includes all points for which this function returns true. By default all points are defined.

# sampleRatenumber | undefined

The path will be sampled every sampleRate pixel to generate the returned points. Default is 1 pixel.

# xnumber | AccessorForArrayItem<Datum, number> | undefined

Sets the x0 accessor function, and sets x1 to null.

# ynumber | AccessorForArrayItem<Datum, number> | undefined

Sets the y0 accessor function, and sets y1 to null.

#stack()

# keysKey[] | undefined

Array of keys corresponding to stack layers.

# offset"none" | "expand" | "diverging" | "silhouette" | "wiggle" | undefined

Sets the stack offset to the pre-defined d3 offset, see https://github.com/d3/d3-shape#stack_offset.

# order"none" | "ascending" | "descending" | "reverse" | "insideout" | undefined

Sets the stack order to the pre-defined d3 function, see https://github.com/d3/d3-shape#stack_order.

# valuenumber | ((d: Datum, key: Key) => number) | undefined

Sets the value accessor for a Datum, which defaults to dkey.

#<Stack />

# dataDatum[]required

Array of data for which generates a stack.

# children

((args: { stacks: Series<Datum, Key>[]; path: Area<SeriesPoint<Datum>>; stack: Stack<any, Datum, Key>; }) => ReactNode) | undefined

Override render function which is passed the configured arc generator as input.

# classNamestring | undefined

className applied to path element.

# color((key: Key, index: number) => string) | undefined

Returns a color for a given stack key and index.

# curveCurveFactory | undefined

Sets the curve factory (from @visx/curve or d3-curve) for the area generator. Defaults to curveLinear.

# definedAccessorForArrayItem<SeriesPoint<Datum>, boolean> | undefined

The defined accessor for the shape. The final area shape includes all points for which this function returns true. By default all points are defined.

# keysKey[] | undefined

Array of keys corresponding to stack layers.

# leftnumber | undefined

Left offset of rendered Stack.

# offset"none" | "expand" | "diverging" | "silhouette" | "wiggle" | undefined

Sets the stack offset to the pre-defined d3 offset, see https://github.com/d3/d3-shape#stack_offset.

# order"none" | "ascending" | "descending" | "reverse" | "insideout" | undefined

Sets the stack order to the pre-defined d3 function, see https://github.com/d3/d3-shape#stack_order.

# topnumber | undefined

Top offset of rendered Stack.

# valuenumber | ((d: Datum, key: Key) => number) | undefined

Sets the value accessor for a Datum, which defaults to dkey.

# xAccessorForArrayItem<SeriesPoint<Datum>, number> | undefined

Sets the x0 accessor function, and sets x1 to null.

# x0AccessorForArrayItem<SeriesPoint<Datum>, number> | undefined

Specifies the x0 accessor function which defaults to d => d0.

# x1AccessorForArrayItem<SeriesPoint<Datum>, number> | undefined

Specifies the x1 accessor function which defaults to null.

# y0AccessorForArrayItem<SeriesPoint<Datum>, number> | undefined

Specifies the y0 accessor function which defaults to d => 0.

# y1AccessorForArrayItem<SeriesPoint<Datum>, number> | undefined

Specifies the y1 accessor function which defaults to d => d1.

#stackOffset()

#stackOrder()