@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

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:

# 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>
Defaultval => 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>
Defaultd => d[0]

# BarStack.y1<func>
Defaultd => 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>
Defaultd => d[0]

# BarStackHorizontal.x1<func>
Defaultd => 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]>
Defaultnew Point({ x: 0, y: 0 })

# Line.innerRef<union(func|object)>

# Line.to<shape[object Object]>
Defaultnew 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)>
Default0

# 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]>
Defaultnew Point({ x: 0, y: 0 })

# Polygon.children<func>

# Polygon.className<string>

# Polygon.innerRef<union(func|object)>

# Polygon.rotate<number>
Default0

# Polygon.sides<number> required

# Polygon.size<number>
Default25

<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>
Default0.2

# LinkHorizontalCurve.source<func>
Defaultd => d.source

# LinkHorizontalCurve.target<func>
Defaultd => d.target

# LinkHorizontalCurve.x<func>
Defaultd => d.y

# LinkHorizontalCurve.y<func>
Defaultd => d.x

<LinkRadialCurve />

# LinkRadialCurve.children<func>

# LinkRadialCurve.innerRef<union(func|object)>

# LinkRadialCurve.path<func>

# LinkRadialCurve.percent<number>
Default0.2

# LinkRadialCurve.source<func>
Defaultd => d.source

# LinkRadialCurve.target<func>
Defaultd => d.target

# LinkRadialCurve.x<func>
Defaultd => d.x

# LinkRadialCurve.y<func>
Defaultd => d.y

<LinkVerticalCurve />

# LinkVerticalCurve.children<func>

# LinkVerticalCurve.innerRef<union(func|object)>

# LinkVerticalCurve.path<func>

# LinkVerticalCurve.percent<number>
Default0.2

# LinkVerticalCurve.source<func>
Defaultd => d.source

# LinkVerticalCurve.target<func>
Defaultd => d.target

# LinkVerticalCurve.x<func>
Defaultd => d.x

# LinkVerticalCurve.y<func>
Defaultd => d.y

<LinkHorizontal />

# LinkHorizontal.children<func>

# LinkHorizontal.innerRef<union(func|object)>

# LinkHorizontal.path<func>

# LinkHorizontal.source<func>
Defaultd => d.source

# LinkHorizontal.target<func>
Defaultd => d.target

# LinkHorizontal.x<func>
Defaultd => d.y

# LinkHorizontal.y<func>
Defaultd => d.x

<LinkRadial />

# LinkRadial.angle<func>
Defaultd => d.x

# LinkRadial.children<func>

# LinkRadial.innerRef<union(func|object)>

# LinkRadial.path<func>

# LinkRadial.radius<func>
Defaultd => d.y

# LinkRadial.source<func>
Defaultd => d.source

# LinkRadial.target<func>
Defaultd => d.target

<LinkVertical />

# LinkVertical.innerRef<union(func|object)>

# LinkVertical.path<func>

# LinkVertical.source<func>
Defaultd => d.source

# LinkVertical.target<func>
Defaultd => d.target

# LinkVertical.x<func>
Defaultd => d.x

# LinkVertical.y<func>
Defaultd => d.y

<LinkHorizontalLine />

# LinkHorizontalLine.children<func>

# LinkHorizontalLine.innerRef<union(func|object)>

# LinkHorizontalLine.path<func>

# LinkHorizontalLine.source<func>
Defaultd => d.source

# LinkHorizontalLine.target<func>
Defaultd => d.target

# LinkHorizontalLine.x<func>
Defaultd => d.y

# LinkHorizontalLine.y<func>
Defaultd => d.x

<LinkRadialLine />

# LinkRadialLine.children<func>

# LinkRadialLine.innerRef<union(func|object)>

# LinkRadialLine.path<func>

# LinkRadialLine.source<func>
Defaultd => d.source

# LinkRadialLine.target<func>
Defaultd => d.target

# LinkRadialLine.x<func>
Defaultd => d.x

# LinkRadialLine.y<func>
Defaultd => d.y

<LinkVerticalLine />

# LinkVerticalLine.children<func>

# LinkVerticalLine.innerRef<union(func|object)>

# LinkVerticalLine.path<func>

# LinkVerticalLine.source<func>
Defaultd => d.source

# LinkVerticalLine.target<func>
Defaultd => d.target

# LinkVerticalLine.x<func>
Defaultd => d.x

# LinkVerticalLine.y<func>
Defaultd => d.y

<LinkHorizontalStep />

# LinkHorizontalStep.children<func>

# LinkHorizontalStep.innerRef<union(func|object)>

# LinkHorizontalStep.path<func>

# LinkHorizontalStep.percent<number>
Default0.5

# LinkHorizontalStep.source<func>
Defaultd => d.source

# LinkHorizontalStep.target<func>
Defaultd => d.target

# LinkHorizontalStep.x<func>
Defaultd => d.y

# LinkHorizontalStep.y<func>
Defaultd => d.x

<LinkRadialStep />

# LinkRadialStep.children<func>

# LinkRadialStep.innerRef<union(func|object)>

# LinkRadialStep.path<func>

# LinkRadialStep.source<func>
Defaultd => d.source

# LinkRadialStep.target<func>
Defaultd => d.target

# LinkRadialStep.x<func>
Defaultd => d.x

# LinkRadialStep.y<func>
Defaultd => d.y

<LinkVerticalStep />

# LinkVerticalStep.children<func>

# LinkVerticalStep.innerRef<union(func|object)>

# LinkVerticalStep.path<func>

# LinkVerticalStep.percent<number>
Default0.5

# LinkVerticalStep.source<func>
Defaultd => d.source

# LinkVerticalStep.target<func>
Defaultd => d.target

# LinkVerticalStep.x<func>
Defaultd => d.x

# LinkVerticalStep.y<func>
Defaultd => d.y