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
<Shape.LineRadial />
<Shape.Pie />
<Shape.Stack />
<Threshold />
<Shape.AreaStack />
<Shape.BarStackHorizontal />
<Shape.BarGroup />
<Shape.Line /> + <Shape.LineRadial />
<Shape.Link* />
APIs
#arc()
number | Accessor<Datum, number>
Number or accessor function which returns a number, which defines the arc cornerRadius.
number | Accessor<Datum, number>
Number or accessor function which returns a number, which defines the arc endAngle.
number | Accessor<Datum, number>
Number or accessor function which returns a number, which defines the arc innerRadius.
number | Accessor<Datum, number>
Number or accessor function which returns a number, which defines the arc outerRadius.
number | Accessor<Datum, number>
Number or accessor function which returns a number, which defines the arc padAngle.
number | Accessor<Datum, number>
Number or accessor function which returns a number, which defines the arc padRadius.
number | Accessor<Datum, number>
Number or accessor function which returns a number, which defines the arc startAngle.
#<Arc />
(args: { path: Arc<any, Datum>; }) => ReactNode
Override render function which is passed the configured arc generator as input.
string
className applied to path element.
number | Accessor<Datum, number>
Number or accessor function which returns a number, which defines the arc cornerRadius.
Datum
A Datum for which to generate an arc.
number | Accessor<Datum, number>
Number or accessor function which returns a number, which defines the arc endAngle.
number | Accessor<Datum, number>
Number or accessor function which returns a number, which defines the arc innerRadius.
Ref<SVGPathElement>
React ref to the path element.
number | Accessor<Datum, number>
Number or accessor function which returns a number, which defines the arc outerRadius.
number | Accessor<Datum, number>
Number or accessor function which returns a number, which defines the arc padAngle.
number | Accessor<Datum, number>
Number or accessor function which returns a number, which defines the arc padRadius.
number | Accessor<Datum, number>
Number or accessor function which returns a number, which defines the arc startAngle.
#area()
CurveFactory
Sets the curve factory (from @visx/curve or d3-curve) for the area generator. Defaults to curveLinear.
AccessorForArrayItem<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.
number | AccessorForArrayItem<Datum, number>
Sets the x0 accessor function, and sets x1 to null.
number | AccessorForArrayItem<Datum, number>
Specifies the x0 accessor function which defaults to d => d0.
number | AccessorForArrayItem<Datum, number>
Specifies the x1 accessor function which defaults to null.
number | AccessorForArrayItem<Datum, number>
Sets the y0 accessor function, and sets y1 to null.
number | AccessorForArrayItem<Datum, number>
Specifies the y0 accessor function which defaults to d => 0.
#<Area />
(args: { path: Area<Datum>; }) => ReactNode
Override render function which is passed the configured area generator as input.
string
Classname applied to path element.
CurveFactory
Sets the curve factory (from @visx/curve or d3-curve) for the area generator. Defaults to curveLinear.
Datum[]
Array of data for which to generate an area shape.
Default []
AccessorForArrayItem<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
Ref<SVGPathElement>
React RefObject passed to the path element.
number | AccessorForArrayItem<Datum, number>
Sets the x0 accessor function, and sets x1 to null.
number | AccessorForArrayItem<Datum, number>
Specifies the x0 accessor function which defaults to d => d0.
number | AccessorForArrayItem<Datum, number>
Specifies the x1 accessor function which defaults to null.
number | AccessorForArrayItem<Datum, number>
Sets the y0 accessor function, and sets y1 to null.
number | AccessorForArrayItem<Datum, number>
Specifies the y0 accessor function which defaults to d => 0.
#<AreaClosed />
(args: { path: Area<Datum>; }) => ReactNode
Override render function which is passed the configured area generator as input.
string
Classname applied to path element.
CurveFactory
Sets the curve factory (from @visx/curve or d3-curve) for the area generator. Defaults to curveLinear.
Datum[]
Array of data for which to generate an area shape.
Default []
AccessorForArrayItem<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
Ref<SVGPathElement>
React RefObject passed to the path element.
number | AccessorForArrayItem<Datum, number>
Sets the x0 accessor function, and sets x1 to null.
number | AccessorForArrayItem<Datum, number>
Specifies the x0 accessor function which defaults to d => d0.
number | AccessorForArrayItem<Datum, number>
Specifies the x1 accessor function which defaults to null.
number | AccessorForArrayItem<Datum, number>
Sets the y0 accessor function, and sets y1 to null.
number | AccessorForArrayItem<Datum, number>
Specifies the y0 accessor function which defaults to d => 0.
#<AreaStack />
Array of data for which generates a stack.
(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.
string
className applied to path element.
(key: Key, index: number) => string
Returns a color for a given stack key and index.
CurveFactory
Sets the curve factory (from @visx/curve or d3-curve) for the area generator. Defaults to curveLinear.
AccessorForArrayItem<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.
Key[]
Array of keys corresponding to stack layers.
number
Left offset of rendered Stack.
"none" | "expand" | "diverging" | "silhouette" | "wiggle"
Sets the stack offset to the pre-defined d3 offset, see https://github.com/d3/d3-shape#stack_offset.
"none" | "ascending" | "descending" | "reverse" | "insideout"
Sets the stack order to the pre-defined d3 function, see https://github.com/d3/d3-shape#stack_order.
number
Top offset of rendered Stack.
number | ((d: Datum, key: Key) => number)
Sets the value accessor for a Datum, which defaults to dkey.
AccessorForArrayItem<SeriesPoint<Datum>, number>
Sets the x0 accessor function, and sets x1 to null.
AccessorForArrayItem<SeriesPoint<Datum>, number>
Specifies the x0 accessor function which defaults to d => d0.
AccessorForArrayItem<SeriesPoint<Datum>, number>
Specifies the x1 accessor function which defaults to null.
AccessorForArrayItem<SeriesPoint<Datum>, number>
Specifies the y0 accessor function which defaults to d => 0.
#<Bar />
string
className to apply to rect element.
Ref<SVGRectElement>
reference to rect element.
#<BarGroup />
Returns the desired color for a bar with a given key and index.
Array of data for which to generate grouped bars.
Total height of the y-axis.
Array of keys corresponding to stack layers.
Returns the value mapped to the x0 (group position) of a bar
@visx /scale or d3-scale that takes an x0 value (position of group) and maps it to an x0 axis position of the group.
@visx /scale or d3-scale that takes a group key and maps it to an x axis position (within a group).
@visx /scale or d3-scale that takes an y value (Datumkey) and maps it to a y axis position.
(barGroups: BarGroup<Key>[]) => ReactNode
Override render function which is passed the computed BarGroups.
string
className applied to Bars.
number
Left offset of rendered Bars.
number
Top offset of rendered Bars.
#<BarGroupHorizontal />
Returns the desired color for a bar with a given key and index.
Array of data for which to generate grouped bars.
Array of keys corresponding to stack layers.
Total width of the x-axis.
@visx /scale or d3-scale that takes a key value (Datumkey) and maps it to an x axis position (width of bar).
Returns the value mapped to the y0 (position of group) of a bar
@visx /scale or d3-scale that takes a y0 value (position of group) and maps it to a y axis position.
@visx /scale or d3-scale that takes a group key and maps it to an y axis position (within a group).
(barGroups: BarGroupHorizontal<Key>[]) => ReactNode
Override render function which is passed the computed Ba/rGroups.
string
className applied to Bars.
number
Left offset of rendered Bars.
number
Top offset of rendered Bars.
#<BarRounded />
height of the bar starting from y
corner radius of the bar. clamped to center of the shorter side of the bar (Math.min(width,height) / 2)
width of the bar starting from x
left position of the bar
top position of the bar
boolean
apply corner radius to top left corner, top right corner, bottom right corner, and bottom left corner
Default false
boolean
apply corner radius to bottom right corner, and bottom left corner
Default false
boolean
apply corner radius to bottom left corner
Default false
boolean
apply corner radius to bottom right
Default false
({ path }: { path: string; }) => ReactNode
Optional children override.
string
className to apply to path element.
Ref<SVGPathElement>
reference to path element.
boolean
apply corner radius to top left corner, and bottom left corner
Default false
boolean
apply corner radius to top right corner, and bottom right corner
Default false
boolean
apply corner radius to top left corner, and top right corner
Default false
boolean
apply corner radius to top left corner
Default false
boolean
apply corner radius to top right corner
Default false
#<BarStack />
Returns the desired color for a bar with a given key and index.
Array of data for which generates a stack.
Returns the value mapped to the x of a bar.
@visx /scale or d3-scale that takes an x value and maps it to an x axis position.
@visx /scale or d3-scale that takes a y value and maps it to an y axis position.
(stacks: BarStack<Datum, Key>[]) => ReactNode
Override render function which is passed the configured stack generator as input.
string
className applied to path element.
Key[]
Array of keys corresponding to stack layers.
number
Left offset of rendered Stack.
"none" | "expand" | "diverging" | "silhouette" | "wiggle"
Sets the stack offset to the pre-defined d3 offset, see https://github.com/d3/d3-shape#stack_offset.
"none" | "ascending" | "descending" | "reverse" | "insideout"
Sets the stack order to the pre-defined d3 function, see https://github.com/d3/d3-shape#stack_order.
number
Top offset of rendered Stack.
number | ((d: Datum, key: Key) => number)
Sets the value accessor for a Datum, which defaults to dkey.
Accessor<SeriesPoint<Datum>, ScaleInput<YScale>>
Returns the value mapped to the y0 of a bar.
Accessor<SeriesPoint<Datum>, ScaleInput<YScale>>
Returns the value mapped to the y1 of a bar.
#<BarStackHorizontal />
Returns the desired color for a bar with a given key and index.
Array of data for which generates a stack.
@visx /scale or d3-scale that takes an x value and maps it to an x axis position.
Returns the value mapped to the y of a bar.
@visx /scale or d3-scale that takes a y value and maps it to an y axis position.
(stacks: BarStack<Datum, Key>[]) => ReactNode
Override render function which is passed the configured stack generator as input.
string
className applied to path element.
Key[]
Array of keys corresponding to stack layers.
number
Left offset of rendered Stack.
"none" | "expand" | "diverging" | "silhouette" | "wiggle"
Sets the stack offset to the pre-defined d3 offset, see https://github.com/d3/d3-shape#stack_offset.
"none" | "ascending" | "descending" | "reverse" | "insideout"
Sets the stack order to the pre-defined d3 function, see https://github.com/d3/d3-shape#stack_order.
number
Top offset of rendered Stack.
number | ((d: Datum, key: Key) => number)
Sets the value accessor for a Datum, which defaults to dkey.
Accessor<SeriesPoint<Datum>, ScaleInput<XScale>>
Returns the value mapped to the x0 of a bar.
Accessor<SeriesPoint<Datum>, ScaleInput<XScale>>
Returns the value mapped to the x1 of a bar.
#<Circle />
string
className to apply to circle element.
Ref<SVGCircleElement>
reference to circle element.
#degreesToRadians()
#getPoint()
{ x: number; y: number; }
Polygon center position.
number
Rotation transform to apply to polygon.
Default 0
number
Number of polygon sides.
Default 4
number
Size of the shape.
Default 25
#getPoints()
{ x: number; y: number; }
Polygon center position.
number
Rotation transform to apply to polygon.
Default 0
number
Number of polygon sides.
Default 4
number
Size of the shape.
Default 25
#line()
CurveFactory | CurveFactoryLineOnly
Sets the curve factory (from @visx/curve or d3-curve) for the line generator. Defaults to curveLinear.
AccessorForArrayItem<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.
number | AccessorForArrayItem<Datum, number>
Sets the x0 accessor function, and sets x1 to null.
number | AccessorForArrayItem<Datum, number>
Sets the y0 accessor function, and sets y1 to null.
#<Line />
string
className to apply to line element.
string
fill color applied to line element.
Default transparent
Point
Starting x,y point of the line.
Default { x: 0, y: 0 }
Ref<SVGLineElement>
reference to line element.
Point
Ending x,y point of the line.
Default { x: 1, y: 1 }
#<LinePath />
(args: { path: Line<Datum>; }) => ReactNode
Override render function which is passed the configured path generator as input.
string
className applied to path element.
CurveFactory | CurveFactoryLineOnly
Sets the curve factory (from @visx/curve or d3-curve) for the line generator. Defaults to curveLinear.
Datum[]
Array of data for which to generate a line shape.
Default []
AccessorForArrayItem<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
string
Fill color of the path element.
Default transparent
Ref<SVGPathElement>
React RefObject passed to the path element.
number | AccessorForArrayItem<Datum, number>
Sets the x0 accessor function, and sets x1 to null.
number | AccessorForArrayItem<Datum, number>
Sets the y0 accessor function, and sets y1 to null.
#<LineRadial />
number | AccessorForArrayItem<Datum, number>
Returns the angle value in radians for a given Datum, with 0 at -y (12 o’clock).
(args: { path: RadialLine<Datum>; }) => ReactNode
Override render function which is passed the configured path generator as input.
string
className applied to path element.
CurveFactory | CurveFactoryLineOnly
Sets the curve factory (from @visx/curve or d3-curve) for the radialLine generator. Defaults to curveLinear.
Datum[]
Array of data for which to generate a line shape.
Default []
AccessorForArrayItem<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.
string
Fill color of the path element.
Default transparent
Ref<SVGPathElement>
React RefObject passed to the path element.
number | AccessorForArrayItem<Datum, number>
Returns the radius value in radians for a given Datum, with 0 at the center.
#<LinkHorizontalCurve />
Datum for which to render a link.
(args: { path: PathType<Link>; }) => ReactNode
Render function override which is passed the configured path generator as input.
string
className applied to path element.
Ref<SVGPathElement>
React ref to the path element.
PathType<Link>
Path generator, given a link returns a path d attribute string
number
Default 0.2
(link: Link) => Node
Given a link, returns the source node.
(link: Link) => Node
Given a link, returns the target node.
(node: Node) => number
Given a node, returns its x coordinate.
(node: Node) => number
Given a node, returns its y coordinate.
#<LinkHorizontalLine />
Datum for which to render a link.
(args: { path: PathType<Link>; }) => ReactNode
Render function override which is passed the configured path generator as input.
string
className applied to path element.
Ref<SVGPathElement>
React ref to the path element.
PathType<Link>
Path generator, given a link returns a path d attribute string
(link: Link) => Node
Given a link, returns the source node.
(link: Link) => Node
Given a link, returns the target node.
(node: Node) => number
Given a node, returns its x coordinate.
(node: Node) => number
Given a node, returns its y coordinate.
#<LinkHorizontalStep />
Datum for which to render a link.
(args: { path: PathType<Link>; }) => ReactNode
Render function override which is passed the configured path generator as input.
string
className applied to path element.
Ref<SVGPathElement>
React ref to the path element.
PathType<Link>
Path generator, given a link returns a path d attribute string
number
Default 0.5
(link: Link) => Node
Given a link, returns the source node.
(link: Link) => Node
Given a link, returns the target node.
(node: Node) => number
Given a node, returns its x coordinate.
(node: Node) => number
Given a node, returns its y coordinate.
#<LinkRadialCurve />
Datum for which to render a link.
(args: { path: PathType<Link>; }) => ReactNode
Render function override which is passed the configured path generator as input.
string
className applied to path element.
Ref<SVGPathElement>
React ref to the path element.
PathType<Link>
Path generator, given a link returns a path d attribute string
number
Default 0.2
(link: Link) => Node
Given a link, returns the source node.
(link: Link) => Node
Given a link, returns the target node.
(node: Node) => number
Given a node, returns its x coordinate.
(node: Node) => number
Given a node, returns its y coordinate.
#<LinkRadialLine />
Datum for which to render a link.
(args: { path: PathType<Link>; }) => ReactNode
Render function override which is passed the configured path generator as input.
string
className applied to path element.
Ref<SVGPathElement>
React ref to the path element.
PathType<Link>
Path generator, given a link returns a path d attribute string
(link: Link) => Node
Given a link, returns the source node.
(link: Link) => Node
Given a link, returns the target node.
(node: Node) => number
Given a node, returns its x coordinate.
(node: Node) => number
Given a node, returns its y coordinate.
#<LinkRadialStep />
Datum for which to render a link.
(args: { path: PathType<Link>; }) => ReactNode
Render function override which is passed the configured path generator as input.
string
className applied to path element.
Ref<SVGPathElement>
React ref to the path element.
PathType<Link>
Path generator, given a link returns a path d attribute string
number
(link: Link) => Node
Given a link, returns the source node.
(link: Link) => Node
Given a link, returns the target node.
(node: Node) => number
Given a node, returns its x coordinate.
(node: Node) => number
Given a node, returns its y coordinate.
#<LinkVerticalCurve />
Datum for which to render a link.
(args: { path: PathType<Link>; }) => ReactNode
Render function override which is passed the configured path generator as input.
string
className applied to path element.
Ref<SVGPathElement>
React ref to the path element.
PathType<Link>
Path generator, given a link returns a path d attribute string
number
Default 0.2
(link: Link) => Node
Given a link, returns the source node.
(link: Link) => Node
Given a link, returns the target node.
(node: Node) => number
Given a node, returns its x coordinate.
(node: Node) => number
Given a node, returns its y coordinate.
#<LinkVerticalLine />
Datum for which to render a link.
(args: { path: PathType<Link>; }) => ReactNode
Render function override which is passed the configured path generator as input.
string
className applied to path element.
Ref<SVGPathElement>
React ref to the path element.
PathType<Link>
Path generator, given a link returns a path d attribute string
(link: Link) => Node
Given a link, returns the source node.
(link: Link) => Node
Given a link, returns the target node.
(node: Node) => number
Given a node, returns its x coordinate.
(node: Node) => number
Given a node, returns its y coordinate.
#<LinkVerticalStep />
Datum for which to render a link.
(args: { path: PathType<Link>; }) => ReactNode
Render function override which is passed the configured path generator as input.
string
className applied to path element.
Ref<SVGPathElement>
React ref to the path element.
PathType<Link>
Path generator, given a link returns a path d attribute string
number
Default 0.5
(link: Link) => Node
Given a link, returns the source node.
(link: Link) => Node
Given a link, returns the target node.
(node: Node) => number
Given a node, returns its x coordinate.
(node: Node) => number
Given a node, returns its y coordinate.
#pathHorizontalCurve()
(link: Link) => Node
Given a link, returns the source node.
(link: Link) => Node
Given a link, returns the target node.
(node: Node) => number
Given a node, returns its x coordinate.
(node: Node) => number
Given a node, returns its y coordinate.
#pathHorizontalDiagonal()
(link: Link) => Node
Given a link, returns the source node.
(link: Link) => Node
Given a link, returns the target node.
(node: Node) => number
Given a node, returns its x coordinate.
(node: Node) => number
Given a node, returns its y coordinate.
#pathHorizontalLine()
(link: Link) => Node
Given a link, returns the source node.
(link: Link) => Node
Given a link, returns the target node.
(node: Node) => number
Given a node, returns its x coordinate.
(node: Node) => number
Given a node, returns its y coordinate.
#pathHorizontalStep()
(link: Link) => Node
Given a link, returns the source node.
(link: Link) => Node
Given a link, returns the target node.
(node: Node) => number
Given a node, returns its x coordinate.
(node: Node) => number
Given a node, returns its y coordinate.
#pathRadialCurve()
(link: Link) => Node
Given a link, returns the source node.
(link: Link) => Node
Given a link, returns the target node.
(node: Node) => number
Given a node, returns its x coordinate.
(node: Node) => number
Given a node, returns its y coordinate.
#pathRadialDiagonal()
(node: Node) => number
Given a node, returns its x coordinate.
(node: Node) => number
Given a node, returns its y coordinate.
(link: Link) => Node
Given a link, returns the source node.
(link: Link) => Node
Given a link, returns the target node.
#pathRadialLine()
(link: Link) => Node
Given a link, returns the source node.
(link: Link) => Node
Given a link, returns the target node.
(node: Node) => number
Given a node, returns its x coordinate.
(node: Node) => number
Given a node, returns its y coordinate.
#pathRadialStep()
(link: Link) => Node
Given a link, returns the source node.
(link: Link) => Node
Given a link, returns the target node.
(node: Node) => number
Given a node, returns its x coordinate.
(node: Node) => number
Given a node, returns its y coordinate.
#pathVerticalCurve()
(link: Link) => Node
Given a link, returns the source node.
(link: Link) => Node
Given a link, returns the target node.
(node: Node) => number
Given a node, returns its x coordinate.
(node: Node) => number
Given a node, returns its y coordinate.
#pathVerticalDiagonal()
(link: Link) => Node
Given a link, returns the source node.
(link: Link) => Node
Given a link, returns the target node.
(node: Node) => number
Given a node, returns its x coordinate.
(node: Node) => number
Given a node, returns its y coordinate.
#pathVerticalLine()
(link: Link) => Node
Given a link, returns the source node.
(link: Link) => Node
Given a link, returns the target node.
(node: Node) => number
Given a node, returns its x coordinate.
(node: Node) => number
Given a node, returns its y coordinate.
#pathVerticalStep()
(link: Link) => Node
Given a link, returns the source node.
(link: Link) => Node
Given a link, returns the target node.
(node: Node) => number
Given a node, returns its x coordinate.
(node: Node) => number
Given a node, returns its y coordinate.
#pie()
number | 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.
number | AngleAccessor<Datum>
Padding angle of the Pie shape, which sets a fixed linear distance separating adjacent arcs.
(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.
(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.
number | 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.
Accessor<Datum, number>
Invoked for each datum, returns the value for a given Pie segment/arc datum.
#<Pie />
(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.
(provided: ProvidedProps<Datum>) => ReactNode
Render function override which is passed the configured arc generator as input.
string
className applied to path element.
number | Accessor<PieArcDatum<Datum>, number>
Number or accessor function which returns a number, which defines the arc cornerRadius.
Datum[]
Array of data to generate a Pie for.
Default []
number | 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.
string | StringAccessor<Datum>
Optional accessor function to return the fill string value of a given arc.
Default ""
number | Accessor<PieArcDatum<Datum>, number>
Number or accessor function which returns a number, which defines the arc innerRadius.
Default 0
number
Left offset of rendered Pie.
number | Accessor<PieArcDatum<Datum>, number>
Number or accessor function which returns a number, which defines the arc outerRadius.
number | AngleAccessor<Datum>
Padding angle of the Pie shape, which sets a fixed linear distance separating adjacent arcs.
number | Accessor<PieArcDatum<Datum>, number>
Number or accessor function which returns a number, which defines the arc padRadius.
(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.
(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.
Accessor<Datum, number>
Invoked for each datum, returns the value for a given Pie segment/arc datum.
number | 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.
number
Top offset of rendered Pie.
#<Polygon />
{ x: number; y: number; }
Polygon center position.
(args: { points: [number, number][]; }) => ReactNode
Render function override which is passed the generated polygon points.
string
className to apply to polygon element.
Ref<SVGPolygonElement>
Reference to polygon element.
[number, number][]
Points to use to render the polygon. If this is defined, sides
, size
, rotate
, and center
are ignored.
number
Rotation transform to apply to polygon.
Default 0
number
Number of polygon sides.
Default 4
number
Size of the shape.
Default 25
#radialLine()
number | AccessorForArrayItem<Datum, number>
Returns the angle value in radians for a given Datum, with 0 at -y (12 o’clock).
CurveFactory | CurveFactoryLineOnly
Sets the curve factory (from @visx/curve or d3-curve) for the radialLine generator. Defaults to curveLinear.
AccessorForArrayItem<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.
number | AccessorForArrayItem<Datum, number>
Returns the radius value in radians for a given Datum, with 0 at the center.
#<SplitLinePath />
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
.
Array of data segments, where each segment will be a separate path in the rendered line.
Pick<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.
SplitLinePathRenderer
Override render function which is passed the configured path generator as input.
string
className applied to path element.
CurveFactory | CurveFactoryLineOnly
Sets the curve factory (from @visx/curve or d3-curve) for the line generator. Defaults to curveLinear.
AccessorForArrayItem<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.
number
The path
will be sampled every sampleRate
pixel to generate the returned points.
Default is 1
pixel.
number | AccessorForArrayItem<Datum, number>
Sets the x0 accessor function, and sets x1 to null.
number | AccessorForArrayItem<Datum, number>
Sets the y0 accessor function, and sets y1 to null.
#stack()
Key[]
Array of keys corresponding to stack layers.
"none" | "expand" | "diverging" | "silhouette" | "wiggle"
Sets the stack offset to the pre-defined d3 offset, see https://github.com/d3/d3-shape#stack_offset.
"none" | "ascending" | "descending" | "reverse" | "insideout"
Sets the stack order to the pre-defined d3 function, see https://github.com/d3/d3-shape#stack_order.
#<Stack />
Array of data for which generates a stack.
(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.
string
className applied to path element.
(key: Key, index: number) => string
Returns a color for a given stack key and index.
CurveFactory
Sets the curve factory (from @visx/curve or d3-curve) for the area generator. Defaults to curveLinear.
AccessorForArrayItem<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.
Key[]
Array of keys corresponding to stack layers.
number
Left offset of rendered Stack.
"none" | "expand" | "diverging" | "silhouette" | "wiggle"
Sets the stack offset to the pre-defined d3 offset, see https://github.com/d3/d3-shape#stack_offset.
"none" | "ascending" | "descending" | "reverse" | "insideout"
Sets the stack order to the pre-defined d3 function, see https://github.com/d3/d3-shape#stack_order.
number
Top offset of rendered Stack.
number | ((d: Datum, key: Key) => number)
Sets the value accessor for a Datum, which defaults to dkey.
AccessorForArrayItem<SeriesPoint<Datum>, number>
Sets the x0 accessor function, and sets x1 to null.
AccessorForArrayItem<SeriesPoint<Datum>, number>
Specifies the x0 accessor function which defaults to d => d0.
AccessorForArrayItem<SeriesPoint<Datum>, number>
Specifies the x1 accessor function which defaults to null.
AccessorForArrayItem<SeriesPoint<Datum>, number>
Specifies the y0 accessor function which defaults to d => 0.
#stackOffset()
#stackOrder()
Exports
- arc()
- <Arc />
- area()
- <Area />
- <AreaClosed />
- <AreaStack />
- <Bar />
- <BarGroup />
- <BarGroupHorizontal />
- <BarRounded />
- <BarStack />
- <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()