🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

React components for building composable and flexible charts. It’s based on D3.js under the hood, but most of the time you will not feel that.

Chart_Graph React

Documentation

!!! rumble-charts was moved

https://github.com/rumble-charts/rumble-charts

Logo rumble-charts

Gitter

Build Status codecov Dependency Status

npm npm

React components for building composable and flexible charts.

It's based on D3.js under the hood, but most of the time you will not feel that.

Documentation

All examples are editable. You can see a result right on the page.

https://rumble-charts.github.io

Demo / live edit

rosko.github.io/slides/2016-04-declarative-charts/#/liveedit

Installation

NPM

npm install --save rumble-charts

Usage

Just include it:

const {   // main component   Chart,    // graphs   Bars, Cloud, Dots, Labels, Lines, Pies, RadialLines, Ticks, Title,   // wrappers   Layer, Animate, Transform, Handlers,   // helpers   helpers, DropShadow, Gradient } = require('rumble-charts');

And use:

const series = [{     data: [1, 2, 3] }, {     data: [5, 7, 11] }, {     data: [13, 17, 19] }];  class Demo extends Component {   render() {     return <Chart width={400} height={400} series={series} minY={0}>       <Bars />       <Lines />       <Dots />     </Chart>;   } }

Road map

  • Write unit tests for graphics components
  • Make a first version of documentation with examples
  • Update to React 15.x
  • Update to lodash 4.x
  • Write unit tests for wrappers and helpers components
  • Support React ART
  • Support morphing between graphics types (Pies <=> Bars)

Similar projects

Mainly there are 3 approaches to integrate React and D3:

License

MIT


You May Also Like