Star
Chart primitives
Layouts & specialized
Interactions
SVG utilities
Data utilities
Umbrella package

@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

Axes & scales
<Axis.AxisBottom />

APIs

#<AnimatedAxis />

# scaleScalerequired

A d3 or visx scale function.

# animationTrajectoryAnimationTrajectory
# axisClassNamestring

The class name applied to the outermost axis group element.

# axisLineClassNamestring

The class name applied to the axis line element.

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

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

# hideAxisLineboolean

If true, will hide the axis line.

# hideTicksboolean

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

# hideZeroboolean

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

# labelstring

The text for the axis label.

# labelClassNamestring

The class name applied to the axis label text element.

# labelOffsetnumber

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

# labelPropsPartial<TextProps>

Props applied to the axis label component.

# leftnumber

A left pixel offset applied to the entire axis.

# numTicksnumber

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

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

Placement of the axis

# rangePaddingnumber | { start?: number; end?: number; }

Pixel padding to apply to axis sides.

# strokestring

The color for the stroke of the lines.

# strokeDasharraystring

The pattern of dashes in the stroke.

# strokeWidthReactText

The pixel value for the width of the lines.

# tickClassNamestring

The class name applied to each tick group.

# tickComponent(tickRendererProps: TickRendererProps) => ReactNode

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

# tickFormatTickFormatter<ScaleInput<Scale>>

A d3 formatter for the tick text.

# tickLabelPropsTickLabelProps<ScaleInput<Scale>>

Either an object with the props for all tick labels or a function that returns props for a given tick label.

# tickLengthnumber

The length of the tick lines.

# tickLinePropsPick<SVGProps<SVGLineElement>, "string" | "children" | "scale" | "width" | "height" | "x" | "y" | "dx" | "dy" | "className" | "stroke" | "radius" | "color" | ... 453 more ... | "key">

Props to be applied to individual tick lines.

# tickStrokestring

The color for the tick's stroke value.

# tickTransformstring

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

# tickValuesScaleInput<Scale>[]

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

# topnumber

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.

# animationTrajectoryAnimationTrajectory
# classNamestring

classname to apply to line group element.

# leftnumber

Left offset to apply to glyph g element container.

# lineStyleCSSProperties

Styles to apply as grid line style.

# numTicksnumber

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

# offsetnumber

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

# strokestring

Grid line stroke color.

# strokeDasharraystring

Grid line stroke-dasharray attribute.

# strokeWidthReactText

Grid line stroke thickness.

# tickValuesScaleInput<Scale>[]

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

# topnumber

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.

# animationTrajectoryAnimationTrajectory
# classNamestring

classname to apply to line group element.

# leftnumber

Left offset to apply to glyph g element container.

# lineStyleCSSProperties

Styles to apply as grid line style.

# numTicksnumber

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

# offsetnumber

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

# strokestring

Grid line stroke color.

# strokeDasharraystring

Grid line stroke-dasharray attribute.

# strokeWidthReactText

Grid line stroke thickness.

# tickValuesScaleInput<Scale>[]

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

# topnumber

Top offset to apply to glyph g element container.

Exports