rumble-charts

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

Documentation

All examples are live editable on "Playroom" tab.

https://rumble-charts.github.io

Demo / live edit

https://rumble-charts.github.io/playroom/

Installation

NPM

npm install --save rumble-charts

CDN

<script src='https://unpkg.com/rumble-charts/umd/rumble-charts.min.js'></script>

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]
}];

<Chart width={600} height={250} series={series} minY={0} maxY={20}>
  <Bars innerPadding={5} groupPadding={10} />
  <Lines />
  <Dots />
</Chart>;

Result:

Changelog

Road map

License

MIT

5.0.0 (2022-07-17)

4.0.0 (2021-08-27)

Features and highlights

• Supports React 17 (for older React versions, use rumble-charts 3.x)
• Code rewritten as TypeScript (with typings) and functional react components
• Updated documentation (still in progress):
  • Use Storybook for documentation and examples: https://rumble-charts.github.io/
  • Playground (playroom): https://rumble-charts.github.io/playroom/
  • TypeDoc: https://rumble-charts.github.io/typedoc/
• <Chart> supports percents for props width and height and is responsive by default (in this case, props layerWidth and layerHeight should be defined)
• <Title> has a new prop textAnchor to define an alignment: "start", "middle" or "end".
• <Animate> has a new prop onCancel to track animation cancellation (on the component unmount or re-render).