Chart primitives

Layouts & specialized

Interactions

SVG utilities

Data utilities

Umbrella package

@vx/vx

@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

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* />

Components

APIs

#arc

# arc.cornerRadiusnumber | Accessor<Datum, number> | undefinedoptional

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

# arc.endAnglenumber | Accessor<Datum, number> | undefinedoptional

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

# arc.innerRadiusnumber | Accessor<Datum, number> | undefinedoptional

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

# arc.outerRadiusnumber | Accessor<Datum, number> | undefinedoptional

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

# arc.padAnglenumber | Accessor<Datum, number> | undefinedoptional

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

# arc.padRadiusnumber | Accessor<Datum, number> | undefinedoptional

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

# arc.startAnglenumber | Accessor<Datum, number> | undefinedoptional

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

#<Arc />

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

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

# Arc.classNamestring | undefinedoptional

className applied to path element.

# Arc.cornerRadiusnumber | Accessor<Datum, number> | undefinedoptional

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

# Arc.dataDatum | undefinedoptional

A Datum for which to generate an arc.

# Arc.endAnglenumber | Accessor<Datum, number> | undefinedoptional

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

# Arc.innerRadiusnumber | Accessor<Datum, number> | undefinedoptional

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

# Arc.innerRef((instance: SVGPathElement | null) => void) | RefObject<SVGPathElement> | null | undefinedoptional

React ref to the path element.

# Arc.outerRadiusnumber | Accessor<Datum, number> | undefinedoptional

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

# Arc.padAnglenumber | Accessor<Datum, number> | undefinedoptional

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

# Arc.padRadiusnumber | Accessor<Datum, number> | undefinedoptional

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

# Arc.startAnglenumber | Accessor<Datum, number> | undefinedoptional

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

#area

# area.curveCurveFactory | undefinedoptional

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

# area.definedAccessorForArrayItem<Datum, boolean> | undefinedoptional

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.

# area.xnumber | AccessorForArrayItem<Datum, number> | undefinedoptional

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

# area.x0number | AccessorForArrayItem<Datum, number> | undefinedoptional

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

# area.x1number | AccessorForArrayItem<Datum, number> | undefinedoptional

Specifies the x1 accessor function which defaults to null.

# area.ynumber | AccessorForArrayItem<Datum, number> | undefinedoptional

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

# area.y0number | AccessorForArrayItem<Datum, number> | undefinedoptional

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

# area.y1number | AccessorForArrayItem<Datum, number> | undefinedoptional

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

#<Area />

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

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

# Area.classNamestring | undefinedoptional

Classname applied to path element.

# Area.curveCurveFactory | undefinedoptional

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

# Area.dataDatum[] | undefinedoptional

Array of data for which to generate an area shape.

Default []

# Area.definedAccessorForArrayItem<Datum, boolean> | undefinedoptional

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.innerRef((instance: SVGPathElement | null) => void) | RefObject<SVGPathElement> | null | undefinedoptional

React RefObject passed to the path element.

# Area.xnumber | AccessorForArrayItem<Datum, number> | undefinedoptional

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

# Area.x0number | AccessorForArrayItem<Datum, number> | undefinedoptional

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

# Area.x1number | AccessorForArrayItem<Datum, number> | undefinedoptional

Specifies the x1 accessor function which defaults to null.

# Area.ynumber | AccessorForArrayItem<Datum, number> | undefinedoptional

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

# Area.y0number | AccessorForArrayItem<Datum, number> | undefinedoptional

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

# Area.y1number | AccessorForArrayItem<Datum, number> | undefinedoptional

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

#<AreaClosed />

# AreaClosed.yScale

ScaleTime<number, number> | ScaleLinear<number, number> | ScaleLogarithmic<number, number> | ScalePower<number, number> | ... 6 more ... | ScaleOrdinal<...>

required

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

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

# AreaClosed.classNamestring | undefinedoptional

Classname applied to path element.

# AreaClosed.curveCurveFactory | undefinedoptional

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

# AreaClosed.dataDatum[] | undefinedoptional

Array of data for which to generate an area shape.

Default []

# AreaClosed.definedAccessorForArrayItem<Datum, boolean> | undefinedoptional

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.innerRef((instance: SVGPathElement | null) => void) | RefObject<SVGPathElement> | null | undefinedoptional

React RefObject passed to the path element.

# AreaClosed.xnumber | AccessorForArrayItem<Datum, number> | undefinedoptional

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

# AreaClosed.x0number | AccessorForArrayItem<Datum, number> | undefinedoptional

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

# AreaClosed.x1number | AccessorForArrayItem<Datum, number> | undefinedoptional

Specifies the x1 accessor function which defaults to null.

# AreaClosed.ynumber | AccessorForArrayItem<Datum, number> | undefinedoptional

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

# AreaClosed.y0number | AccessorForArrayItem<Datum, number> | undefinedoptional

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

# AreaClosed.y1number | AccessorForArrayItem<Datum, number> | undefinedoptional

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

#<AreaStack />

# AreaStack.dataDatum[]required

Array of data for which generates a stack.

# AreaStack.children

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

optional

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

# AreaStack.classNamestring | undefinedoptional

className applied to path element.

# AreaStack.color((key: Key, index: number) => string) | undefinedoptional

Returns a color for a given stack key and index.

# AreaStack.curveCurveFactory | undefinedoptional

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

# AreaStack.definedAccessorForArrayItem<SeriesPoint<Datum>, boolean> | undefinedoptional

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[] | undefinedoptional

Array of keys corresponding to stack layers.

# AreaStack.leftnumber | undefinedoptional

Left offset of rendered Stack.

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

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

# AreaStack.topnumber | undefinedoptional

Top offset of rendered Stack.

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

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

# AreaStack.xAccessorForArrayItem<SeriesPoint<Datum>, number> | undefinedoptional

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

# AreaStack.x0AccessorForArrayItem<SeriesPoint<Datum>, number> | undefinedoptional

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

# AreaStack.x1AccessorForArrayItem<SeriesPoint<Datum>, number> | undefinedoptional

Specifies the x1 accessor function which defaults to null.

# AreaStack.y0AccessorForArrayItem<SeriesPoint<Datum>, number> | undefinedoptional

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

# AreaStack.y1AccessorForArrayItem<SeriesPoint<Datum>, number> | undefinedoptional

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

#<Bar />

# Bar.classNamestring | undefinedoptional

className to apply to rect element.

# Bar.innerRef((instance: SVGRectElement | null) => void) | RefObject<SVGRectElement> | null | undefinedoptional

reference to rect element.

#<BarRounded />

# BarRounded.heightnumberrequired

height of the bar starting from y

# BarRounded.radiusnumberrequired

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

# BarRounded.widthnumberrequired

width of the bar starting from x

# BarRounded.xnumberrequired

left position of the bar

# BarRounded.ynumberrequired

top position of the bar

# BarRounded.allboolean | undefinedoptional

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

Default false

# BarRounded.bottomboolean | undefinedoptional

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

Default false

# BarRounded.bottomLeftboolean | undefinedoptional

apply corner radius to bottom left corner

Default false

# BarRounded.bottomRightboolean | undefinedoptional

apply corner radius to bottom right

Default false

# BarRounded.classNamestring | undefinedoptional

className to apply to path element.

# BarRounded.innerRef((instance: SVGPathElement | null) => void) | RefObject<SVGPathElement> | null | undefinedoptional

reference to path element.

# BarRounded.leftboolean | undefinedoptional

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

Default false

# BarRounded.rightboolean | undefinedoptional

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

Default false

# BarRounded.topboolean | undefinedoptional

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

Default false

# BarRounded.topLeftboolean | undefinedoptional

apply corner radius to top left corner

Default false

# BarRounded.topRightboolean | undefinedoptional

apply corner radius to top right corner

Default false

#<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 generates a stack.

# BarStackHorizontal.xScaleXScalerequired

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

# BarStackHorizontal.yAccessor<Datum, Parameters<YScale>[0]>required

Returns the value mapped to the y of a bar.

# BarStackHorizontal.yScaleYScalerequired

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

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

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

# BarStackHorizontal.classNamestring | undefinedoptional

className applied to path element.

# BarStackHorizontal.keysKey[] | undefinedoptional

Array of keys corresponding to stack layers.

# BarStackHorizontal.leftnumber | undefinedoptional

Left offset of rendered Stack.

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

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

# BarStackHorizontal.topnumber | undefinedoptional

Top offset of rendered Stack.

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

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

# BarStackHorizontal.x0Accessor<SeriesPoint<Datum>, Parameters<XScale>[0]> | undefinedoptional

Returns the value mapped to the x0 of a bar.

# BarStackHorizontal.x1Accessor<SeriesPoint<Datum>, Parameters<XScale>[0]> | undefinedoptional

Returns the value mapped to the x1 of a bar.

#<Circle />

# Circle.classNamestring | undefinedoptional

className to apply to circle element.

# Circle.innerRef((instance: SVGCircleElement | null) => void) | RefObject<SVGCircleElement> | null | undefinedoptional

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; } | undefinedoptional

Polygon center position.

# getPoint.rotatenumber | undefinedoptional

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; } | undefinedoptional

Polygon center position.

# getPoints.rotatenumber | undefinedoptional

Rotation transform to apply to polygon.

Default 0

#line

# line.curveCurveFactory | CurveFactoryLineOnly | undefinedoptional

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

# line.definedAccessorForArrayItem<Datum, boolean> | undefinedoptional

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.

# line.xnumber | AccessorForArrayItem<Datum, number> | undefinedoptional

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

# line.ynumber | AccessorForArrayItem<Datum, number> | undefinedoptional

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

#<Line />

# Line.classNamestring | undefinedoptional

className to apply to line element.

# Line.fillstring | undefinedoptional

fill color applied to line element.

Default transparent

# Line.fromPoint | undefinedoptional

Starting x,y point of the line.

Default { x: 0, y: 0 }

# Line.innerRef((instance: SVGLineElement | null) => void) | RefObject<SVGLineElement> | null | undefinedoptional

reference to line element.

# Line.toPoint | undefinedoptional

Ending x,y point of the line.

Default { x: 1, y: 1 }

#<LinePath />

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

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

# LinePath.classNamestring | undefinedoptional

className applied to path element.

# LinePath.curveCurveFactory | CurveFactoryLineOnly | undefinedoptional

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

# LinePath.dataDatum[] | undefinedoptional

Array of data for which to generate a line shape.

Default []

# LinePath.definedAccessorForArrayItem<Datum, boolean> | undefinedoptional

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.fillstring | undefinedoptional

Fill color of the path element.

Default transparent

# LinePath.innerRef((instance: SVGPathElement | null) => void) | RefObject<SVGPathElement> | null | undefinedoptional

React RefObject passed to the path element.

# LinePath.xnumber | AccessorForArrayItem<Datum, number> | undefinedoptional

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

# LinePath.ynumber | AccessorForArrayItem<Datum, number> | undefinedoptional

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

#<LineRadial />

# LineRadial.anglenumber | AccessorForArrayItem<Datum, number> | undefinedoptional

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

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

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

# LineRadial.classNamestring | undefinedoptional

className applied to path element.

# LineRadial.curveCurveFactory | CurveFactoryLineOnly | undefinedoptional

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

# LineRadial.dataDatum[] | undefinedoptional

Array of data for which to generate a line shape.

Default []

# LineRadial.definedAccessorForArrayItem<Datum, boolean> | undefinedoptional

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.

# LineRadial.fillstring | undefinedoptional

Fill color of the path element.

Default transparent

# LineRadial.innerRef((instance: SVGPathElement | null) => void) | RefObject<SVGPathElement> | null | undefinedoptional

React RefObject passed to the path element.

# LineRadial.radiusnumber | AccessorForArrayItem<Datum, number> | undefinedoptional

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>; }) => ReactNode) | undefinedoptional

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

# LinkHorizontalCurve.classNamestring | undefinedoptional

className applied to path element.

# LinkHorizontalCurve.innerRef((instance: SVGPathElement | null) => void) | RefObject<SVGPathElement> | null | undefinedoptional

React ref to the path element.

# LinkHorizontalCurve.pathPathType<Link> | undefinedoptional

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

# LinkHorizontalCurve.percentnumber | undefinedoptional

Default 0.2

# LinkHorizontalCurve.source((link: Link) => Node) | undefinedoptional

Given a link, returns the source node.

# LinkHorizontalCurve.target((link: Link) => Node) | undefinedoptional

Given a link, returns the target node.

# LinkHorizontalCurve.x((node: Node) => number) | undefinedoptional

Given a node, returns its x coordinate.

# LinkHorizontalCurve.y((node: Node) => number) | undefinedoptional

Given a node, returns its y coordinate.

#<LinkHorizontalLine />

# LinkHorizontalLine.dataLinkrequired

Datum for which to render a link.

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

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

# LinkHorizontalLine.classNamestring | undefinedoptional

className applied to path element.

# LinkHorizontalLine.innerRef((instance: SVGPathElement | null) => void) | RefObject<SVGPathElement> | null | undefinedoptional

React ref to the path element.

# LinkHorizontalLine.pathPathType<Link> | undefinedoptional

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

# LinkHorizontalLine.source((link: Link) => Node) | undefinedoptional

Given a link, returns the source node.

# LinkHorizontalLine.target((link: Link) => Node) | undefinedoptional

Given a link, returns the target node.

# LinkHorizontalLine.x((node: Node) => number) | undefinedoptional

Given a node, returns its x coordinate.

# LinkHorizontalLine.y((node: Node) => number) | undefinedoptional

Given a node, returns its y coordinate.

#<LinkHorizontalStep />

# LinkHorizontalStep.dataLinkrequired

Datum for which to render a link.

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

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

# LinkHorizontalStep.classNamestring | undefinedoptional

className applied to path element.

# LinkHorizontalStep.innerRef((instance: SVGPathElement | null) => void) | RefObject<SVGPathElement> | null | undefinedoptional

React ref to the path element.

# LinkHorizontalStep.pathPathType<Link> | undefinedoptional

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

# LinkHorizontalStep.percentnumber | undefinedoptional

Default 0.5

# LinkHorizontalStep.source((link: Link) => Node) | undefinedoptional

Given a link, returns the source node.

# LinkHorizontalStep.target((link: Link) => Node) | undefinedoptional

Given a link, returns the target node.

# LinkHorizontalStep.x((node: Node) => number) | undefinedoptional

Given a node, returns its x coordinate.

# LinkHorizontalStep.y((node: Node) => number) | undefinedoptional

Given a node, returns its y coordinate.

#<LinkRadialCurve />

# LinkRadialCurve.dataLinkrequired

Datum for which to render a link.

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

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

# LinkRadialCurve.classNamestring | undefinedoptional

className applied to path element.

# LinkRadialCurve.innerRef((instance: SVGPathElement | null) => void) | RefObject<SVGPathElement> | null | undefinedoptional

React ref to the path element.

# LinkRadialCurve.pathPathType<Link> | undefinedoptional

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

# LinkRadialCurve.percentnumber | undefinedoptional

Default 0.2

# LinkRadialCurve.source((link: Link) => Node) | undefinedoptional

Given a link, returns the source node.

# LinkRadialCurve.target((link: Link) => Node) | undefinedoptional

Given a link, returns the target node.

# LinkRadialCurve.x((node: Node) => number) | undefinedoptional

Given a node, returns its x coordinate.

# LinkRadialCurve.y((node: Node) => number) | undefinedoptional

Given a node, returns its y coordinate.

#<LinkRadialLine />

# LinkRadialLine.dataLinkrequired

Datum for which to render a link.

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

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

# LinkRadialLine.classNamestring | undefinedoptional

className applied to path element.

# LinkRadialLine.innerRef((instance: SVGPathElement | null) => void) | RefObject<SVGPathElement> | null | undefinedoptional

React ref to the path element.

# LinkRadialLine.pathPathType<Link> | undefinedoptional

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

# LinkRadialLine.source((link: Link) => Node) | undefinedoptional

Given a link, returns the source node.

# LinkRadialLine.target((link: Link) => Node) | undefinedoptional

Given a link, returns the target node.

# LinkRadialLine.x((node: Node) => number) | undefinedoptional

Given a node, returns its x coordinate.

# LinkRadialLine.y((node: Node) => number) | undefinedoptional

Given a node, returns its y coordinate.

#<LinkRadialStep />

# LinkRadialStep.dataLinkrequired

Datum for which to render a link.

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

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

# LinkRadialStep.classNamestring | undefinedoptional

className applied to path element.

# LinkRadialStep.innerRef((instance: SVGPathElement | null) => void) | RefObject<SVGPathElement> | null | undefinedoptional

React ref to the path element.

# LinkRadialStep.pathPathType<Link> | undefinedoptional

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

# LinkRadialStep.percentnumber | undefinedoptional

# LinkRadialStep.source((link: Link) => Node) | undefinedoptional

Given a link, returns the source node.

# LinkRadialStep.target((link: Link) => Node) | undefinedoptional

Given a link, returns the target node.

# LinkRadialStep.x((node: Node) => number) | undefinedoptional

Given a node, returns its x coordinate.

# LinkRadialStep.y((node: Node) => number) | undefinedoptional

Given a node, returns its y coordinate.

#<LinkVerticalCurve />

# LinkVerticalCurve.dataLinkrequired

Datum for which to render a link.

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

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

# LinkVerticalCurve.classNamestring | undefinedoptional

className applied to path element.

# LinkVerticalCurve.innerRef((instance: SVGPathElement | null) => void) | RefObject<SVGPathElement> | null | undefinedoptional

React ref to the path element.

# LinkVerticalCurve.pathPathType<Link> | undefinedoptional

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

# LinkVerticalCurve.percentnumber | undefinedoptional

Default 0.2

# LinkVerticalCurve.source((link: Link) => Node) | undefinedoptional

Given a link, returns the source node.

# LinkVerticalCurve.target((link: Link) => Node) | undefinedoptional

Given a link, returns the target node.

# LinkVerticalCurve.x((node: Node) => number) | undefinedoptional

Given a node, returns its x coordinate.

# LinkVerticalCurve.y((node: Node) => number) | undefinedoptional

Given a node, returns its y coordinate.

#<LinkVerticalLine />

# LinkVerticalLine.dataLinkrequired

Datum for which to render a link.

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

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

# LinkVerticalLine.classNamestring | undefinedoptional

className applied to path element.

# LinkVerticalLine.innerRef((instance: SVGPathElement | null) => void) | RefObject<SVGPathElement> | null | undefinedoptional

React ref to the path element.

# LinkVerticalLine.pathPathType<Link> | undefinedoptional

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

# LinkVerticalLine.source((link: Link) => Node) | undefinedoptional

Given a link, returns the source node.

# LinkVerticalLine.target((link: Link) => Node) | undefinedoptional

Given a link, returns the target node.

# LinkVerticalLine.x((node: Node) => number) | undefinedoptional

Given a node, returns its x coordinate.

# LinkVerticalLine.y((node: Node) => number) | undefinedoptional

Given a node, returns its y coordinate.

#<LinkVerticalStep />

# LinkVerticalStep.dataLinkrequired

Datum for which to render a link.

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

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

# LinkVerticalStep.classNamestring | undefinedoptional

className applied to path element.

# LinkVerticalStep.innerRef((instance: SVGPathElement | null) => void) | RefObject<SVGPathElement> | null | undefinedoptional

React ref to the path element.

# LinkVerticalStep.pathPathType<Link> | undefinedoptional

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

# LinkVerticalStep.percentnumber | undefinedoptional

Default 0.5

# LinkVerticalStep.source((link: Link) => Node) | undefinedoptional

Given a link, returns the source node.

# LinkVerticalStep.target((link: Link) => Node) | undefinedoptional

Given a link, returns the target node.

# LinkVerticalStep.x((node: Node) => number) | undefinedoptional

Given a node, returns its x coordinate.

# LinkVerticalStep.y((node: Node) => number) | undefinedoptional

Given a node, returns its y coordinate.

#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.endAnglenumber | AngleAccessor<Datum> | undefinedoptional

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.padAnglenumber | AngleAccessor<Datum> | undefinedoptional

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

# pie.sort((a: Datum, b: Datum) => number) | null | undefinedoptional

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

# pie.sortValues((a: number, b: number) => number) | null | undefinedoptional

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

# pie.startAnglenumber | AngleAccessor<Datum> | undefinedoptional

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.valueAccessor<Datum, number> | undefinedoptional

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

#<Pie />

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

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

# Pie.children((provided: ProvidedProps<Datum>) => ReactNode) | undefinedoptional

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

# Pie.classNamestring | undefinedoptional

className applied to path element.

# Pie.cornerRadiusnumber | Accessor<PieArcDatum<Datum>, number> | undefinedoptional

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

# Pie.dataDatum[] | undefinedoptional

Array of data to generate a Pie for.

Default []

# Pie.endAnglenumber | AngleAccessor<Datum> | undefinedoptional

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 | Accessor<PieArcDatum<Datum>, number> | undefinedoptional

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

Default 0

# Pie.leftnumber | undefinedoptional

Left offset of rendered Pie.

# Pie.outerRadiusnumber | Accessor<PieArcDatum<Datum>, number> | undefinedoptional

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

# Pie.padAnglenumber | AngleAccessor<Datum> | undefinedoptional

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

# Pie.padRadiusnumber | Accessor<PieArcDatum<Datum>, number> | undefinedoptional

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

# Pie.pieSort((a: Datum, b: Datum) => number) | null | undefinedoptional

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) => number) | null | undefinedoptional

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

# Pie.pieValueAccessor<Datum, number> | undefinedoptional

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

# Pie.startAnglenumber | AngleAccessor<Datum> | undefinedoptional

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.topnumber | undefinedoptional

Top offset of rendered Pie.

#<Polygon />

# Polygon.sidesnumberrequired

Number of polygon sides.

# Polygon.center{ x: number; y: number; } | undefinedoptional

Polygon center position.

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

Render function override which is passed the generated polygon points.

# Polygon.classNamestring | undefinedoptional

className to apply to polygon element.

# Polygon.innerRef((instance: SVGPolygonElement | null) => void) | RefObject<SVGPolygonElement> | null | undefinedoptional

Reference to polygon element.

# Polygon.rotatenumber | undefinedoptional

Rotation transform to apply to polygon.

Default 0

# Polygon.sizenumberoptional

Size of the shape.

Default 25

#radialLine

# radialLine.anglenumber | AccessorForArrayItem<Datum, number> | undefinedoptional

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

# radialLine.curveCurveFactory | CurveFactoryLineOnly | undefinedoptional

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

# radialLine.definedAccessorForArrayItem<Datum, boolean> | undefinedoptional

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.

# radialLine.radiusnumber | AccessorForArrayItem<Datum, number> | undefinedoptional

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

#<SplitLinePath />

# SplitLinePath.segmentsDatum[][]required

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

# SplitLinePath.styles

Pick<SVGProps<SVGPathElement>, "string" | "className" | "scale" | "width" | "height" | "stroke" | "strokeWidth" | "strokeDasharray" | "offset" | "min" | ... 456 more ... | "key">[]

required

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

# SplitLinePath.children

((renderProps: { index: number; segment: { x: number; y: number; }[]; styles?: Pick<SVGProps<SVGPathElement>, "string" | "className" | "scale" | "width" | "height" | "stroke" | ... 460 more ... | "key"> | undefined; }) => ReactNode) | undefined

optional

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

# SplitLinePath.classNamestring | undefinedoptional

className applied to path element.

# SplitLinePath.curveCurveFactory | CurveFactoryLineOnly | undefinedoptional

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

# SplitLinePath.definedAccessorForArrayItem<Datum, boolean> | undefinedoptional

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.

# SplitLinePath.sampleRatenumber | undefinedoptional

Optionally specify the sample rate for interpolating line segments.

# SplitLinePath.xnumber | AccessorForArrayItem<Datum, number> | undefinedoptional

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

# SplitLinePath.ynumber | AccessorForArrayItem<Datum, number> | undefinedoptional

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

#stack

# stack.keysKey[] | undefinedoptional

Array of keys corresponding to stack layers.

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

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

# stack.valuenumber | ((d: Datum, key: Key) => number) | undefinedoptional

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

#<Stack />

# Stack.dataDatum[]required

Array of data for which generates a stack.

# Stack.children

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

optional

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

# Stack.classNamestring | undefinedoptional

className applied to path element.

# Stack.color((key: Key, index: number) => string) | undefinedoptional

Returns a color for a given stack key and index.

# Stack.curveCurveFactory | undefinedoptional

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

# Stack.definedAccessorForArrayItem<SeriesPoint<Datum>, boolean> | undefinedoptional

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[] | undefinedoptional

Array of keys corresponding to stack layers.

# Stack.leftnumber | undefinedoptional

Left offset of rendered Stack.

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

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

# Stack.topnumber | undefinedoptional

Top offset of rendered Stack.

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

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

# Stack.xAccessorForArrayItem<SeriesPoint<Datum>, number> | undefinedoptional

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

# Stack.x0AccessorForArrayItem<SeriesPoint<Datum>, number> | undefinedoptional

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

# Stack.x1AccessorForArrayItem<SeriesPoint<Datum>, number> | undefinedoptional

Specifies the x1 accessor function which defaults to null.

# Stack.y0AccessorForArrayItem<SeriesPoint<Datum>, number> | undefinedoptional

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

# Stack.y1AccessorForArrayItem<SeriesPoint<Datum>, number> | undefinedoptional

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

Chart primitives

Layouts & specialized

Interactions

SVG utilities

Data utilities

Umbrella package

@vx/shape

Installation

Examples

Components

APIs

#arc

#<Arc />

#area

#<Area />

#<AreaClosed />

#<AreaStack />

#<Bar />

#<BarRounded />

#<BarStackHorizontal />

#<Circle />

#degreesToRadians

#getPoint

#getPoints

#line

#<Line />

#<LinePath />

#<LineRadial />

#<LinkHorizontalCurve />

#<LinkHorizontalLine />

#<LinkHorizontalStep />

#<LinkRadialCurve />

#<LinkRadialLine />

#<LinkRadialStep />

#<LinkVerticalCurve />

#<LinkVerticalLine />

#<LinkVerticalStep />

#pathHorizontalCurve

#pathHorizontalDiagonal

#pathHorizontalLine

#pathHorizontalStep

#pathRadialCurve

#pathRadialDiagonal

#pathRadialLine

#pathRadialStep

#pathVerticalCurve

#pathVerticalDiagonal

#pathVerticalLine

#pathVerticalStep

#pie

#<Pie />

#<Polygon />

#radialLine

#<SplitLinePath />

#stack

#<Stack />

#stackOffset

#stackOrder