@vx/shape is a part of the vx library, which is a collection of reusable low-level visualization components. The @vx/shape package provides a set of components for creating various shapes and paths in SVG, which can be used to build complex visualizations like charts and graphs.
Bar
The Bar component allows you to create bar charts. The code sample demonstrates how to create a simple bar chart using SVG rectangles.
const Bar = ({ data }) => (
<svg width={500} height={500}>
{data.map((d, i) => (
<rect
key={i}
x={i * 30}
y={500 - d}
width={25}
height={d}
fill="teal"
/>
))}
</svg>
);LinePath
The LinePath component is used to create line charts. The code sample shows how to create a simple line chart using an SVG path element.
const LinePath = ({ data }) => (
<svg width={500} height={500}>
<path
d={`M ${data.map((d, i) => `${i * 30},${500 - d}`).join(' L ')}`}
fill="none"
stroke="blue"
/>
</svg>
);Pie
The Pie component is used to create pie charts. The code sample demonstrates how to create a simple pie chart using SVG path elements.
const Pie = ({ data }) => (
<svg width={500} height={500}>
{data.map((d, i) => (
<path
key={i}
d={`M250,250 L${250 + 200 * Math.cos(2 * Math.PI * i / data.length)},${250 + 200 * Math.sin(2 * Math.PI * i / data.length)} A200,200 0 0,1 ${250 + 200 * Math.cos(2 * Math.PI * (i + 1) / data.length)},${250 + 200 * Math.sin(2 * Math.PI * (i + 1) / data.length)} Z`}
fill={d.color}
/>
))}
</svg>
);d3-shape is a part of the D3.js library that provides functions for creating complex shapes and paths. It is more comprehensive and flexible compared to @vx/shape, but also more complex to use.
react-vis is a React-based visualization library that provides a set of high-level components for creating charts and graphs. It is easier to use compared to @vx/shape but offers less customization and flexibility.
Victory is another React-based library for creating data visualizations. It provides a wide range of pre-built components for different types of charts and is easier to use compared to @vx/shape, but it may not offer the same level of customization.
Shapes are the core elements of vx. Most of what you see on the screen, like lines, bars, and areas are shapes.
npm install --save @vx/shape
# 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<union(func|object)>
# Arc.outerRadius<union(func|number)>
# Arc.padAngle<union(func|number)>
# Arc.padRadius<union(func|number)>
# Arc.startAngle<union(func|number)>
# Area.children<func>
# Area.className<string>
# Area.curve<func>
# Area.data<any>
# Area.defined<func>
| Default | () => true |
# Area.innerRef<union(func|object)>
# 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.children<func>
# AreaClosed.className<string>
# AreaClosed.curve<func>
# AreaClosed.data<any>
# AreaClosed.defined<func>
| Default | () => true |
# AreaClosed.innerRef<union(func|object)>
# AreaClosed.x<union(func|number)>
# AreaClosed.x0<union(func|number)>
# AreaClosed.x1<union(func|number)>
# AreaClosed.y<union(func|number)>
# AreaClosed.y0<union(func|number)>
# AreaClosed.y1<union(func|number)>
# AreaClosed.yScale<func>
# 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.className<string>
# Bar.innerRef<union(func|object)>
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.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.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.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.className<string>
# Circle.innerRef<union(func|object)>
# Line.className<string>
| Default | '' |
# Line.fill<string>
| Default | 'transparent' |
# Line.from<shape[object Object]>
| Default | new Point({ x: 0, y: 0 }) |
# Line.innerRef<union(func|object)>
# Line.to<shape[object Object]>
| Default | new Point({ x: 1, y: 1 }) |
# LinePath.children<func>
# LinePath.className<string>
# LinePath.curve<func>
# LinePath.data<array>
# LinePath.defined<union(func|bool)>
| Default | () => true |
# LinePath.fill<string>
| Default | 'transparent' |
# LinePath.innerRef<union(func|object)>
# LinePath.x<union(func|number)>
# LinePath.y<union(func|number)>
# LineRadial.angle<union(func|number)>
# LineRadial.children<func>
# LineRadial.className<string>
# LineRadial.curve<func>
# LineRadial.data<any>
# LineRadial.defined<union(func|bool)>
# LineRadial.fill<string>
| Default | 'transparent' |
# LineRadial.innerRef<union(func|object)>
# LineRadial.radius<union(func|number)>
# 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.center<shape[object Object]>
| Default | new Point({ x: 0, y: 0 }) |
# Polygon.children<func>
# Polygon.className<string>
# Polygon.innerRef<union(func|object)>
# Polygon.rotate<number>
| Default | 0 |
# Polygon.sides<number> required
# Polygon.size<number>
| Default | 25 |
# 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.children<func>
# LinkHorizontalCurve.className<string>
# LinkHorizontalCurve.data<any>
# LinkHorizontalCurve.innerRef<union(func|object)>
# 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.children<func>
# LinkRadialCurve.className<string>
# LinkRadialCurve.data<any>
# LinkRadialCurve.innerRef<union(func|object)>
# 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.children<func>
# LinkVerticalCurve.className<string>
# LinkVerticalCurve.data<any>
# LinkVerticalCurve.innerRef<union(func|object)>
# 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.children<func>
# LinkHorizontal.className<string>
# LinkHorizontal.data<any>
# LinkHorizontal.innerRef<union(func|object)>
# 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.angle<func>
| Default | d => d.x |
# LinkRadial.children<func>
# LinkRadial.className<string>
# LinkRadial.data<any>
# LinkRadial.innerRef<union(func|object)>
# 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.children<func>
# LinkVertical.className<string>
# LinkVertical.data<any>
# LinkVertical.innerRef<union(func|object)>
# 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.children<func>
# LinkHorizontalLine.className<string>
# LinkHorizontalLine.data<any>
# LinkHorizontalLine.innerRef<union(func|object)>
# 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.children<func>
# LinkRadialLine.className<string>
# LinkRadialLine.data<any>
# LinkRadialLine.innerRef<union(func|object)>
# 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.children<func>
# LinkVerticalLine.className<string>
# LinkVerticalLine.data<any>
# LinkVerticalLine.innerRef<union(func|object)>
# 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.children<func>
# LinkHorizontalStep.className<string>
# LinkHorizontalStep.data<any>
# LinkHorizontalStep.innerRef<union(func|object)>
# 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.children<func>
# LinkRadialStep.className<string>
# LinkRadialStep.data<any>
# LinkRadialStep.innerRef<union(func|object)>
# 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.children<func>
# LinkVerticalStep.className<string>
# LinkVerticalStep.data<any>
# LinkVerticalStep.innerRef<union(func|object)>
# 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 |
FAQs
vx shape
We found that @vx/shape demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.