Reactochart

Overview

Reactochart is a library of React components for creating data visualization charts and graphs. Components include line chart, bar chart, area chart, heat maps, scatterplot, histogram, pie chart, sankey diagram, and tree map.

Getting started

Install reactochart using npm.

npm i reactochart --save

Then you can import an individual Reactochart component:

import LineChart from 'reactochart/LineChart'

If you prefer, you can import all of Reactochart at once, though this may hinder some optimizations, such as webpack tree-shaking:

import {XYPlot, XAxis, YAxis, LineChart} from 'reactochart';

import * as Reactochart from 'reactochart';

Import reactochart's base styles

import 'reactochart/styles.css'

Build your first chart and see it rendered! For example, the following code snippet:

import XYPlot from 'reactochart/XYPlot';
import XAxis from 'reactochart/XAxis';
import YAxis from 'reactochart/YAxis';
import LineChart from 'reactochart/LineChart';
import 'reactochart/styles.css'

const MyFirstLineChart = (props) => (
  <XYPlot>
    <XAxis title="Phase" />
    <YAxis title="Intensity" />
    <LineChart
      data={Array(100).fill().map((e, i) => i+1)}
      x={d => d}
      y={d => Math.sin(d*.1)}
    />
  </XYPlot>
  )

results in this:

Live Examples

The examples contain more details about each component and the prop-types it accepts. To run the examples locally and play with the different types of charts in a live code editor:

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 run python -m http.server)
Go to http://localhost:8000

Reactochart Components

Chart Foundations

XY Plot

XYPlot

XY Axis Components

Chart Types

Non-XY charts

XY charts

XY datum components (used by charts/axes)

Other

ZoomContainer

Development

If you'd like to contribute to the development this project, first fork & clone this repo, and then follow these steps:

Global dependencies

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

Project dependencies

Run npm install in the project root directory. This will install all of the project dependencies into the
node_modules directory.

Development process

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 the examples/src directory.
If you'd like to make changes or add further component documentation, follow the example on react-docgen.
Once you're happy with your library and/or documentation changes, run npm run docs. This allows the documentation build to run with your updated src code. git add and git commit the updated build.
git push to your forked version of the repo.
Open a Github pull request with your changes against master. ?

Notes

Do not make any changes in the lib or examples/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 not necessary.

Code of Conduct

This project adheres to the Open Code of Conduct. By participating, you are expected to honor this code.

名稱與所有者	spotify/reactochart
主編程語言	JavaScript
編程語言	HTML (語言數: 4)
平台
許可證	Other

創建於	2016-01-07 20:58:18
推送於	2023-12-05 23:45:11
最后一次提交	2022-12-15 11:54:11
發布數	44
最新版本名稱	v6.1.1 (發布於 2022-11-18 12:06:15)
第一版名稱	v0.3.0 (發布於 )

星數	550
關注者數	19
派生數	53
提交數	666
已啟用問題?
問題數	44
打開的問題數	8
拉請求數	206
打開的拉請求數	30
關閉的拉請求數	320

已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?

reactochart

Github星跟蹤圖