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