@vx/shape
Shapes are the core elements of vx. Most of what you see on the screen, like lines, bars, and areas are shapes.
Installation
npm install --save @vx/shape
Components
- Arc
- Area
- AreaClosed
- AreaStack
- Bar
- BarGroup
- BarGroupHorizontal
- BarStack
- BarStackHorizontal
- Circle
- Line
- LinePath
- LineRadial
- Pie
- Polygon
- Stack
- LinkHorizontalCurve
- LinkRadialCurve
- LinkVerticalCurve
- LinkHorizontal
- LinkRadial
- LinkVertical
- LinkHorizontalLine
- LinkRadialLine
- LinkVerticalLine
- LinkHorizontalStep
- LinkRadialStep
- LinkVerticalStep
API
<Arc />
# Arc.centroid<union(func|number)>
# Arc.children<func>
# Arc.className<string>
# Arc.cornerRadius<union(func|number)>
# Arc.data<any>
# Arc.endAngle<union(func|number)>
# Arc.innerRadius<union(func|number)>
# Arc.innerRef<union(func|object)>
# Arc.outerRadius<union(func|number)>
# Arc.padAngle<union(func|number)>
# Arc.padRadius<union(func|number)>
# Arc.startAngle<union(func|number)>
<Area />
# Area.children<func>
# Area.className<string>
# Area.curve<func>
# Area.data<any>
# Area.defined<func>
Default | () => true |
# Area.innerRef<union(func|object)>
# Area.x<union(func|number)>
# Area.x0<union(func|number)>
# Area.x1<union(func|number)>
# Area.y<union(func|number)>
# Area.y0<union(func|number)>
# Area.y1<union(func|number)>
<AreaClosed />
# AreaClosed.children<func>
# AreaClosed.className<string>
# AreaClosed.curve<func>
# AreaClosed.data<any>
# AreaClosed.defined<func>
Default | () => true |
# AreaClosed.innerRef<union(func|object)>
# AreaClosed.x<union(func|number)>
# AreaClosed.x0<union(func|number)>
# AreaClosed.x1<union(func|number)>
# AreaClosed.y0<union(func|number)>
# AreaClosed.y1<union(func|number)>
# AreaClosed.yScale<func>
<AreaStack />
# AreaStack.children<func>
# AreaStack.className<string>
# AreaStack.color<func>
# AreaStack.curve<func>
# AreaStack.data<array>
# AreaStack.defined<union(func|bool)>
# AreaStack.keys<array>
# AreaStack.left<number>
# AreaStack.offset<union(func|array|string)>
# AreaStack.order<union(func|array|string)>
# AreaStack.top<number>
# AreaStack.value<union(func|number)>
# AreaStack.x<union(func|number)>
# AreaStack.x0<union(func|number)>
# AreaStack.x1<union(func|number)>
# AreaStack.y<union(func|number)>
# AreaStack.y0<union(func|number)>
# AreaStack.y1<union(func|number)>
<Bar />
# Bar.className<string>
# Bar.innerRef<union(func|object)>
<BarGroup />
Generates bar groups as an array of objects and renders <rect />
s for each datum grouped by key
. A general setup might look like this:
const data = [{
date: date1,
key1: value,
key2: value,
key3: value
}, {
date: date2,
key1: value,
key2: value,
key3: value,
}];
const x0 = d => d.date;
const keys = [key1, key2, key3];
const x0Scale = scaleBand({
domain: data.map(x0),
padding: 0.2
});
const x1Scale = scaleBand({
domain: keys,
padding: 0.1
});
const yScale = scaleLinear({
domain: [0, Math.max(...data.map(d => Math.max(...keys.map(key => d[key]))))]
});
const color = scaleOrdinal({
domain: keys,
range: [blue, green, purple]
});
Example: https://vx-demo.now.sh/bargroup
# BarGroup.children<func>
A function that returns a react component. Useful for generating the bar group data with full control over what is rendered. The functions first argument will be the bar groups data as an array of objects with the following properties:
index<number>
- the index of the group based on props.data array.x0<number>
- the position of the group based on props.x0 & props.x0Scale.bars<array>
- array of objects, ordered by props.keys, with the following properties:index<number>
- the index of the bar for the current group.key<string>
- the key of the bar.width<number>
- the width of the bar. This will bex1Scale.bandwidth()
. Ifx1Scale
does not have a bandwidth property, then it becomes:x1Range = x1Scale.range(); x1Domain = x1Scale.domain(); barWidth = Math.abs(x1Range[x1Range.length - 1] - x1Range[0]) / x1Domain.length
height<number>
- the height of the bar.x<number>
- the x position of the bar.y<number>
- the y position of the bar.color<string>
- the color of the bar.
# BarGroup.className<string>
Add a class name to the containing <g>
element.
# BarGroup.color<func> required
color(key, barIndex)
A function that returns color for each bar within a bar group.
# BarGroup.data<array> required
An array of bar group objects.
# BarGroup.height<number> required
Height is used to align the bottom of the the bars. barHeight = height - yScale(bar.value), where bar.y = yScale(bar.value).
# BarGroup.keys<array> required
An array of strings containing the key for each bar group. Each bar within a bar group will follow the order of this array.
# BarGroup.left<number>
A left pixel offset applied to the entire bar group.
# BarGroup.top<number>
A top pixel offset applied to the entire bar group.
# BarGroup.x0<func> required
x0(barGroup)
An accessor function that returns the x0
value for each datum in props.data.
# BarGroup.x0Scale<func> required
x0Scale(x0(barGroup))
A scale function that returns the x position of the bar group.
# BarGroup.x1Scale<func> required
x1Scale(key)
A scale function that returns the x position of the bar within a bar group.
# BarGroup.yScale<func> required
yScale(value)
A scale function that retuns the y position of the bar within a bar group. value
is the value of the key
in the bar group.
<BarGroupHorizontal />
# BarGroupHorizontal.children<func>
# BarGroupHorizontal.className<string>
# BarGroupHorizontal.color<func> required
# BarGroupHorizontal.data<array> required
# BarGroupHorizontal.keys<array> required
# BarGroupHorizontal.left<number>
# BarGroupHorizontal.top<number>
# BarGroupHorizontal.width<number> required
# BarGroupHorizontal.x<func>
Default | val => 0 |
# BarGroupHorizontal.xScale<func> required
# BarGroupHorizontal.y0<func> required
# BarGroupHorizontal.y0Scale<func> required
# BarGroupHorizontal.y1Scale<func> required
<BarStack />
# BarStack.children<func>
# BarStack.className<string>
# BarStack.color<func> required
# BarStack.data<array> required
# BarStack.keys<array> required
# BarStack.left<number>
# BarStack.offset<union(func|array|string)>
# BarStack.order<union(func|array|string)>
# BarStack.top<number>
# BarStack.value<union(func|number)>
# BarStack.x<func> required
# BarStack.xScale<func> required
# BarStack.y0<func>
Default | d => d[0] |
# BarStack.y1<func>
Default | d => d[1] |
# BarStack.yScale<func> required
<BarStackHorizontal />
# BarStackHorizontal.children<func>
# BarStackHorizontal.className<string>
# BarStackHorizontal.color<func> required
# BarStackHorizontal.data<array> required
# BarStackHorizontal.keys<array> required
# BarStackHorizontal.left<number>
# BarStackHorizontal.offset<union(func|array|string)>
# BarStackHorizontal.order<union(func|array|string)>
# BarStackHorizontal.top<number>
# BarStackHorizontal.value<union(func|number)>
# BarStackHorizontal.x0<func>
Default | d => d[0] |
# BarStackHorizontal.x1<func>
Default | d => d[1] |
# BarStackHorizontal.xScale<func> required
# BarStackHorizontal.y<func> required
# BarStackHorizontal.yScale<func> required
<Circle />
# Circle.className<string>
# Circle.innerRef<union(func|object)>
<Line />
# Line.className<string>
Default | '' |
# Line.fill
Default | 'transparent' |
# Line.from<shape[object Object]>
Default | new Point({ x: 0, y: 0 }) |
# Line.innerRef<union(func|object)>
# Line.to<shape[object Object]>
Default | new Point({ x: 1, y: 1 }) |
<LinePath />
# LinePath.curve<func>
# LinePath.data<array>
# LinePath.defined<union(func|bool)>
Default | () => true |
# LinePath.fill
Default | 'transparent' |
# LinePath.innerRef<union(func|object)>
# LinePath.x<union(func|number)>
# LinePath.y<union(func|number)>
<LineRadial />
# LineRadial.angle<union(func|number)>
# LineRadial.className<string>
# LineRadial.curve<func>
# LineRadial.data<any>
# LineRadial.fill
Default | 'transparent' |
# LineRadial.innerRef<union(func|object)>
# LineRadial.radius<union(func|number)>
<Pie />
# Pie.centroid<union(func|number)>
# Pie.children<func>
# Pie.className<string>
# Pie.cornerRadius<union(func|number)>
# Pie.data<array>
# Pie.endAngle<union(func|number)>
# Pie.innerRadius<union(func|number)>
Default | 0 |
# Pie.left<number>
# Pie.outerRadius<union(func|number)>
# Pie.padAngle<union(func|number)>
# Pie.padRadius<union(func|number)>
# Pie.pieSort<func>
# Pie.pieSortValues<func>
# Pie.pieValue<union(func|number)>
# Pie.startAngle<union(func|number)>
# Pie.top<number>
<Polygon />
# Polygon.center<shape[object Object]>
Default | new Point({ x: 0, y: 0 }) |
# Polygon.children<func>
# Polygon.className<string>
# Polygon.innerRef<union(func|object)>
# Polygon.rotate<number>
Default | 0 |
# Polygon.sides<number> required
# Polygon.size<number>
Default | 25 |
<Stack />
# Stack.children<func>
# Stack.className<string>
# Stack.color<func>
# Stack.curve<func>
# Stack.data<array> required
# Stack.defined<union(func|bool)>
# Stack.keys<array>
# Stack.left<number>
# Stack.offset<union(func|array|string)>
# Stack.order<union(func|array|string)>
# Stack.top<number>
# Stack.value<union(func|number)>
# Stack.x<union(func|number)>
# Stack.x0<union(func|number)>
# Stack.x1<union(func|number)>
# Stack.y<union(func|number)>
# Stack.y0<union(func|number)>
# Stack.y1<union(func|number)>
<LinkHorizontalCurve />
# LinkHorizontalCurve.children<func>
# LinkHorizontalCurve.innerRef<union(func|object)>
# LinkHorizontalCurve.path<func>
# LinkHorizontalCurve.percent<number>
Default | 0.2 |
# LinkHorizontalCurve.source<func>
Default | d => d.source |
# LinkHorizontalCurve.target<func>
Default | d => d.target |
# LinkHorizontalCurve.x<func>
Default | d => d.y |
# LinkHorizontalCurve.y<func>
Default | d => d.x |
<LinkRadialCurve />
# LinkRadialCurve.children<func>
# LinkRadialCurve.innerRef<union(func|object)>
# LinkRadialCurve.path<func>
# LinkRadialCurve.percent<number>
Default | 0.2 |
# LinkRadialCurve.source<func>
Default | d => d.source |
# LinkRadialCurve.target<func>
Default | d => d.target |
# LinkRadialCurve.x<func>
Default | d => d.x |
# LinkRadialCurve.y<func>
Default | d => d.y |
<LinkVerticalCurve />
# LinkVerticalCurve.children<func>
# LinkVerticalCurve.innerRef<union(func|object)>
# LinkVerticalCurve.path<func>
# LinkVerticalCurve.percent<number>
Default | 0.2 |
# LinkVerticalCurve.source<func>
Default | d => d.source |
# LinkVerticalCurve.target<func>
Default | d => d.target |
# LinkVerticalCurve.x<func>
Default | d => d.x |
# LinkVerticalCurve.y<func>
Default | d => d.y |
<LinkHorizontal />
# LinkHorizontal.children<func>
# LinkHorizontal.innerRef<union(func|object)>
# LinkHorizontal.path<func>
# LinkHorizontal.source<func>
Default | d => d.source |
# LinkHorizontal.target<func>
Default | d => d.target |
# LinkHorizontal.x<func>
Default | d => d.y |
# LinkHorizontal.y<func>
Default | d => d.x |
<LinkRadial />
# LinkRadial.angle<func>
Default | d => d.x |
# LinkRadial.children<func>
# LinkRadial.innerRef<union(func|object)>
# LinkRadial.path<func>
# LinkRadial.radius<func>
Default | d => d.y |
# LinkRadial.source<func>
Default | d => d.source |
# LinkRadial.target<func>
Default | d => d.target |
<LinkVertical />
# LinkVertical.innerRef<union(func|object)>
# LinkVertical.path<func>
# LinkVertical.source<func>
Default | d => d.source |
# LinkVertical.target<func>
Default | d => d.target |
# LinkVertical.x<func>
Default | d => d.x |
# LinkVertical.y<func>
Default | d => d.y |
<LinkHorizontalLine />
# LinkHorizontalLine.children<func>
# LinkHorizontalLine.innerRef<union(func|object)>
# LinkHorizontalLine.path<func>
# LinkHorizontalLine.source<func>
Default | d => d.source |
# LinkHorizontalLine.target<func>
Default | d => d.target |
# LinkHorizontalLine.x<func>
Default | d => d.y |
# LinkHorizontalLine.y<func>
Default | d => d.x |
<LinkRadialLine />
# LinkRadialLine.children<func>
# LinkRadialLine.innerRef<union(func|object)>
# LinkRadialLine.path<func>
# LinkRadialLine.source<func>
Default | d => d.source |
# LinkRadialLine.target<func>
Default | d => d.target |
# LinkRadialLine.x<func>
Default | d => d.x |
# LinkRadialLine.y<func>
Default | d => d.y |
<LinkVerticalLine />
# LinkVerticalLine.children<func>
# LinkVerticalLine.innerRef<union(func|object)>
# LinkVerticalLine.path<func>
# LinkVerticalLine.source<func>
Default | d => d.source |
# LinkVerticalLine.target<func>
Default | d => d.target |
# LinkVerticalLine.x<func>
Default | d => d.x |
# LinkVerticalLine.y<func>
Default | d => d.y |
<LinkHorizontalStep />
# LinkHorizontalStep.children<func>
# LinkHorizontalStep.innerRef<union(func|object)>
# LinkHorizontalStep.path<func>
# LinkHorizontalStep.percent<number>
Default | 0.5 |
# LinkHorizontalStep.source<func>
Default | d => d.source |
# LinkHorizontalStep.target<func>
Default | d => d.target |
# LinkHorizontalStep.x<func>
Default | d => d.y |
# LinkHorizontalStep.y<func>
Default | d => d.x |
<LinkRadialStep />
# LinkRadialStep.children<func>
# LinkRadialStep.innerRef<union(func|object)>
# LinkRadialStep.path<func>
# LinkRadialStep.source<func>
Default | d => d.source |
# LinkRadialStep.target<func>
Default | d => d.target |
# LinkRadialStep.x<func>
Default | d => d.x |
# LinkRadialStep.y<func>
Default | d => d.y |
<LinkVerticalStep />
# LinkVerticalStep.children<func>
# LinkVerticalStep.innerRef<union(func|object)>
# LinkVerticalStep.path<func>
# LinkVerticalStep.percent<number>
Default | 0.5 |
# LinkVerticalStep.source<func>
Default | d => d.source |
# LinkVerticalStep.target<func>
Default | d => d.target |
# LinkVerticalStep.x<func>
Default | d => d.x |
# LinkVerticalStep.y<func>
Default | d => d.y |