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

Examples

Components

APIs

#<AnimatedAxis />

# AnimatedAxis.scaleScalerequired

A d3 or vx scale function.

# AnimatedAxis.animationTrajectory"outside" | "center" | "min" | "max" | undefinedoptional

The scale position entering lines come from, and exiting lines leave to.

# AnimatedAxis.axisClassNamestring | undefinedoptional

The class name applied to the outermost axis group element.

# AnimatedAxis.axisLineClassNamestring | undefinedoptional

The class name applied to the axis line element.

# AnimatedAxis.children((renderProps: AxisRendererProps<Scale>) => ReactNode) | undefinedoptional

For more control over rendering or to add event handlers to datum, pass a function as children.

# AnimatedAxis.hideAxisLineboolean | undefinedoptional

If true, will hide the axis line.

# AnimatedAxis.hideTicksboolean | undefinedoptional

If true, will hide the ticks (but not the tick labels).

# AnimatedAxis.hideZeroboolean | undefinedoptional

If true, will hide the '0' value tick and tick label.

# AnimatedAxis.labelstring | undefinedoptional

The text for the axis label.

# AnimatedAxis.labelClassNamestring | undefinedoptional

The class name applied to the axis label text element.

# AnimatedAxis.labelOffsetnumber | undefinedoptional

Pixel offset of the axis label (does not include tick label font size, which is accounted for automatically)

# AnimatedAxis.labelPropsPartial<TextProps> | undefinedoptional

Props applied to the axis label component.

# AnimatedAxis.leftnumber | undefinedoptional

A left pixel offset applied to the entire axis.

# AnimatedAxis.numTicksnumber | undefinedoptional

The number of ticks wanted for the axis (note this is approximate)

# AnimatedAxis.orientation"top" | "left" | "right" | "bottom" | undefinedoptional

Placement of the axis

# AnimatedAxis.rangePaddingnumber | undefinedoptional

Pixel padding to apply to both sides of the axis.

# AnimatedAxis.strokestring | undefinedoptional

The color for the stroke of the lines.

# AnimatedAxis.strokeDasharraystring | undefinedoptional

The pattern of dashes in the stroke.

# AnimatedAxis.strokeWidthnumber | undefinedoptional

The pixel value for the width of the lines.

# AnimatedAxis.tickClassNamestring | undefinedoptional

The class name applied to each tick group.

# AnimatedAxis.tickComponent((tickRendererProps: TickRendererProps) => ReactNode) | undefinedoptional

Override the component used to render tick labels (instead of <Text /> from @vx/text).

# AnimatedAxis.tickFormatTickFormatter<Parameters<Scale>[0]> | undefinedoptional

A d3 formatter for the tick text.

# AnimatedAxis.tickLabelPropsTickLabelProps<Parameters<Scale>[0]> | undefinedoptional

A function that returns props for a given tick label.

# AnimatedAxis.tickLengthnumber | undefinedoptional

The length of the tick lines.

# AnimatedAxis.tickStrokestring | undefinedoptional

The color for the tick's stroke value.

# AnimatedAxis.tickTransformstring | undefinedoptional

A custom SVG transform value to be applied to each tick group.

# AnimatedAxis.tickValuesParameters<Scale>[0][] | undefinedoptional

An array of values that determine the number and values of the ticks. Falls back to scale.ticks() or .domain().

# AnimatedAxis.topnumber | undefinedoptional

A top pixel offset applied to the entire axis.

#<AnimatedGridColumns />

# AnimatedGridColumns.heightnumberrequired

Total height of each grid column line.

# AnimatedGridColumns.scaleScalerequired

@vx/scale or d3-scale object used to convert value to position.

# AnimatedGridColumns.animationTrajectory"outside" | "center" | "min" | "max" | undefinedoptional

The scale position entering lines come from, and exiting lines leave to.

# AnimatedGridColumns.classNamestring | undefinedoptional

classname to apply to line group element.

# AnimatedGridColumns.leftnumber | undefinedoptional

Left offset to apply to glyph g element container.

# AnimatedGridColumns.lineStyleCSSProperties | undefinedoptional

Styles to apply as grid line style.

# AnimatedGridColumns.numTicksnumber | undefinedoptional

Approximate number of grid lines. Approximate due to d3 alogrithm, specify tickValues for precise control.

# AnimatedGridColumns.offsetnumber | undefinedoptional

Pixel offset to apply as a translation (y- for Rows, x- for Columns) to each grid lines.

# AnimatedGridColumns.strokestring | undefinedoptional

Grid line stroke color.

# AnimatedGridColumns.strokeDasharraystring | undefinedoptional

Grid line stroke-dasharray attribute.

# AnimatedGridColumns.strokeWidthstring | number | undefinedoptional

Grid line stroke thickness.

# AnimatedGridColumns.tickValuesParameters<Scale>[0][] | undefinedoptional

Exact values used to generate grid lines using scale. Overrides numTicks if specified.

# AnimatedGridColumns.topnumber | undefinedoptional

Top offset to apply to glyph g element container.

#<AnimatedGridRows />

# AnimatedGridRows.scaleScalerequired

@vx/scale or d3-scale object used to convert value to position.

# AnimatedGridRows.widthnumberrequired

Total width of each grid row line.

# AnimatedGridRows.animationTrajectory"outside" | "center" | "min" | "max" | undefinedoptional

The scale position entering lines come from, and exiting lines leave to.

# AnimatedGridRows.classNamestring | undefinedoptional

classname to apply to line group element.

# AnimatedGridRows.leftnumber | undefinedoptional

Left offset to apply to glyph g element container.

# AnimatedGridRows.lineStyleCSSProperties | undefinedoptional

Styles to apply as grid line style.

# AnimatedGridRows.numTicksnumber | undefinedoptional

Approximate number of grid lines. Approximate due to d3 alogrithm, specify tickValues for precise control.

# AnimatedGridRows.offsetnumber | undefinedoptional

Pixel offset to apply as a translation (y- for Rows, x- for Columns) to each grid lines.

# AnimatedGridRows.strokestring | undefinedoptional

Grid line stroke color.

# AnimatedGridRows.strokeDasharraystring | undefinedoptional

Grid line stroke-dasharray attribute.

# AnimatedGridRows.strokeWidthstring | number | undefinedoptional

Grid line stroke thickness.

# AnimatedGridRows.tickValuesParameters<Scale>[0][] | undefinedoptional

Exact values used to generate grid lines using scale. Overrides numTicks if specified.

# AnimatedGridRows.topnumber | undefinedoptional

Top offset to apply to glyph g element container.