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
<Axis.AxisBottom />
APIs
#<AnimatedAxis />
AnimationTrajectory
string
The class name applied to the outermost axis group element.
string
The class name applied to the axis line element.
(renderProps: AxisRendererProps<Scale>) => ReactNode
For more control over rendering or to add event handlers to datum, pass a function as children.
boolean
If true, will hide the axis line.
boolean
If true, will hide the ticks (but not the tick labels).
boolean
If true, will hide the '0' value tick and tick label.
string
The text for the axis label.
string
The class name applied to the axis label text element.
number
Pixel offset of the axis label (does not include tick label font size, which is accounted for automatically)
Partial<TextProps>
Props applied to the axis label component.
number
A left pixel offset applied to the entire axis.
number
The number of ticks wanted for the axis (note this is approximate)
"top" | "left" | "right" | "bottom"
Placement of the axis
number | { start?: number; end?: number; }
Pixel padding to apply to axis sides.
string
The color for the stroke of the lines.
string
The pattern of dashes in the stroke.
ReactText
The pixel value for the width of the lines.
string
The class name applied to each tick group.
(tickRendererProps: TickRendererProps) => ReactNode
Override the component used to render tick labels (instead of <Text /> from @visx/text).
TickFormatter<ScaleInput<Scale>>
A d3 formatter for the tick text.
TickLabelProps<ScaleInput<Scale>>
Either an object with the props for all tick labels or a function that returns props for a given tick label.
number
The length of the tick lines.
Pick<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.
string
The color for the tick's stroke value.
string
A custom SVG transform value to be applied to each tick group.
ScaleInput<Scale>[]
An array of values that determine the number and values of the ticks. Falls back to scale.ticks()
or .domain()
.
number
A top pixel offset applied to the entire axis.
#<AnimatedGridColumns />
Total height of each grid column line.
@visx/scale
or d3-scale
object used to convert value to position.
AnimationTrajectory
string
classname to apply to line group element.
number
Left offset to apply to glyph g element container.
CSSProperties
Styles to apply as grid line style.
number
Approximate number of grid lines. Approximate due to d3 alogrithm, specify tickValues
for precise control.
number
Pixel offset to apply as a translation (y- for Rows, x- for Columns) to each grid lines.
string
Grid line stroke color.
string
Grid line stroke-dasharray attribute.
ReactText
Grid line stroke thickness.
ScaleInput<Scale>[]
Exact values used to generate grid lines using scale
.
Overrides numTicks
if specified.
number
Top offset to apply to glyph g element container.
#<AnimatedGridRows />
@visx/scale
or d3-scale
object used to convert value to position.
Total width of each grid row line.
AnimationTrajectory
string
classname to apply to line group element.
number
Left offset to apply to glyph g element container.
CSSProperties
Styles to apply as grid line style.
number
Approximate number of grid lines. Approximate due to d3 alogrithm, specify tickValues
for precise control.
number
Pixel offset to apply as a translation (y- for Rows, x- for Columns) to each grid lines.
string
Grid line stroke color.
string
Grid line stroke-dasharray attribute.
ReactText
Grid line stroke thickness.
ScaleInput<Scale>[]
Exact values used to generate grid lines using scale
.
Overrides numTicks
if specified.
number
Top offset to apply to glyph g element container.