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

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

### <Line />

# Line.className<string>

Default | ''

# Line.fill

Default | 'transparent'

# Line.from<shape[object Object]>

Default | new Point({ x: 0, y: 0 })

# Line.innerRef<func>

# Line.to<shape[object Object]>

Default | new 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)>

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

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

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

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

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

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

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

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

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

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

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

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

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

# 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