react chart component
npm install react-d3-basic
react-d3 basic charts, charts that we support:
- Line Chart
- Multiple Line Chart
- Scatter Plot
- Area Chart
- Area Stack Chart
- Bar Chart
- Bar Group Chart
- Bar Stack Chart
- Bar Horizontal Chart
- Bar Group Horizontal Chart
- Bar Stack Horizontal Chart
- Pie Chart
- Donut Chart
#### With webpack build tool
- Line Chart
``js
"use strict";
var React = require('react');
var ReactDOM = require('react-dom');
var LineChart = require('react-d3-basic').LineChart;
(function() {
var generalChartData = require('./data/user.json');
var chartSeries = [
{
field: 'age',
name: 'Age',
color: '#ff7f0e',
style: {
"stroke-width": 2,
"stroke-opacity": .2,
"fill-opacity": .2
}
}
],
x = function(d) {
return d.index;
}
ReactDOM.render(
height= {300}
data= {generalChartData}
chartSeries= {chartSeries}
x= {x}
/>
, document.getElementById('data_line')
)
})()
`
#### In browser (without build tools)
Clone code react-d3-basic.js or minify js react-d3-basic.min.js and include the script in your HTML.
You'll also need react, react-dom, d3
- Line Chart
`html`
Line Chart example
``
npm install --save react-d3-basic
http://reactd3.org/docs/basic
Building Charts.
- Line Chart
- Area Chart
- Area Stack Chart
- Bar Chart
- Bar Group Chart
- Bar Stack Chart
- Scatter Plot
- Pie Chart
- Donut Chart
- Bar Horizontal
- Bar Stack Horizontal
- Bar Group Horizontal
!img
``
$ npm install
$ node devServer.js
Open localhost:5000/example
Build production js, min.js code
``
$ npm run prod
If you want to modify the docs file, please modify docs_pre folder.
After you finish, remember to install smash-md first, then run sh doc.sh to compile the readme.
Your new readme would show in docs` folder.
#### Before v1.6.x ...
- Initial release
- Babel 5
- D3 3.0
#### 2016 / 3 / 3, v1.6.0
- Move to Babel 6.
- D3 4.0.
- improve example folder.
Apache 2.0