/rumble-charts

React components for building composable and flexible charts

Primary LanguageJavaScriptMIT LicenseMIT

Logo rumble-charts

Gitter

Build Status codecov Dependency Status Greenkeeper badge

Maintainability Rating Quality Gate Status Reliability Rating Security Rating Vulnerabilities

npm npm

React components for building composable and flexible charts to visualize your data.

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

Real-world examples

Pie Charts

Bar Charts

Line Chart

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:

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

And use:

const series = [{
    data: [1, 2, 3]
}, {
    data: [5, 7, 11]
}, {
    data: [13, 17, 19]
}];

class Demo extends React.Component {
  render() {
    return <Chart width={600} height={250} series={series} minY={0} maxY={20}>
      <Bars innerPadding={5} groupPadding={10} />
      <Lines />
      <Dots />
    </Chart>;
  }
}

Result:

Combined Chart

Road map

Similar projects

Mainly there are 3 approaches to integrate React and D3:

License

MIT