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

Sources For Components

• <AreaClosed />
• <AreaStack />
• <Bar />
• <Line />
• <LinePath />
• <LineRadial />