Skip to content
React components for building composable and flexible charts
JavaScript
Branch: master
Clone or download
rosko Merge pull request #39 from rumble-charts/greenkeeper/d3-scale-2.0.0
Update d3-scale to the latest version 🚀
Latest commit c6715b3 Jan 29, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook fix lint warnings Oct 25, 2017
docs improve docs Oct 25, 2017
images add logos Nov 19, 2016
src fix lint warnings Oct 25, 2017
tests upgrade to d3 v4 Oct 25, 2017
.babelrc fix lint warnings Oct 25, 2017
.codeclimate.yml update codeclimate config Nov 20, 2016
.editorconfig config tools Apr 5, 2016
.eslintignore update travis-ci config Apr 17, 2016
.eslintrc tests for Cloud Apr 12, 2016
.gitignore add storybook May 25, 2016
.npmignore add logos Nov 19, 2016
.nvmrc fix travis CI configuration Jun 21, 2017
.travis.yml fix travis config Oct 26, 2017
CONTRIBUTING.md fix travis CI configuration Jun 21, 2017
LICENSE Update LICENSE Jun 30, 2017
README.md fix build status image Nov 8, 2017
ROADMAP.md improve docs Oct 25, 2017
package-lock.json 2.0.0 Oct 25, 2017
package.json fix(package): update d3-scale to version 2.0.0 Jan 28, 2018
styleguide.config.js fix lint warnings Oct 25, 2017

README.md

Logo rumble-charts

Gitter

Build Status codecov Dependency Status bitHound Code Greenkeeper badge

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

You can’t perform that action at this time.