# @vx/shape

    npm install --save @vx/shape

Shapes are the core elements of vx. Most of what you see on the screen, like lines, bars, and areas are shapes.

## `<AreaClosed />`

AreaClosed is a closed area under a curve.

### Example

    <AreaClosed
      data={myData}
      xScale={myXScale}
      yScale={myYScale}
      x={myX}
      y={myY}
      strokeWidth={2}
      stroke={'url(#linear)'}
      fill={'url(#linear)'}
    />

### Properties

Name | Default | Type | Description
--- | --- | --- | ---
x |  | function | A function that takes in a data element and returns the x value.
y |  | function | A function that takes in a data element and returns the y value.
xScale |  | function | A scale function for the xs.
yScale |  | function | A scale function for the ys.
data |  | array | An array of x and y data.
defined | `d => y(d) && x(d)` | function | A function called by `area.defined()`.
className | `vx-area-closed` | string | The class name for the `path` element.
strokeDasharray |  | array | The pattern of dashes in the stroke.
strokeWidth | 2 | number | The size of the stroke.
stroke | black | string | The color of the stroke.
fill | rgba(0,0,0,0.3) | string | The color of the fill.
curve |  | function | The curve function

## `<AreaStack />`

An `<AreaStack />` is used to represent several area's stacked on top of each other.

### Example

    <AreaStack
      reverse
      top={margin.top}
      left={margin.left}
      keys={keys}
      data={data}
      x={(d) => xScale(x(d.data))}
      y0={(d) => yScale(d[0] / 100)}
      y1={(d) => yScale(d[1] / 100)}
      stroke={(d,i) => colorScale(i)}
      strokeWidth={1}
      fillOpacity={(d,i) => selected.includes(browserNames[i]) ? 0.8 : 0.2}
      fill={(d,i) => colorScale(i)}
      onMouseEnter={(d, i) => event => {
        updateSelected((prevState) => ([browserNames[i]]))
      }}
      onMouseLeave={(d,i) => event => {
        updateSelected(prevState => {
          if (prevState.includes(browserNames[i])) return [];
          return prevState;
        })
      }}
    />

### Properties

Name | Default | Type | Description
--- | --- | --- | ---
className |  | string | The class name for the `path` element.
top | 0 | number | The margin on top.
left | 0 | number | The margin on the left.
keys |  | array | Keys for the d3.stack.
data |  | array | The data for each stack.
curve |  | function | The curve function
defined |  | function | A function called by `area.defined()`.
x |  | function | The d3 x function.
x0 |  | function | The d3 x0 function.
x1 |  | function | The d3 x1 function.
y0 |  | function | The d3 y0 function.
y1 |  | function | The d3 y1 function.
glyph |  | glyph | A glyph to be added to the stack.
reverse | false | bool | If true, reverses the order of stacks.

## `<Bar />`

A simple rectangle (a `<rect>` element) to use in your graphs.

### Example

    <Bar
      width={xScale.bandwidth()}
      height={barHeight}
      x={xScale(x(d))}
      y={yMax - barHeight}
      fill="url('#lines')"
      stroke={'black'}
      strokeWidth={1}
    />

### Properties

Name | Default | Type | Description
--- | --- | --- | ---
className |  | string | The class name for the `path` element.
x | 0 | number | A number or function for the x coordinate.
y | 0 | number | A number or function for the y coordinate.
width |  | number | The pixel width of the bar.
height |  | number | The pixel height of the bar.
rx |  | number | The pixel value of the corner radius.
ry |  | number | The pixel value of the corner radius.
fill | steelblue | string | The color for the fill of the rect element.
fillOpacity |  | number | The opacity for the fill of the rect element
stroke |  | string | The color for the stroke of the rect element.
strokeWidth |  | number | The pixel width of the stroke.
strokeDasharray |  | array | The pattern of dashes in the stroke.
strokeLinecap |  | string | The svg linecap of the stroke.
strokeLinejoin |  | string | The svg linejoin of the stroke.
strokeMiterlimit |  | number | The svg Miterlimit of the stroke.
strokeOpacity |  | number | The svg opacity.

## `<Line />`

A simple line. Good for drawing in the sand.

### Example

    <Line
      from={new Point({x:0, y:3})}
      to={new Point({x:0, y:10})}
    />

### Properties

Name | Default | Type | Description
--- | --- | --- | ---
from | new Point({ x: 0 y: 0 }) | Point | The beginning point.
to | new Point({ x: 1 y: 1 }) | Point | The end point.
stroke | black | string | The color of the stroke.
strokeWidth | 1 | number | The pixel width of the stroke.
strokeDasharray |  | array | The pattern of dashes in the stroke.
transform |  | string | An SVG transform.
className |  | string | The class name for the `line` element.

## `<LinePath />`

A more complicated line path. A `<LinePath />` is useful for making line graphs and drawing.

### Example

    <LinePath
      data={dataset[1].data}
      xScale={xScale}
      yScale={yScale}
      x={x}
      y={y}
      stroke={"black"}
      strokeWidth={2}
    />

### Properties

Name | Default | Type | Description
--- | --- | --- | ---
data |  | array | The data in x, y.
xScale |  | function | A scale function for the xs.
yScale |  | function | A scale function for the ys.
x |  | function | A function that takes in a data element and returns the x value.
y |  | function | A function that takes in a data element and returns the y value.
defined |  | function | A function called by `line.defined()`.
className |  | string | The class name for the `path` element.
stroke | steelblue | string | The color of the stroke.
strokeWidth | 2 | number | The pixel value for the stroke.
strokeDasharray |  | array | The pattern of dashes in the stroke.
fill | none | string | The color of the fill for the `path` element.
curve | Curve.linear | function | The curve function
glyph |  | glyph | A glyph to be added to the line.

## `<LineRadial />`

    <LineRadial
      data={appleStock}
      angle={d => xScale(x(d))}
      radius={d => yScale(y(d))}
      fill="none"
      stroke={"url('#line-gradient')"}
      strokeWidth={2}
      strokeOpacity={.7}
      curve={curveBasisOpen}
      strokeLinecap="round"
    />

### Properties

Name | Default | Type | Description
--- | --- | --- | ---
className |  | string | The class for the <path /> element.
angle |  | function | The angle at each point.
radius |  | function | The radius at each angle.
defined |  | function | A function called by `area.defined()`.
curve |  | function | The curve function
data |  | array | An array of x and y data.

## `<Pie />`

    <Pie
      data={browsers}
      pieValue={d => d.usage}
      outerRadius={radius - 80}
      innerRadius={radius - 120}
      fill="white"
      fillOpacity={d => 1 / (d.index + 2) }
      cornerRadius={3}
      padAngle={0}
      centroid={(centroid, arc) => {
        const [x, y] = centroid;
        const { startAngle, endAngle } = arc;
        if (endAngle - startAngle < .1) return null;
        return <Label x={x} y={y}>{arc.data.label}</Label>;
      }}
    />

### Properties

Name | Default | Type | Description
--- | --- | --- | ---
className |  | string | The class for the <path /> element.
top | 0 | number | The distance in pixels from the top.
left | 0 | number | The distance in pixels from the left.
data |  | array | An array of data elements.
pieValue |  | function | A function that takes a data element and returns the value for the corresponding pie’s slice.
innerRadius | 0 | number | The distance of arcs’ inner side from the center of the pie. Make it non-zero to have a “donut” chart.
outerRadius |  | number | The total radius of the pie.
cornerRadius | 0 | number | The corner radius of pie arcs in pixels.
startAngle | 0 | number | The angle in radians at which the pie should start.
endAngle | 2π | number | The angle in radians at which the pie should end.
padAngle | 0 | number | The pad (or gutter) between arcs in radians.
padRadius |  | number | Set the arc padRadius
pieSort |  | function | A comparator function which takes two data elements and returns `-1`, `0` or `+1` to sort arcs.
pieSortValues |  | function | A comparator function which takes two values (as returned from `pieValue`) and returns `-1`, `0` or `+1` to sort arcs.
centroid |  | function | A render function which takes a centroid and an `arc` argument called for each arc.

## Sources For Components

- `<AreaClosed />`
- `<AreaStack />`
- `<Bar />`
- `<Line />`
- `<LinePath />`
- `<LineRadial />`
- `<Pie />`