Find file History

Readme.md

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

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

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

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

<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 be x1Scale.bandwidth(). If x1Scale 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>

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

<Line />

# Line.className<string>

Default''

# Line.fill

Default'transparent'

# Line.from<shape[object Object]>

Defaultnew Point({ x: 0, y: 0 })

# Line.innerRef<func>

# Line.to<shape[object Object]>

Defaultnew Point({ x: 1, y: 1 })

<LinePath />

# LinePath.curve<func>

# LinePath.data<array>

# LinePath.defined<enum(PropTypes.func|PropTypes.bool)>

Default() => true

# LinePath.fill

Default'transparent'

# LinePath.innerRef<func>

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

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

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

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

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

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

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

# LinkRadial.path<func>

# LinkRadial.radius<func>

Defaultd => d.y

# LinkRadial.source<func>

Defaultd => d.source

# LinkRadial.target<func>

Defaultd => d.target

<LinkVertical />

# LinkVertical.innerRef<func>

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

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

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

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

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

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

# 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