react-boxplot

Simple SVG box plots in React

![version][npm]
![license][npm]
![build][build]
![code style][prettier]

[npm]: https://www.npmjs.com/package/react-boxplot
[build]: https://circleci.com/gh/paulmelnikow/react-boxplot/tree/master
[prettier]: https://prettier.io/

Install

``bash
yarn add react-boxplot
npm install --save react-boxplot
`

Usage

`jsx
import React, { Component } from 'react'
import Boxplot, { computeBoxplotStats } from 'react-boxplot'

const values = [
14, 15, 16, 16, 17, 17, 17, 17, 17, 18, 18, 18, 18, 18, 18, 19, 19, 19, 20,
20, 20, 20, 20, 20, 21, 21, 22, 23, 24, 24, 29,
]

const Example = () => (
width={400}
height={20}
orientation="horizontal"
min={0}
max={30}
stats={computeBoxplotStats(values)}
/>
)
`

Or you can compute the stats yourself:

`jsx
const Example = () => (
width={400}
height={25}
orientation="horizontal"
min={0}
max={300}
stats={{
whiskerLow: 194.3,
quartile1: 201,
quartile2: 234.5,
quartile3: 254.6,
whiskerHigh: 257.95,
outliers: [50, 75, 184.25, 268, 290],
}}
/>
)
`

Features

- Pure SVG
- Horizonal or vertical orientation
- The coordinate system of the major axis matches the original data

Development

In one terminal, start the build for the library:

`sh
npm ci
npm start
`

And, in a second terminal, start the build for the example app:

`sh
cd example
npm ci
npm start
``

Contribute

- [Issue tracker][issues]
- [Source code][source]

Pull requests welcome!

Acknowledgements

This library was developed by Paul Melnikow while working at Body Labs. This
is a fork of [the original repo][bodylabs], now abandoned, being maintained by
its original author.

[bodylabs]: https://github.com/bodylabs/react-boxplot

License

The project is licensed under the two-clause BSD license.

[issues]: https://github.com/paulmelnikow/react-boxplot/issues
[source]: https://github.com/paulmelnikow/react-boxplot