@vx/shape

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

Installation

npm install --save @vx/shape

Examples

Components

APIs

#<Arc />

# Arc.children(args: { path: Arc<any, Datum>; }) => ReactNodeoptional

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

# Arc.classNamestringoptional

className applied to path element.

# Arc.cornerRadiusnumber | NumberAccessor<Datum>optional

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

# Arc.dataDatumoptional

A Datum for which to generate an arc.

# Arc.endAnglenumber | NumberAccessor<Datum>optional

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

# Arc.innerRadiusnumber | NumberAccessor<Datum>optional

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

# Arc.innerRefRef<SVGPathElement>optional

React ref to the path element.

# Arc.outerRadiusnumber | NumberAccessor<Datum>optional

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

# Arc.padAnglenumber | NumberAccessor<Datum>optional

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

# Arc.padRadiusnumber | NumberAccessor<Datum>optional

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

# Arc.startAnglenumber | NumberAccessor<Datum>optional

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

#<Area />

# Area.children(args: { path: Area<Datum>; }) => ReactNodeoptional

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

# Area.classNamestringoptional

Classname applied to path element.

# Area.curveCurveFactoryoptional

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

# Area.dataDatum[]optional

Array of data for which to generate an area shape.

Default []

# Area.defined(datum: Datum, index: number, data: Datum[]) => booleanoptional

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

# Area.innerRefRef<SVGPathElement>optional

React RefObject passed to the path element.

# Area.xnumber | NumberAccessor<Datum>optional

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

# Area.x0number | NumberAccessor<Datum>optional

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

# Area.x1number | NumberAccessor<Datum>optional

Specifies the x1 accessor function which defaults to null.

# Area.ynumber | NumberAccessor<Datum>optional

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

# Area.y0number | NumberAccessor<Datum>optional

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

# Area.y1number | NumberAccessor<Datum>optional

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

#<AreaClosed />

# AreaClosed.yScaleScaleType<any, number>required
# AreaClosed.children(args: { path: Area<Datum>; }) => ReactNodeoptional

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

# AreaClosed.classNamestringoptional

Classname applied to path element.

# AreaClosed.curveCurveFactoryoptional

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

# AreaClosed.dataDatum[]optional

Array of data for which to generate an area shape.

Default []

# AreaClosed.defined(datum: Datum, index: number, data: Datum[]) => booleanoptional

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

# AreaClosed.innerRefRef<SVGPathElement>optional

React RefObject passed to the path element.

# AreaClosed.xnumber | NumberAccessor<Datum>optional

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

# AreaClosed.x0number | NumberAccessor<Datum>optional

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

# AreaClosed.x1number | NumberAccessor<Datum>optional

Specifies the x1 accessor function which defaults to null.

# AreaClosed.ynumber | NumberAccessor<Datum>optional

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

# AreaClosed.y0number | NumberAccessor<Datum>optional

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

# AreaClosed.y1number | NumberAccessor<Datum>optional

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

#<AreaStack />

# AreaStack.dataDatum[]required

Array of data for which to generate a stack.

# AreaStack.children(args: { stacks: Series<Datum, Key>[]; path: Area<SeriesPoint<Datum>>; stack: Stack<any, Datum, Key>; }) => ReactNodeoptional

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

# AreaStack.classNamestringoptional

className applied to path element.

# AreaStack.color(key: Key, index: number) => stringoptional

Returns a color for a given stack key and index.

# AreaStack.curveCurveFactoryoptional

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

# AreaStack.defined(datum: SeriesPoint<Datum>, index: number, data: SeriesPoint<Datum>[]) => booleanoptional

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.

# AreaStack.keysKey[]optional

Array of keys corresponding to stack layers.

# AreaStack.leftnumberoptional

Left offset of rendered Stack.

# AreaStack.offset"none" | "expand" | "diverging" | "silhouette" | "wiggle"optional

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

# AreaStack.order"none" | "ascending" | "descending" | "insideout" | "reverse"optional

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

# AreaStack.topnumberoptional

Top offset of rendered Stack.

# AreaStack.valuenumber | ((d: Datum, key: Key) => number)optional

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

# AreaStack.xNumAccessor<SeriesPoint<Datum>>optional

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

# AreaStack.x0NumAccessor<SeriesPoint<Datum>>optional

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

# AreaStack.x1NumAccessor<SeriesPoint<Datum>>optional

Specifies the x1 accessor function which defaults to null.

# AreaStack.y0NumAccessor<SeriesPoint<Datum>>optional

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

# AreaStack.y1NumAccessor<SeriesPoint<Datum>>optional

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

#<Bar />

# Bar.classNamestringoptional

className to apply to rect element.

# Bar.innerRefRef<SVGRectElement>optional

reference to rect element.

#<BarStackHorizontal />

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

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

# BarStackHorizontal.dataDatum[]required

Array of data for which to generate a stack.

# BarStackHorizontal.xScaleScaleType<any, number>required

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

# BarStackHorizontal.y(d: Datum) => anyrequired

Returns the value mapped to the y of a bar.

# BarStackHorizontal.yScaleScaleType<any, number>required

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

# BarStackHorizontal.children(stacks: BarStack<Datum, Key>[]) => ReactNodeoptional

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

# BarStackHorizontal.classNamestringoptional

className applied to path element.

# BarStackHorizontal.keysKey[]optional

Array of keys corresponding to stack layers.

# BarStackHorizontal.leftnumberoptional

Left offset of rendered Stack.

# BarStackHorizontal.offset"none" | "expand" | "diverging" | "silhouette" | "wiggle"optional

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

# BarStackHorizontal.order"none" | "ascending" | "descending" | "insideout" | "reverse"optional

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

# BarStackHorizontal.topnumberoptional

Top offset of rendered Stack.

# BarStackHorizontal.valuenumber | ((d: Datum, key: Key) => number)optional

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

# BarStackHorizontal.x0(d: SeriesPoint<Datum>) => anyoptional

Returns the value mapped to the x0 of a bar.

Default (d: $TSFIXME) => d && d[0]

# BarStackHorizontal.x1(d: SeriesPoint<Datum>) => anyoptional

Returns the value mapped to the x1 of a bar.

Default (d: $TSFIXME) => d && d[1]

#<Circle />

# Circle.classNamestringoptional

className to apply to circle element.

# Circle.innerRefRef<SVGCircleElement>optional

reference to circle element.

#degreesToRadians

#getPoint

# getPoint.sidenumberrequired
# getPoint.sidesnumberrequired

Number of polygon sides.

# getPoint.sizenumberrequired

Size of the shape.

# getPoint.center{ x: number; y: number; }optional

Polygon center position.

# getPoint.rotatenumberoptional

Rotation transform to apply to polygon.

Default 0

#getPoints

# getPoints.sidesnumberrequired

Number of polygon sides.

# getPoints.sizenumberrequired

Size of the shape.

# getPoints.center{ x: number; y: number; }optional

Polygon center position.

# getPoints.rotatenumberoptional

Rotation transform to apply to polygon.

Default 0

#<Line />

# Line.classNamestringoptional

className to apply to line element.

# Line.fillstringoptional

fill color applied to line element.

Default transparent

# Line.fromPointoptional

Starting x,y point of the line.

Default { x: 0, y: 0 }

# Line.innerRefRef<SVGLineElement>optional

reference to line element.

# Line.toPointoptional

Ending x,y point of the line.

Default { x: 1, y: 1 }

#<LinePath />

# LinePath.children(args: { path: Line<Datum>; }) => ReactNodeoptional

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

# LinePath.classNamestringoptional

className applied to path element.

# LinePath.curveCurveFactory | CurveFactoryLineOnlyoptional

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

# LinePath.dataDatum[]optional

Array of data for which to generate a line shape.

Default []

# LinePath.defined(datum: Datum, index: number, data: Datum[]) => booleanoptional

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

# LinePath.fillstringoptional

Fill color of the path element.

Default transparent

# LinePath.innerRefRef<SVGPathElement>optional

React RefObject passed to the path element.

# LinePath.x(datum: Datum, index: number, data: Datum[]) => numberoptional

Given a datum, returns the x value. Defaults to d0.

# LinePath.y(datum: Datum, index: number, data: Datum[]) => numberoptional

Given a datum, returns the y value. Defaults to d1.

#<LineRadial />

# LineRadial.anglenumber | NumAccessor<Datum>optional

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

# LineRadial.children(args: { path: RadialLine<Datum>; }) => ReactNodeoptional

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

# LineRadial.classNamestringoptional

className applied to path element.

# LineRadial.curveCurveFactory | CurveFactoryLineOnlyoptional

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

# LineRadial.dataDatum[]optional

Array of data for which to generate a line shape.

Default []

# LineRadial.defined(datum: Datum, index: number, data: Datum[]) => booleanoptional

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.

# LineRadial.fillstringoptional

Fill color of the path element.

Default transparent

# LineRadial.innerRefRef<SVGPathElement>optional

React RefObject passed to the path element.

# LineRadial.radiusnumber | NumAccessor<Datum>optional

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

#<LinkHorizontalCurve />

# LinkHorizontalCurve.dataLinkrequired

Datum for which to render a link.

# LinkHorizontalCurve.children(args: { path: PathType<Link>; }) => ReactNodeoptional

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

# LinkHorizontalCurve.classNamestringoptional

className applied to path element.

# LinkHorizontalCurve.innerRefRef<SVGPathElement>optional

React ref to the path element.

# LinkHorizontalCurve.pathPathType<Link>optional

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

# LinkHorizontalCurve.percentnumberoptional

Default 0.2

# LinkHorizontalCurve.source(link: Link) => Nodeoptional

Given a link, returns the source node.

Default (l: $TSFIXME) => l && l.source

# LinkHorizontalCurve.target(link: Link) => Nodeoptional

Given a link, returns the target node.

Default (l: $TSFIXME) => l && l.target

# LinkHorizontalCurve.x(node: Node) => numberoptional

Given a node, returns its x coordinate.

Default (n: $TSFIXME) => n && n.y

# LinkHorizontalCurve.y(node: Node) => numberoptional

Given a node, returns its y coordinate.

Default (n: $TSFIXME) => n && n.x

#<LinkHorizontalLine />

# LinkHorizontalLine.dataLinkrequired

Datum for which to render a link.

# LinkHorizontalLine.children(args: { path: PathType<Link>; }) => ReactNodeoptional

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

# LinkHorizontalLine.classNamestringoptional

className applied to path element.

# LinkHorizontalLine.innerRefRef<SVGPathElement>optional

React ref to the path element.

# LinkHorizontalLine.pathPathType<Link>optional

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

# LinkHorizontalLine.source(link: Link) => Nodeoptional

Given a link, returns the source node.

Default (d: $TSFIXME) => d.source

# LinkHorizontalLine.target(link: Link) => Nodeoptional

Given a link, returns the target node.

Default (d: $TSFIXME) => d.target

# LinkHorizontalLine.x(node: Node) => numberoptional

Given a node, returns its x coordinate.

Default (d: $TSFIXME) => d.y

# LinkHorizontalLine.y(node: Node) => numberoptional

Given a node, returns its y coordinate.

Default (d: $TSFIXME) => d.x

#<LinkHorizontalStep />

# LinkHorizontalStep.dataLinkrequired

Datum for which to render a link.

# LinkHorizontalStep.children(args: { path: PathType<Link>; }) => ReactNodeoptional

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

# LinkHorizontalStep.classNamestringoptional

className applied to path element.

# LinkHorizontalStep.innerRefRef<SVGPathElement>optional

React ref to the path element.

# LinkHorizontalStep.pathPathType<Link>optional

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

# LinkHorizontalStep.percentnumberoptional

Default 0.5

# LinkHorizontalStep.source(link: Link) => Nodeoptional

Given a link, returns the source node.

Default (d: $TSFIXME) => d.source

# LinkHorizontalStep.target(link: Link) => Nodeoptional

Given a link, returns the target node.

Default (d: $TSFIXME) => d.target

# LinkHorizontalStep.x(node: Node) => numberoptional

Given a node, returns its x coordinate.

Default (d: $TSFIXME) => d.y

# LinkHorizontalStep.y(node: Node) => numberoptional

Given a node, returns its y coordinate.

Default (d: $TSFIXME) => d.x

#<LinkRadialCurve />

# LinkRadialCurve.dataLinkrequired

Datum for which to render a link.

# LinkRadialCurve.children(args: { path: PathType<Link>; }) => ReactNodeoptional

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

# LinkRadialCurve.classNamestringoptional

className applied to path element.

# LinkRadialCurve.innerRefRef<SVGPathElement>optional

React ref to the path element.

# LinkRadialCurve.pathPathType<Link>optional

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

# LinkRadialCurve.percentnumberoptional

Default 0.2

# LinkRadialCurve.source(link: Link) => Nodeoptional

Given a link, returns the source node.

Default (l: $TSFIXME) => l && l.source

# LinkRadialCurve.target(link: Link) => Nodeoptional

Given a link, returns the target node.

Default (l: $TSFIXME) => l && l.target

# LinkRadialCurve.x(node: Node) => numberoptional

Given a node, returns its x coordinate.

Default (n: $TSFIXME) => n && n.x

# LinkRadialCurve.y(node: Node) => numberoptional

Given a node, returns its y coordinate.

Default (n: $TSFIXME) => n && n.y

#<LinkRadialLine />

# LinkRadialLine.dataLinkrequired

Datum for which to render a link.

# LinkRadialLine.children(args: { path: PathType<Link>; }) => ReactNodeoptional

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

# LinkRadialLine.classNamestringoptional

className applied to path element.

# LinkRadialLine.innerRefRef<SVGPathElement>optional

React ref to the path element.

# LinkRadialLine.pathPathType<Link>optional

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

# LinkRadialLine.source(link: Link) => Nodeoptional

Given a link, returns the source node.

Default (d: $TSFIXME) => d.source

# LinkRadialLine.target(link: Link) => Nodeoptional

Given a link, returns the target node.

Default (d: $TSFIXME) => d.target

# LinkRadialLine.x(node: Node) => numberoptional

Given a node, returns its x coordinate.

Default (d: $TSFIXME) => d.x

# LinkRadialLine.y(node: Node) => numberoptional

Given a node, returns its y coordinate.

Default (d: $TSFIXME) => d.y

#<LinkRadialStep />

# LinkRadialStep.dataLinkrequired

Datum for which to render a link.

# LinkRadialStep.children(args: { path: PathType<Link>; }) => ReactNodeoptional

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

# LinkRadialStep.classNamestringoptional

className applied to path element.

# LinkRadialStep.innerRefRef<SVGPathElement>optional

React ref to the path element.

# LinkRadialStep.pathPathType<Link>optional

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

# LinkRadialStep.percentnumberoptional
# LinkRadialStep.source(link: Link) => Nodeoptional

Given a link, returns the source node.

Default (d: $TSFIXME) => d.source

# LinkRadialStep.target(link: Link) => Nodeoptional

Given a link, returns the target node.

Default (d: $TSFIXME) => d.target

# LinkRadialStep.x(node: Node) => numberoptional

Given a node, returns its x coordinate.

Default (d: $TSFIXME) => d.x

# LinkRadialStep.y(node: Node) => numberoptional

Given a node, returns its y coordinate.

Default (d: $TSFIXME) => d.y

#<LinkVerticalCurve />

# LinkVerticalCurve.dataLinkrequired

Datum for which to render a link.

# LinkVerticalCurve.children(args: { path: PathType<Link>; }) => ReactNodeoptional

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

# LinkVerticalCurve.classNamestringoptional

className applied to path element.

# LinkVerticalCurve.innerRefRef<SVGPathElement>optional

React ref to the path element.

# LinkVerticalCurve.pathPathType<Link>optional

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

# LinkVerticalCurve.percentnumberoptional

Default 0.2

# LinkVerticalCurve.source(link: Link) => Nodeoptional

Given a link, returns the source node.

Default (l: $TSFIXME) => l && l.source

# LinkVerticalCurve.target(link: Link) => Nodeoptional

Given a link, returns the target node.

Default (l: $TSFIXME) => l && l.target

# LinkVerticalCurve.x(node: Node) => numberoptional

Given a node, returns its x coordinate.

Default (n: $TSFIXME) => n && n.x

# LinkVerticalCurve.y(node: Node) => numberoptional

Given a node, returns its y coordinate.

Default (n: $TSFIXME) => n && n.y

#<LinkVerticalLine />

# LinkVerticalLine.dataLinkrequired

Datum for which to render a link.

# LinkVerticalLine.children(args: { path: PathType<Link>; }) => ReactNodeoptional

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

# LinkVerticalLine.classNamestringoptional

className applied to path element.

# LinkVerticalLine.innerRefRef<SVGPathElement>optional

React ref to the path element.

# LinkVerticalLine.pathPathType<Link>optional

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

# LinkVerticalLine.source(link: Link) => Nodeoptional

Given a link, returns the source node.

Default (d: $TSFIXME) => d.source

# LinkVerticalLine.target(link: Link) => Nodeoptional

Given a link, returns the target node.

Default (d: $TSFIXME) => d.target

# LinkVerticalLine.x(node: Node) => numberoptional

Given a node, returns its x coordinate.

Default (d: $TSFIXME) => d.x

# LinkVerticalLine.y(node: Node) => numberoptional

Given a node, returns its y coordinate.

Default (d: $TSFIXME) => d.y

#<LinkVerticalStep />

# LinkVerticalStep.dataLinkrequired

Datum for which to render a link.

# LinkVerticalStep.children(args: { path: PathType<Link>; }) => ReactNodeoptional

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

# LinkVerticalStep.classNamestringoptional

className applied to path element.

# LinkVerticalStep.innerRefRef<SVGPathElement>optional

React ref to the path element.

# LinkVerticalStep.pathPathType<Link>optional

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

# LinkVerticalStep.percentnumberoptional

Default 0.5

# LinkVerticalStep.source(link: Link) => Nodeoptional

Given a link, returns the source node.

Default (d: $TSFIXME) => d.source

# LinkVerticalStep.target(link: Link) => Nodeoptional

Given a link, returns the target node.

Default (d: $TSFIXME) => d.target

# LinkVerticalStep.x(node: Node) => numberoptional

Given a node, returns its x coordinate.

Default (d: $TSFIXME) => d.x

# LinkVerticalStep.y(node: Node) => numberoptional

Given a node, returns its y coordinate.

Default (d: $TSFIXME) => d.y

#pathHorizontalCurve

# pathHorizontalCurve.percentnumberrequired
# pathHorizontalCurve.source(link: Link) => Nodeoptional

Given a link, returns the source node.

# pathHorizontalCurve.target(link: Link) => Nodeoptional

Given a link, returns the target node.

# pathHorizontalCurve.x(node: Node) => numberoptional

Given a node, returns its x coordinate.

# pathHorizontalCurve.y(node: Node) => numberoptional

Given a node, returns its y coordinate.

#pathHorizontalDiagonal

# pathHorizontalDiagonal.source(link: Link) => Nodeoptional

Given a link, returns the source node.

# pathHorizontalDiagonal.target(link: Link) => Nodeoptional

Given a link, returns the target node.

# pathHorizontalDiagonal.x(node: Node) => numberoptional

Given a node, returns its x coordinate.

# pathHorizontalDiagonal.y(node: Node) => numberoptional

Given a node, returns its y coordinate.

#pathHorizontalLine

# pathHorizontalLine.source(link: Link) => Nodeoptional

Given a link, returns the source node.

# pathHorizontalLine.target(link: Link) => Nodeoptional

Given a link, returns the target node.

# pathHorizontalLine.x(node: Node) => numberoptional

Given a node, returns its x coordinate.

# pathHorizontalLine.y(node: Node) => numberoptional

Given a node, returns its y coordinate.

#pathHorizontalStep

# pathHorizontalStep.percentnumberrequired
# pathHorizontalStep.source(link: Link) => Nodeoptional

Given a link, returns the source node.

# pathHorizontalStep.target(link: Link) => Nodeoptional

Given a link, returns the target node.

# pathHorizontalStep.x(node: Node) => numberoptional

Given a node, returns its x coordinate.

# pathHorizontalStep.y(node: Node) => numberoptional

Given a node, returns its y coordinate.

#pathRadialCurve

# pathRadialCurve.percentnumberrequired
# pathRadialCurve.source(link: Link) => Nodeoptional

Given a link, returns the source node.

# pathRadialCurve.target(link: Link) => Nodeoptional

Given a link, returns the target node.

# pathRadialCurve.x(node: Node) => numberoptional

Given a node, returns its x coordinate.

# pathRadialCurve.y(node: Node) => numberoptional

Given a node, returns its y coordinate.

#pathRadialDiagonal

# pathRadialDiagonal.angle(node: Node) => numberoptional

Given a node, returns its x coordinate.

# pathRadialDiagonal.radius(node: Node) => numberoptional

Given a node, returns its y coordinate.

# pathRadialDiagonal.source(link: Link) => Nodeoptional

Given a link, returns the source node.

# pathRadialDiagonal.target(link: Link) => Nodeoptional

Given a link, returns the target node.

#pathRadialLine

# pathRadialLine.source(link: Link) => Nodeoptional

Given a link, returns the source node.

# pathRadialLine.target(link: Link) => Nodeoptional

Given a link, returns the target node.

# pathRadialLine.x(node: Node) => numberoptional

Given a node, returns its x coordinate.

# pathRadialLine.y(node: Node) => numberoptional

Given a node, returns its y coordinate.

#pathRadialStep

# pathRadialStep.source(link: Link) => Nodeoptional

Given a link, returns the source node.

# pathRadialStep.target(link: Link) => Nodeoptional

Given a link, returns the target node.

# pathRadialStep.x(node: Node) => numberoptional

Given a node, returns its x coordinate.

# pathRadialStep.y(node: Node) => numberoptional

Given a node, returns its y coordinate.

#pathVerticalCurve

# pathVerticalCurve.percentnumberrequired
# pathVerticalCurve.source(link: Link) => Nodeoptional

Given a link, returns the source node.

# pathVerticalCurve.target(link: Link) => Nodeoptional

Given a link, returns the target node.

# pathVerticalCurve.x(node: Node) => numberoptional

Given a node, returns its x coordinate.

# pathVerticalCurve.y(node: Node) => numberoptional

Given a node, returns its y coordinate.

#pathVerticalDiagonal

# pathVerticalDiagonal.source(link: Link) => Nodeoptional

Given a link, returns the source node.

# pathVerticalDiagonal.target(link: Link) => Nodeoptional

Given a link, returns the target node.

# pathVerticalDiagonal.x(node: Node) => numberoptional

Given a node, returns its x coordinate.

# pathVerticalDiagonal.y(node: Node) => numberoptional

Given a node, returns its y coordinate.

#pathVerticalLine

# pathVerticalLine.source(link: Link) => Nodeoptional

Given a link, returns the source node.

# pathVerticalLine.target(link: Link) => Nodeoptional

Given a link, returns the target node.

# pathVerticalLine.x(node: Node) => numberoptional

Given a node, returns its x coordinate.

# pathVerticalLine.y(node: Node) => numberoptional

Given a node, returns its y coordinate.

#pathVerticalStep

# pathVerticalStep.percentnumberrequired
# pathVerticalStep.source(link: Link) => Nodeoptional

Given a link, returns the source node.

# pathVerticalStep.target(link: Link) => Nodeoptional

Given a link, returns the target node.

# pathVerticalStep.x(node: Node) => numberoptional

Given a node, returns its x coordinate.

# pathVerticalStep.y(node: Node) => numberoptional

Given a node, returns its y coordinate.

#<Pie />

# Pie.centroid(xyCoords: [number, number], arc: PieArcDatum<Datum>) => ReactNodeoptional

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

# Pie.children(provided: ProvidedProps<Datum>) => ReactNodeoptional

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

# Pie.classNamestringoptional

className applied to path element.

# Pie.cornerRadiusnumber | NumberAccessor<Datum>optional

Inner radius of the Arc shape.

# Pie.dataDatum[]optional

Array of data to generate a Pie for.

Default []

# Pie.endAnglenumber | NumberAccessor<Datum>optional

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.

# Pie.innerRadiusnumber | NumberAccessor<Datum>optional

Inner radius of the Arc shape.

Default 0

# Pie.leftnumberoptional

Left offset of rendered Pie.

# Pie.outerRadiusnumber | NumberAccessor<Datum>optional

Inner radius of the Arc shape.

# Pie.padAnglenumber | NumberAccessor<Datum>optional

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

# Pie.padRadiusnumber | NumberAccessor<Datum>optional

Padding radius of the Arc shape, which determines the fixed linear distance separating adjacent arcs.

# Pie.pieSort(a: Datum, b: Datum) => numberoptional

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

# Pie.pieSortValues(a: number, b: number) => numberoptional

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

# Pie.pieValueNumberAccessor<Datum>optional

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

# Pie.startAnglenumber | NumberAccessor<Datum>optional

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.

# Pie.topnumberoptional

Top offset of rendered Pie.

#<Polygon />

# Polygon.sidesnumberrequired

Number of polygon sides.

# Polygon.center{ x: number; y: number; }optional

Polygon center position.

# Polygon.children(args: { points: [number, number][]; }) => ReactNodeoptional

Render function override which is passed the generated polygon points.

# Polygon.classNamestringoptional

className to apply to polygon element.

# Polygon.innerRefRef<SVGPolygonElement>optional

Reference to polygon element.

# Polygon.rotatenumberoptional

Rotation transform to apply to polygon.

Default 0

# Polygon.sizenumberoptional

Size of the shape.

Default 25

#<Stack />

# Stack.dataDatum[]required

Array of data for which to generate a stack.

# Stack.children(args: { stacks: Series<Datum, Key>[]; path: Area<SeriesPoint<Datum>>; stack: Stack<any, Datum, Key>; }) => ReactNodeoptional

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

# Stack.classNamestringoptional

className applied to path element.

# Stack.color(key: Key, index: number) => stringoptional

Returns a color for a given stack key and index.

# Stack.curveCurveFactoryoptional

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

# Stack.defined(datum: SeriesPoint<Datum>, index: number, data: SeriesPoint<Datum>[]) => booleanoptional

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.

# Stack.keysKey[]optional

Array of keys corresponding to stack layers.

# Stack.leftnumberoptional

Left offset of rendered Stack.

# Stack.offset"none" | "expand" | "diverging" | "silhouette" | "wiggle"optional

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

# Stack.order"none" | "ascending" | "descending" | "insideout" | "reverse"optional

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

# Stack.topnumberoptional

Top offset of rendered Stack.

# Stack.valuenumber | ((d: Datum, key: Key) => number)optional

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

# Stack.xNumAccessor<SeriesPoint<Datum>>optional

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

# Stack.x0NumAccessor<SeriesPoint<Datum>>optional

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

# Stack.x1NumAccessor<SeriesPoint<Datum>>optional

Specifies the x1 accessor function which defaults to null.

# Stack.y0NumAccessor<SeriesPoint<Datum>>optional

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

# Stack.y1NumAccessor<SeriesPoint<Datum>>optional

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

#stackOffset

#stackOrder