Chart primitives
Layouts & specialized
Interactions
Data utilities
Umbrella package
@vx/react-spring
Although vx is largely unopinioned on animation, there is value in abstracting the complexity +
boilerplate of building animated vx visualization components. This package requires
react-spring as a peerDependency (to be compatible with any usage within your app) and exports
all vx components that depend on react-spring.
react-spring provides performant primitives for animating react
components and is our recommended library for making animated charts. In order to minimize
react-spring as a dependency across other vx packages, we've consolidated components which
depend on it here.
Installation
npm install --save react-spring @vx/react-springExamples
<Axis.AxisBottom />
Components
APIs
#<AnimatedAxis />
The scale position entering lines come from, and exiting lines leave to.
The class name applied to the outermost axis group element.
The class name applied to the axis line element.
For more control over rendering or to add event handlers to datum, pass a function as children.
If true, will hide the axis line.
If true, will hide the ticks (but not the tick labels).
If true, will hide the '0' value tick and tick label.
The text for the axis label.
The class name applied to the axis label text element.
Pixel offset of the axis label (does not include tick label font size, which is accounted for automatically)
Props applied to the axis label component.
A left pixel offset applied to the entire axis.
The number of ticks wanted for the axis (note this is approximate)
Placement of the axis
Pixel padding to apply to both sides of the axis.
The color for the stroke of the lines.
The pattern of dashes in the stroke.
The pixel value for the width of the lines.
The class name applied to each tick group.
((tickRendererProps: TickRendererProps) => ReactNode) | undefinedoptional Override the component used to render tick labels (instead of <Text /> from @vx/text).
A d3 formatter for the tick text.
A function that returns props for a given tick label.
The length of the tick lines.
The color for the tick's stroke value.
A custom SVG transform value to be applied to each tick group.
An array of values that determine the number and values of the ticks. Falls back to scale.ticks() or .domain().
A top pixel offset applied to the entire axis.
#<AnimatedGridColumns />
Total height of each grid column line.
@vx/scale or d3-scale object used to convert value to position.
The scale position entering lines come from, and exiting lines leave to.
classname to apply to line group element.
Left offset to apply to glyph g element container.
Styles to apply as grid line style.
Approximate number of grid lines. Approximate due to d3 alogrithm, specify tickValues for precise control.
Pixel offset to apply as a translation (y- for Rows, x- for Columns) to each grid lines.
Grid line stroke color.
Grid line stroke-dasharray attribute.
Grid line stroke thickness.
Exact values used to generate grid lines using scale.
Overrides numTicks if specified.
Top offset to apply to glyph g element container.
#<AnimatedGridRows />
@vx/scale or d3-scale object used to convert value to position.
Total width of each grid row line.
The scale position entering lines come from, and exiting lines leave to.
classname to apply to line group element.
Left offset to apply to glyph g element container.
Styles to apply as grid line style.
Approximate number of grid lines. Approximate due to d3 alogrithm, specify tickValues for precise control.
Pixel offset to apply as a translation (y- for Rows, x- for Columns) to each grid lines.
Grid line stroke color.
Grid line stroke-dasharray attribute.
Grid line stroke thickness.
Exact values used to generate grid lines using scale.
Overrides numTicks if specified.
Top offset to apply to glyph g element container.