Star
Chart primitives
Layouts & specialized
Interactions
SVG utilities
Data utilities
Umbrella package

@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>

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

# endAnglenumber | Accessor<Datum, number>

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

# innerRadiusnumber | Accessor<Datum, number>

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

# outerRadiusnumber | Accessor<Datum, number>

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

# padAnglenumber | Accessor<Datum, number>

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

# padRadiusnumber | Accessor<Datum, number>

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

# startAnglenumber | Accessor<Datum, number>

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

#<Arc />

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

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

# classNamestring

className applied to path element.

# cornerRadiusnumber | Accessor<Datum, number>

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

# dataDatum

A Datum for which to generate an arc.

# endAnglenumber | Accessor<Datum, number>

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

# innerRadiusnumber | Accessor<Datum, number>

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

# innerRefRef<SVGPathElement>

React ref to the path element.

# outerRadiusnumber | Accessor<Datum, number>

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

# padAnglenumber | Accessor<Datum, number>

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

# padRadiusnumber | Accessor<Datum, number>

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

# startAnglenumber | Accessor<Datum, number>

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

#area()

# curveCurveFactory

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

# definedAccessorForArrayItem<Datum, boolean>

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>

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

# x0number | AccessorForArrayItem<Datum, number>

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

# x1number | AccessorForArrayItem<Datum, number>

Specifies the x1 accessor function which defaults to null.

# ynumber | AccessorForArrayItem<Datum, number>

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

# y0number | AccessorForArrayItem<Datum, number>

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

# y1number | AccessorForArrayItem<Datum, number>

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

#<Area />

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

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

# classNamestring

Classname applied to path element.

# curveCurveFactory

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

# dataDatum[]

Array of data for which to generate an area shape.

Default []

# definedAccessorForArrayItem<Datum, boolean>

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

# innerRefRef<SVGPathElement>

React RefObject passed to the path element.

# xnumber | AccessorForArrayItem<Datum, number>

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

# x0number | AccessorForArrayItem<Datum, number>

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

# x1number | AccessorForArrayItem<Datum, number>

Specifies the x1 accessor function which defaults to null.

# ynumber | AccessorForArrayItem<Datum, number>

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

# y0number | AccessorForArrayItem<Datum, number>

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

# y1number | AccessorForArrayItem<Datum, number>

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

#<AreaClosed />

# yScaleValueOf<ScaleTypeToD3Scale<number, any, any>>required
# children(args: { path: Area<Datum>; }) => ReactNode

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

# classNamestring

Classname applied to path element.

# curveCurveFactory

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

# dataDatum[]

Array of data for which to generate an area shape.

Default []

# definedAccessorForArrayItem<Datum, boolean>

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

# innerRefRef<SVGPathElement>

React RefObject passed to the path element.

# xnumber | AccessorForArrayItem<Datum, number>

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

# x0number | AccessorForArrayItem<Datum, number>

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

# x1number | AccessorForArrayItem<Datum, number>

Specifies the x1 accessor function which defaults to null.

# ynumber | AccessorForArrayItem<Datum, number>

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

# y0number | AccessorForArrayItem<Datum, number>

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

# y1number | AccessorForArrayItem<Datum, number>

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

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

# classNamestring

className applied to path element.

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

Returns a color for a given stack key and index.

# curveCurveFactory

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

# definedAccessorForArrayItem<SeriesPoint<Datum>, boolean>

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

Array of keys corresponding to stack layers.

# leftnumber

Left offset of rendered Stack.

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

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"

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

# topnumber

Top offset of rendered Stack.

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

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

# xAccessorForArrayItem<SeriesPoint<Datum>, number>

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

# x0AccessorForArrayItem<SeriesPoint<Datum>, number>

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

# x1AccessorForArrayItem<SeriesPoint<Datum>, number>

Specifies the x1 accessor function which defaults to null.

# y0AccessorForArrayItem<SeriesPoint<Datum>, number>

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

# y1AccessorForArrayItem<SeriesPoint<Datum>, number>

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

#<Bar />

# classNamestring

className to apply to rect element.

# innerRefRef<SVGRectElement>

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

Override render function which is passed the computed BarGroups.

# classNamestring

className applied to Bars.

# leftnumber

Left offset of rendered Bars.

# topnumber

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

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

# classNamestring

className applied to Bars.

# leftnumber

Left offset of rendered Bars.

# topnumber

Top offset of rendered Bars.

# x(barValue: number) => number

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

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

Default false

# bottomboolean

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

Default false

# bottomLeftboolean

apply corner radius to bottom left corner

Default false

# bottomRightboolean

apply corner radius to bottom right

Default false

# children({ path }: { path: string; }) => ReactNode

Optional children override.

# classNamestring

className to apply to path element.

# innerRefRef<SVGPathElement>

reference to path element.

# leftboolean

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

Default false

# rightboolean

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

Default false

# topboolean

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

Default false

# topLeftboolean

apply corner radius to top left corner

Default false

# topRightboolean

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

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

# classNamestring

className applied to path element.

# keysKey[]

Array of keys corresponding to stack layers.

# leftnumber

Left offset of rendered Stack.

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

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"

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

# topnumber

Top offset of rendered Stack.

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

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

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

Returns the value mapped to the y0 of a bar.

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

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

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

# classNamestring

className applied to path element.

# keysKey[]

Array of keys corresponding to stack layers.

# leftnumber

Left offset of rendered Stack.

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

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"

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

# topnumber

Top offset of rendered Stack.

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

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

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

Returns the value mapped to the x0 of a bar.

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

Returns the value mapped to the x1 of a bar.

#<Circle />

# classNamestring

className to apply to circle element.

# innerRefRef<SVGCircleElement>

reference to circle element.

#degreesToRadians()

#getPoint()

# sidenumberrequired
# center{ x: number; y: number; }

Polygon center position.

# rotatenumber

Rotation transform to apply to polygon.

Default 0

# sidesnumber

Number of polygon sides.

Default 4

# sizenumber

Size of the shape.

Default 25

#getPoints()

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

Polygon center position.

# rotatenumber

Rotation transform to apply to polygon.

Default 0

# sidesnumber

Number of polygon sides.

Default 4

# sizenumber

Size of the shape.

Default 25

#line()

# curveCurveFactory | CurveFactoryLineOnly

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

# definedAccessorForArrayItem<Datum, boolean>

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>

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

# ynumber | AccessorForArrayItem<Datum, number>

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

#<Line />

# classNamestring

className to apply to line element.

# fillstring

fill color applied to line element.

Default transparent

# fromPoint

Starting x,y point of the line.

Default { x: 0, y: 0 }

# innerRefRef<SVGLineElement>

reference to line element.

# toPoint

Ending x,y point of the line.

Default { x: 1, y: 1 }

#<LinePath />

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

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

# classNamestring

className applied to path element.

# curveCurveFactory | CurveFactoryLineOnly

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

# dataDatum[]

Array of data for which to generate a line shape.

Default []

# definedAccessorForArrayItem<Datum, boolean>

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

Fill color of the path element.

Default transparent

# innerRefRef<SVGPathElement>

React RefObject passed to the path element.

# xnumber | AccessorForArrayItem<Datum, number>

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

# ynumber | AccessorForArrayItem<Datum, number>

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

#<LineRadial />

# anglenumber | AccessorForArrayItem<Datum, number>

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

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

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

# classNamestring

className applied to path element.

# curveCurveFactory | CurveFactoryLineOnly

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

# dataDatum[]

Array of data for which to generate a line shape.

Default []

# definedAccessorForArrayItem<Datum, boolean>

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

Fill color of the path element.

Default transparent

# innerRefRef<SVGPathElement>

React RefObject passed to the path element.

# radiusnumber | AccessorForArrayItem<Datum, number>

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

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

# classNamestring

className applied to path element.

# innerRefRef<SVGPathElement>

React ref to the path element.

# pathPathType<Link>

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

# percentnumber

Default 0.2

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

#<LinkHorizontalLine />

# dataLinkrequired

Datum for which to render a link.

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

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

# classNamestring

className applied to path element.

# innerRefRef<SVGPathElement>

React ref to the path element.

# pathPathType<Link>

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

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

#<LinkHorizontalStep />

# dataLinkrequired

Datum for which to render a link.

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

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

# classNamestring

className applied to path element.

# innerRefRef<SVGPathElement>

React ref to the path element.

# pathPathType<Link>

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

# percentnumber

Default 0.5

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

#<LinkRadialCurve />

# dataLinkrequired

Datum for which to render a link.

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

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

# classNamestring

className applied to path element.

# innerRefRef<SVGPathElement>

React ref to the path element.

# pathPathType<Link>

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

# percentnumber

Default 0.2

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

#<LinkRadialLine />

# dataLinkrequired

Datum for which to render a link.

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

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

# classNamestring

className applied to path element.

# innerRefRef<SVGPathElement>

React ref to the path element.

# pathPathType<Link>

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

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

#<LinkRadialStep />

# dataLinkrequired

Datum for which to render a link.

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

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

# classNamestring

className applied to path element.

# innerRefRef<SVGPathElement>

React ref to the path element.

# pathPathType<Link>

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

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

#<LinkVerticalCurve />

# dataLinkrequired

Datum for which to render a link.

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

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

# classNamestring

className applied to path element.

# innerRefRef<SVGPathElement>

React ref to the path element.

# pathPathType<Link>

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

# percentnumber

Default 0.2

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

#<LinkVerticalLine />

# dataLinkrequired

Datum for which to render a link.

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

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

# classNamestring

className applied to path element.

# innerRefRef<SVGPathElement>

React ref to the path element.

# pathPathType<Link>

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

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

#<LinkVerticalStep />

# dataLinkrequired

Datum for which to render a link.

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

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

# classNamestring

className applied to path element.

# innerRefRef<SVGPathElement>

React ref to the path element.

# pathPathType<Link>

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

# percentnumber

Default 0.5

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

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

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>

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

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

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

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

# startAnglenumber | AngleAccessor<Datum>

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>

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

#<Pie />

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

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

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

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

# classNamestring

className applied to path element.

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

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

# dataDatum[]

Array of data to generate a Pie for.

Default []

# endAnglenumber | AngleAccessor<Datum>

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>

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

Default ""

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

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

Default 0

# leftnumber

Left offset of rendered Pie.

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

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

# padAnglenumber | AngleAccessor<Datum>

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

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

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

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

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

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

# pieValueAccessor<Datum, number>

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

# startAnglenumber | AngleAccessor<Datum>

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

Top offset of rendered Pie.

#<Polygon />

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

Polygon center position.

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

Render function override which is passed the generated polygon points.

# classNamestring

className to apply to polygon element.

# innerRefRef<SVGPolygonElement>

Reference to polygon element.

# points[number, number][]

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

# rotatenumber

Rotation transform to apply to polygon.

Default 0

# sidesnumber

Number of polygon sides.

Default 4

# sizenumber

Size of the shape.

Default 25

#radialLine()

# anglenumber | AccessorForArrayItem<Datum, number>

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

# curveCurveFactory | CurveFactoryLineOnly

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

# definedAccessorForArrayItem<Datum, boolean>

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>

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.

# stylesPick<SVGProps<SVGPathElement>, "string" | "scale" | "width" | "height" | "dx" | "dy" | "className" | "stroke" | "radius" | "color" | "id" | "lang" | "max" | ... 453 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

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

# classNamestring

className applied to path element.

# curveCurveFactory | CurveFactoryLineOnly

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

# definedAccessorForArrayItem<Datum, boolean>

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

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

# xnumber | AccessorForArrayItem<Datum, number>

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

# ynumber | AccessorForArrayItem<Datum, number>

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

#stack()

# keysKey[]

Array of keys corresponding to stack layers.

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

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"

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)

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

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

# classNamestring

className applied to path element.

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

Returns a color for a given stack key and index.

# curveCurveFactory

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

# definedAccessorForArrayItem<SeriesPoint<Datum>, boolean>

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

Array of keys corresponding to stack layers.

# leftnumber

Left offset of rendered Stack.

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

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"

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

# topnumber

Top offset of rendered Stack.

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

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

# xAccessorForArrayItem<SeriesPoint<Datum>, number>

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

# x0AccessorForArrayItem<SeriesPoint<Datum>, number>

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

# x1AccessorForArrayItem<SeriesPoint<Datum>, number>

Specifies the x1 accessor function which defaults to null.

# y0AccessorForArrayItem<SeriesPoint<Datum>, number>

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

# y1AccessorForArrayItem<SeriesPoint<Datum>, number>

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

#stackOffset()

#stackOrder()

Exports