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

Quick example

#### 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(
width= {600}
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

















`

Install

`
npm install --save react-d3-basic
`

LIVE DEMO

http://reactd3.org/docs/basic

Docs




$3

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

Gallery

!img

Develop

`
$ npm install
$ node devServer.js
`

Open localhost:5000/example


Build production js, min.js code

`
$ npm run prod
`

$3

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.

History

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

License

Apache 2.0