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