WARNING: THIS IS NOT YET PRODUCTION-QUALITY CODE. Docs and Tests are still being written. Use at your own risk. If your project requires composable React charts, we recommend using Victory.
Charting library for React
In order to use reactochart, import the base styles
import 'reactochart/styles.css'
- PieChart
- TreeMap
- XYPlot
- BarChart
- RangeBarChart
- LineChart
- ScatterPlot
- MarkerLineChart
- AreaHeatmap
- Histogram
- KernelDensityEstimation
- planned: AreaChart, StackedBarChart, GroupedBarChart
- XAxis, YAxis
- XAxisTitle, YAxisTitle
- XAxisLabels, YAxisLabels
- XTicks, YTicks
- XGrid, YGrid
- Bar
- RangeRect
- XLine, YLine
- planned: AreaRect?, AreaCircle?
- resolveXYScales
- Data
- Scale
- Axis
- Label
- Margin
- depthEqual
If you just want to run the examples locally:
- Clone this repo and
cd
to the newly-created directory - Run
npm run serve
in your terminal (note: if you're running Python in v3 or higher you'll need to runpython -m http.server
) - Go to http://localhost:8000
If you'd like to contribute to the development this project, first fork & clone this repo, and then follow these steps:
- This project uses NPM to manage dependencies and run scripts. Run
npm -v
to check if you already have it installed. If you don't have it, NPM is packaged with Node.js - download and run the install package located on nodejs.org to install. - Babel is used to transpile ES6+ code to ES5 syntax. Install by running
npm install --global babel
- Webpack is used to bundle the JS & styles for the examples. Install by running
npm install --global webpack
- Run
npm install
in the project root directory. This will install all of the project dependencies into thenode_modules
directory.
- Run
npm run dev
to run the development server (webpack-dev-server), which will serve a live development version of the examples at localhost:9876 - Make changes to the library code in the
src
directory, and/or changes to the examples in theexamples/src
directory. - Once you are happy with your changes, run
npm run build
to generate a production build. (This transpiles the ES6 library code, and transpiles + bundles the examples). git commit
andgit push
your changes to your forked version of the repo.- Open a Github pull request if you'd like to get your changes merged into the official repository.
- Do not make any changes in the
lib
orexamples/build
directories, as these directories are destroyed and regenerated on each build. - The development server uses react-hot-loader to automatically "hot reload" changes to React components, so refreshing your web browser is usually not necessary. However, some changes will still require a refresh to propagate.
- write unit tests
- ensure all charts have common proptypes
- documentation
- Range-Value Bar Chart
- Value-Range Bar Chart
- Range-Range Bar Chart
- 2D Histogram (heatmap)
- 2D KDE?
This project adheres to the Open Code of Conduct. By participating, you are expected to honor this code.