@vx/boxplot

@vx/boxplot

npm install --save @vx/boxplot

A boxplot shows the minimum, maximum, and quartiles of a dataset.

You can pass in props to target the min, max, median, and box (interquartile range) shapes using minProps, maxProps, medianProps, and boxProps.

If you are looking to add events over the each boxplot group you can pass in container={true} and containerProps={{ /** */ }}.

Properties

Name	Default	Type	Description
className		string	The className for the boxplot
left	0	number	The left offset of the boxplot
data		array	An array of data
max		number	The maximum value for boxplot
min		number	The minimum value for boxplot
firstQuartile		number	The value for the first quartile for the boxplot
thirdQuartile		number	The value for the third quartile for the boxplot
median		number	The median value for the boxplot
boxWidth		number	The width of the box
fill		string	The color of the box
fillOpacity		number	The opacity of the box
stroke		string	The color of the lines in boxplot
strokeWidth		number	Width of the lines in boxplot
rx	2	number	The x-axis radius for the box
ry	2	number	The y-axis radius for the box
container	false	boolean	Set to true and add containerProps = {{ /** */}} to add events to each boxplot group
maxProps	{}	object	Props passed to target the line shape for the maximum
minProps	{}	object	Props passed to target the line shape for the minimum
medianProps	{}	object	Props passed to target the line shape for the median
boxProps	{}	object	Props passed to target the rect shape for the box
containerProps	{}	object	Props passed to add events over each boxplot group (requires container={true})

Changelog

v0.0.182

:bug: Bug Fix

• [tooltip] fractional pixel values can sometimes lead to shaky rendering when using Firefox. #389

:memo: Documentation

• [gallery] add <BarStackHorizontal /> example code back. #387
• [readme] add a new demo of a project using vx components. #391

:house: Internal

• [internal] upgrade to babel@7. #387

:trophy: Contributors

• abradley
• JayWelsh
• hshoff

Changes:
 - @vx/annotation: 0.0.181 => 0.0.182
 - @vx/axis: 0.0.181 => 0.0.182
 - @vx/bounds: 0.0.165 => 0.0.182
 - @vx/boxplot: 0.0.181 => 0.0.182
 - @vx/brush: 0.0.179 => 0.0.182
 - @vx/chord: 0.0.166 => 0.0.182
 - @vx/clip-path: 0.0.165 => 0.0.182
 - @vx/curve: 0.0.165 => 0.0.182
 - @vx/demo: 0.0.181 => 0.0.182
 - @vx/drag: 0.0.179 => 0.0.182
 - @vx/event: 0.0.179 => 0.0.182
 - @vx/geo: 0.0.181 => 0.0.182
 - @vx/glyph: 0.0.181 => 0.0.182
 - @vx/gradient: 0.0.165 => 0.0.182
 - @vx/grid: 0.0.181 => 0.0.182
 - @vx/group: 0.0.170 => 0.0.182
 - @vx/heatmap: 0.0.181 => 0.0.182
 - @vx/hierarchy: 0.0.181 => 0.0.182
 - @vx/legend: 0.0.181 => 0.0.182
 - @vx/marker: 0.0.181 => 0.0.182
 - @vx/mock-data: 0.0.179 => 0.0.182
 - @vx/network: 0.0.179 => 0.0.182
 - @vx/pattern: 0.0.179 => 0.0.182
 - @vx/point: 0.0.165 => 0.0.182
 - @vx/responsive: 0.0.179 => 0.0.182
 - @vx/scale: 0.0.179 => 0.0.182
 - @vx/shape: 0.0.181 => 0.0.182
 - @vx/stats: 0.0.181 => 0.0.182
 - @vx/text: 0.0.179 => 0.0.182
 - @vx/threshold: 0.0.181 => 0.0.182
 - @vx/tooltip: 0.0.179 => 0.0.182
 - @vx/voronoi: 0.0.181 => 0.0.182
 - @vx/vx: 0.0.181 => 0.0.182
 - @vx/zoom: 0.0.165 => 0.0.182