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

React components for building composable and flexible charts
https://github.com/rumble-charts/rumble-charts

chart d3 react svg visualization

Last synced: 3 months ago
JSON representation

React components for building composable and flexible charts

• Host: GitHub
• URL: https://github.com/rumble-charts/rumble-charts
• Owner: rumble-charts
• License: mit
• Created: 2016-01-28T02:45:55.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T01:55:43.000Z (over 2 years ago)
• Last Synced: 2025-03-28T06:09:43.855Z (3 months ago)
• Topics: chart, d3, react, svg, visualization
• Language: TypeScript
• Homepage: https://rumble-charts.github.io
• Size: 2.71 MB
• Stars: 342
• Watchers: 10
• Forks: 36
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Roadmap: ROADMAP.md

Awesome Lists containing this project

• awesome - rumble-charts/rumble-charts - React components for building composable and flexible charts (TypeScript)
• awesome-react-components - rumble-charts - React components for building composable and flexible charts. (UI Components / Chart)
• awesome-react - rumble-charts - React components for building composable and flexible charts.  (UI Components / Data Visualization)
• awesome-react-components - rumble-charts - React components for building composable and flexible charts. (UI Components / Chart)
• awesome-react-components - rumble-charts - React components for building composable and flexible charts. (UI Components / Chart)
• awesome-react-components - rumble-charts - React components for building composable and flexible charts. (UI Components / Chart)
• fucking-awesome-react-components - rumble-charts - React components for building composable and flexible charts. (UI Components / Chart)
• awesome-react-components - rumble-charts - React components for building composable and flexible charts. (UI Components / Chart)
• awesome-react-components - rumble-charts - React components for building composable and flexible charts. (UI Components / Chart)

README

        
#  rumble-charts

[![Support Ukraine](https://img.shields.io/badge/Support-Ukraine-FFD500?style=flat&labelColor=005BBB)](https://opensource.fb.com/support-ukraine)

[![Node.js CI](https://github.com/rumble-charts/rumble-charts/actions/workflows/node.js.yml/badge.svg)](https://github.com/rumble-charts/rumble-charts/actions/workflows/node.js.yml)

[![CodeQL](https://github.com/rumble-charts/rumble-charts/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/rumble-charts/rumble-charts/actions/workflows/codeql-analysis.yml)

[![codecov](https://codecov.io/gh/rumble-charts/rumble-charts/branch/master/graph/badge.svg)](https://codecov.io/gh/rumble-charts/rumble-charts)

[![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=rumble-charts_rumble-charts&metric=sqale_rating)](https://sonarcloud.io/dashboard?id=rumble-charts_rumble-charts)

[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=rumble-charts_rumble-charts&metric=alert_status)](https://sonarcloud.io/dashboard?id=rumble-charts_rumble-charts)

[![Reliability Rating](https://sonarcloud.io/api/project_badges/measure?project=rumble-charts_rumble-charts&metric=reliability_rating)](https://sonarcloud.io/dashboard?id=rumble-charts_rumble-charts)

[![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=rumble-charts_rumble-charts&metric=security_rating)](https://sonarcloud.io/dashboard?id=rumble-charts_rumble-charts)

[![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=rumble-charts_rumble-charts&metric=vulnerabilities)](https://sonarcloud.io/dashboard?id=rumble-charts_rumble-charts)

[![npm](https://img.shields.io/npm/v/rumble-charts.svg)](https://www.npmjs.com/package/rumble-charts)

[![npm](https://img.shields.io/npm/dm/rumble-charts.svg)](https://www.npmjs.com/package/rumble-charts)

[![Bundle size](https://badgen.net/bundlephobia/minzip/rumble-charts)](https://bundlephobia.com/package/rumble-charts@latest)

[![Tree shaking](https://badgen.net/bundlephobia/tree-shaking/rumble-charts)](https://bundlephobia.com/package/rumble-charts@latest)

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](https://rumble-charts.github.io)

## Demo / live edit

[https://rumble-charts.github.io/playroom/](https://rumble-charts.github.io/playroom/)

## Installation

### NPM

```bash

npm install --save rumble-charts

```

### CDN

```html

```

## Usage

Just include it:

```javascript

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:

```jsx

const series = [{

  data: [1, 2, 3]

}, {

  data: [5, 7, 11]

}, {

  data: [13, 17, 19]

}];

  

  

  

;

```

Result:

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

## [Changelog](CHANGELOG.md)

## [Road map](ROADMAP.md)

## License

MIT