Modular-React-Charts-Made-with-d3.js

Modular React charts made with d3.js https://reactiva.github.io/react-d3-w…

Update

Important update:

The actively maintained fork of this project is now at the Github of react-d3 co-creator yang-wei, who has recently taken the lead in maintaining the project and moving toward 1.0.

Yang Wei’s fork is located here.

react-d3

Modular ReactJS charts made using d3 chart utilities. Work on project documentation has started here. A few examples of the available charts can be seen below, the others can be viewed here, side-by-side with the React code that generates the charts.

react-d3 chart images

Build Status

Version

npm version

Basic usage

First, install via npm:

npm install react-d3

Then, import into your ReactJS project:

var rd3 = require('react-d3');
// es6
import rd3 from 'react-d3';

The charts are then available under the rd3 namespace, which you can then use as shown on the demonstration page:

If you don’t wish to pull in all the charts, you can also require single chart:

var BarChart = require('react-d3/barchart').BarChart;
// es6
import { BarChart } from 'react-d3';

Available Charts

var BarChart = rd3.BarChart;
var LineChart = rd3.LineChart;
var PieChart = rd3.PieChart;
var AreaChart = rd3.AreaChart;
var Treemap = rd3.Treemap;
var ScatterChart = rd3.ScatterChart;
var CandleStickChart = rd3.CandleStickChart;

For usage, please see hereAPI documentation is also coming online over the coming days.

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.