@visx/react-spring

Although visx is largely unopinioned on animation, there is value in abstracting the complexity + boilerplate of building animated visx visualization components. This package requires react-spring as a peerDependency (to be compatible with any usage within your app) and exports all visx 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 visx packages, we've consolidated components which depend on it here.

Installation

npm install --save react-spring @visx/react-spring

Examples

APIs

#<AnimatedAxis />

# scaleScalerequired

A d3 or visx scale function.

# animationTrajectory"max" | "min" | "center" | "outside" | undefined
# axisClassNamestring | undefined

The class name applied to the outermost axis group element.

# axisLineClassNamestring | undefined

The class name applied to the axis line element.

# children((renderProps: AxisRendererProps<Scale>) => ReactNode) | undefined

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

# hideAxisLineboolean | undefined

If true, will hide the axis line.

# hideTicksboolean | undefined

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

# hideZeroboolean | undefined

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

# labelstring | undefined

The text for the axis label.

# labelClassNamestring | undefined

The class name applied to the axis label text element.

# labelOffsetnumber | undefined

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

# labelPropsPartial<TextProps> | undefined

Props applied to the axis label component.

# leftnumber | undefined

A left pixel offset applied to the entire axis.

# numTicksnumber | undefined

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

# orientation"left" | "top" | "bottom" | "right" | undefined

Placement of the axis

# rangePaddingnumber | undefined

Pixel padding to apply to both sides of the axis.

# strokestring | undefined

The color for the stroke of the lines.

# strokeDasharraystring | undefined

The pattern of dashes in the stroke.

# strokeWidthstring | number | undefined

The pixel value for the width of the lines.

# tickClassNamestring | undefined

The class name applied to each tick group.

# tickComponent((tickRendererProps: TickRendererProps) => ReactNode) | undefined

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

# tickFormatTickFormatter<ScaleInput<Scale>> | undefined

A d3 formatter for the tick text.

# tickLabelPropsTickLabelProps<ScaleInput<Scale>> | undefined

A function that returns props for a given tick label.

# tickLengthnumber | undefined

The length of the tick lines.

# tickLinePropsPick<SVGProps<SVGLineElement>, "string" | "children" | "className" | "width" | "height" | "scale" | "color" | "id" | "lang" | "max" | "media" | "method" | ... 455 more ... | "key"> | undefined

Props to be applied to individual tick lines.

# tickStrokestring | undefined

The color for the tick's stroke value.

# tickTransformstring | undefined

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

# tickValuesScaleInput<Scale>[] | undefined

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

# topnumber | undefined

A top pixel offset applied to the entire axis.

#<AnimatedGridColumns />

# heightnumberrequired

Total height of each grid column line.

# scaleScalerequired

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

# animationTrajectory"max" | "min" | "center" | "outside" | undefined
# classNamestring | undefined

classname to apply to line group element.

# leftnumber | undefined

Left offset to apply to glyph g element container.

# lineStyleCSSProperties | undefined

Styles to apply as grid line style.

# numTicksnumber | undefined

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

# offsetnumber | undefined

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

# strokestring | undefined

Grid line stroke color.

# strokeDasharraystring | undefined

Grid line stroke-dasharray attribute.

# strokeWidthstring | number | undefined

Grid line stroke thickness.

# tickValuesScaleInput<Scale>[] | undefined

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

# topnumber | undefined

Top offset to apply to glyph g element container.

#<AnimatedGridRows />

# scaleScalerequired

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

# widthnumberrequired

Total width of each grid row line.

# animationTrajectory"max" | "min" | "center" | "outside" | undefined
# classNamestring | undefined

classname to apply to line group element.

# leftnumber | undefined

Left offset to apply to glyph g element container.

# lineStyleCSSProperties | undefined

Styles to apply as grid line style.

# numTicksnumber | undefined

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

# offsetnumber | undefined

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

# strokestring | undefined

Grid line stroke color.

# strokeDasharraystring | undefined

Grid line stroke-dasharray attribute.

# strokeWidthstring | number | undefined

Grid line stroke thickness.

# tickValuesScaleInput<Scale>[] | undefined

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

# topnumber | undefined

Top offset to apply to glyph g element container.