Popularity
3.8
Growing
Activity
6.3
-
307
12
38

Description

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.

Programming language: TypeScript
License: MIT License
Tags: UI Components     Chart     D3    
Latest version: v4.0.0

rumble-charts alternatives and similar libraries

Based on the "Chart" category.
Alternatively, view rumble-charts alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of rumble-charts or a related project?

Add another 'Chart' Library

README

rumble-charts

Node.js CI CodeQL codecov

Maintainability Rating Quality Gate Status Reliability Rating Security Rating Vulnerabilities

npm npm Bundle size Tree shaking

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](./docs/images/05.png)

[Bar Charts](./docs/images/07.png)

[Line Chart](./docs/images/03.png)

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:

[Combined Chart](./docs/images/08.png)

[Changelog](CHANGELOG.md)

[Road map](ROADMAP.md)

License

MIT


*Note that all licence references and agreements mentioned in the rumble-charts README section above are relevant to that project's source code only.