react-boxplot

react-boxplot

Simple SVG box plots in React.

Install

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

Usage

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,
];

class Example extends Component {
  render () {
    return (
      <Boxplot
        width={ 400 } height={ 20 } orientation="horizontal"
        min={ 0 } max={ 30 }
        stats={ computeBoxplotStats(values) } />
    )
  }
}

Or you can compute the stats yourself:

class Example extends Component {
  render () {
    return (
      <Boxplot
        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 scale of the major axis matches the original data.

Development

In one terminal, start the build for the library:

yarn
yarn start

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

cd example
yarn
yarn start

Contribute

• Issue tracker
• Source code

Pull requests welcome!

License

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

Changelog

[1.1.0]

For compatibility with CSS in JS, pass through className property from Boxplot to the enclosed svg element.