svg

Simple SVG box plots in React

Jul 06, 2018
Simple SVG box plots in React

react-boxplot

Simple SVG box plots in React.

var Boxplot = require('react-boxplot'), computeBoxplotStats = require('react-boxplot/dist/stats'); var 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, ]; React.render( React.createElement(Boxplot, { width: 400, height: 25, orientation: 'horizontal', min: 0, max: 30, stats: computeBoxplotStats(values), }), document.getElementById('chart') );

Or you can compute the stats yourself:

React.render( React.createElement(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 ], }, }), document.getElementById('chart') );

Features

  • Pure SVG.
  • Horizonal or vertical orientation.
  • The scale of the major axis matches the original data.

Installation

npm install react-boxplot

Development

  1. Clone the repository.
  2. npm install
  3. npm run watch
  4. npm run open

GitHub

Recommended