https://github.com/paulmelnikow/react-boxplot

Simple SVG box plots in React
https://github.com/paulmelnikow/react-boxplot

boxplot react react-component svg

Last synced: 5 months ago
JSON representation

Simple SVG box plots in React

• Host: GitHub
• URL: https://github.com/paulmelnikow/react-boxplot
• Owner: paulmelnikow
• License: bsd-2-clause
• Created: 2017-10-24T22:34:07.000Z (over 7 years ago)
• Default Branch: main
• Last Pushed: 2023-03-07T07:27:53.000Z (about 2 years ago)
• Last Synced: 2024-10-18T06:38:13.879Z (7 months ago)
• Topics: boxplot, react, react-component, svg
• Language: JavaScript
• Size: 2.42 MB
• Stars: 12
• Watchers: 4
• Forks: 4
• Open Issues: 35
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-boxplot

Simple SVG box plots in React

[![version](https://img.shields.io/npm/v/react-boxplot?style=flat-square)][npm]

[![license](https://img.shields.io/npm/l/react-boxplot?style=flat-square)][npm]

[![build](https://img.shields.io/circleci/project/github/paulmelnikow/react-boxplot?style=flat-square)][build]

[![code style](https://img.shields.io/badge/code_style-prettier-ff69b4?style=flat-square)][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 = () => (

  

)

```



Or you can compute the stats yourself:

```jsx

const Example = () => (

  

)

```



## 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