@vx/stats

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

Installation

npm install --save @vx/stats

Examples

Components

APIs

#<BoxPlot />

# BoxPlot.valueScaleGenericScale<number>required

Scale for converting ScaleInput values to pixel offsets.

# BoxPlot.boxPropsSVGProps<SVGRectElement>optional

Props to pass to the box glyph rect.

Default {}

# BoxPlot.boxWidthnumberoptional

Width of the BoxPlot.

Default 10

# BoxPlot.children(childRenderProps: ChildRenderProps) => ReactNodeoptional

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

# BoxPlot.classNamestringoptional

Classname to apply to parent group element.

# BoxPlot.containerbooleanoptional

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

Default false

# BoxPlot.containerPropsSVGProps<SVGRectElement>optional

Props to pass to the container glyph rect if rendered.

Default {}

# BoxPlot.fillstringoptional

Fill color to apply to outlier circles and BoxPlot rect.

# BoxPlot.fillOpacityReactTextoptional

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

# BoxPlot.firstQuartilenumberoptional

First quartile BoxPlot value.

# BoxPlot.horizontalbooleanoptional

Whether the glyph should be rendered horizontally instead of vertically.

# BoxPlot.leftnumberoptional

Left pixel offset of the glyph.

Default 0

# BoxPlot.maxnumberoptional

Maximum BoxPlot value.

# BoxPlot.maxPropsSVGProps<SVGLineElement>optional

Props to pass to the maximum glyph line.

Default {}

# BoxPlot.mediannumberoptional

Median BoxPlot value.

# BoxPlot.medianPropsSVGProps<SVGLineElement>optional

Props to pass to the median glyph line.

Default {}

# BoxPlot.minnumberoptional

Minimum BoxPlot value.

# BoxPlot.minPropsSVGProps<SVGLineElement>optional

Props to pass to the minimum glyph line.

Default {}

# BoxPlot.outlierPropsSVGProps<SVGCircleElement>optional

Props to pass to the outlier glyph circles.

Default {}

# BoxPlot.outliersnumber[]optional

Array of outlier values to be rendered.

Default []

# BoxPlot.rxnumberoptional

Rx to apply to BoxPlot rect.

Default 2

# BoxPlot.rynumberoptional

Ry to apply to BoxPlot rect.

Default 2

# BoxPlot.strokestringoptional

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

# BoxPlot.strokeWidthReactTextoptional

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

# BoxPlot.thirdQuartilenumberoptional

Third quartile BoxPlot value.

# BoxPlot.topnumberoptional

Top pixel offset of the glyph.

Default 0

#<ViolinPlot />

# ViolinPlot.dataScaleInput[]required

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

# ViolinPlot.valueScaleGenericScale<number>required

Scale for converting values to pixel offsets.

# ViolinPlot.children(providedProps: { path: string; }) => ReactNodeoptional

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

# ViolinPlot.classNamestringoptional

Classname to apply to parent group element.

# ViolinPlot.count(d: ScaleInput) => numberoptional

Given an ScaleInput datum, returns the count for it.

Default (d: any) => (d && d.count) || 0

# ViolinPlot.horizontalbooleanoptional

Whether the glyph should be rendered horizontally instead of vertically.

# ViolinPlot.leftnumberoptional

Left pixel offset of the glyph.

Default 0

# ViolinPlot.topnumberoptional

Top pixel offset of the glyph.

Default 0

# ViolinPlot.value(d: ScaleInput) => numberoptional

Given an ScaleInput datum, returns the value for it.

Default (d: any) => (d && d.value) || 0

# ViolinPlot.widthnumberoptional

Width of the violin plot glyph.

Default 10