Chart primitives

Layouts & specialized

Interactions

SVG utilities

Data utilities

Umbrella package

visx

@visx/stats

The package provides react components for visualizing distributions, such as Box Plots and Violin Plots

Installation

npm install --save @visx/stats

Examples

Stats Plots

<BoxPlot /> & <ViolinPlot />

APIs

#<BoxPlot />

# valueScaleValueOf<Pick<ScaleTypeToD3Scale<number, StringLike, DefaultThresholdInput>, ContinuousDomainScaleType>>required

Scale for converting input values to pixel offsets.

# boxPropsSVGProps<SVGRectElement>

Props to pass to the box glyph rect.

Default {}

# boxWidthnumber

Width of the BoxPlot.

Default 10

# children(childRenderProps: ChildRenderProps) => ReactNode

Override render function to fully control the rendering of the BoxPlot glyph.

# classNamestring

Classname to apply to parent group element.

# containerboolean

Whether to render a container rect element (e.g., to capture mouse events).

Default false

# containerPropsSVGProps<SVGRectElement>

Props to pass to the container glyph rect if rendered.

Default {}

# fillstring

Fill color to apply to outlier circles and BoxPlot rect.

# fillOpacityReactText

Fill color opacity to apply to outlier circles and BoxPlot rect.

# firstQuartilenumber

First quartile BoxPlot value.

# horizontalboolean

Whether the glyph should be rendered horizontally instead of vertically.

# leftnumber

Left pixel offset of the glyph.

Default 0

# maxnumber

Maximum BoxPlot value.

# maxPropsSVGProps<SVGLineElement>

Props to pass to the maximum glyph line.

Default {}

# mediannumber

Median BoxPlot value.

# medianPropsSVGProps<SVGLineElement>

Props to pass to the median glyph line.

Default {}

# minnumber

Minimum BoxPlot value.

# minPropsSVGProps<SVGLineElement>

Props to pass to the minimum glyph line.

Default {}

# outlierPropsSVGProps<SVGCircleElement>

Props to pass to the outlier glyph circles.

Default {}

# outliersnumber[]

Array of outlier values to be rendered.

Default []

# rxnumber

Rx to apply to BoxPlot rect.

Default 2

# rynumber

Ry to apply to BoxPlot rect.

Default 2

# strokestring

Stroke color to apply to outlier circles, BoxPlot rect, and min/median/max lines.

# strokeWidthReactText

Stroke width to apply to outlier circles, BoxPlot rect, and min/median/max lines.

# thirdQuartilenumber

Third quartile BoxPlot value.

# topnumber

Top pixel offset of the glyph.

Default 0

#<ViolinPlot />

# dataDatum[]required

Data used to draw the violin plot glyph. Violin plot values and counts should be able to be derived from data.

# valueScaleValueOf<Pick<ScaleTypeToD3Scale<number, StringLike, DefaultThresholdInput>, ContinuousDomainScaleType>>required

Scale for converting values to pixel offsets.

# children(providedProps: { path: string; }) => ReactNode

Override render function to fully control the rendering of the ViolinPlot glyph.

# classNamestring

Classname to apply to parent group element.

# count(d: Datum) => number

Given an datum, returns the count for it.

# horizontalboolean

Whether the glyph should be rendered horizontally instead of vertically.

# leftnumber

Left pixel offset of the glyph.

Default 0

# topnumber

Top pixel offset of the glyph.

Default 0

# value(d: Datum) => number

Given an datum, returns the value for it.

# widthnumber

Width of the violin plot glyph.

Default 10