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.
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.
-
victory
A collection of composable React components for building interactive data visualizations -
react-chartjs-2
React components for Chart.js, the most popular charting library -
react-chartjs
Common react charting components using chart.js. -
react-sparklines
Beautiful and expressive Sparklines React component -
react-google-charts
A thin, typed, React wrapper over Google Charts Visualization and Charts API. -
react-timeseries-charts
Declarative and modular timeseries charting components for React -
chartify
๐ ๐ ๐ React.js plugin for building charts using CSS -
react-sigmajs
Lightweight React library for drawing network graphs built on top of SigmaJS -
d3-react-squared
Lightweight event system for (d3) charts and other components for ReactJS. -
react-sparkline
React component for rendering simple sparklines -
react-micro-bar-chart
React component for micro bar-charts rendered with D3 -
Flowchart React
Lightweight flowchart & flowchart designer for React.js. -
JSCharting for React
Official JSCharting React Plugin & Examples -
essential js 2 charts
Beautiful and interactive charts & graphs for react.
Appwrite - The open-source backend cloud platform
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of rumble-charts or a related project?
README
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
[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.