Simple SVG box plots in React Sample in 2020

Simple SVG box plots in React Sample in 2020


tutorials -

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

Trending On Tutorial Stuff

Our Sponsors

Top Applications in Tutorial Stuff

Top Experts In Tutorial Stuff