rumble-charts / Rumble Charts
Licence: mit
React components for building composable and flexible charts
Stars: β 293
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Rumble Charts
Billboard.js
π Re-usable, easy interface JavaScript chart library based on D3.js
Stars: β 5,032 (+1617.41%)
Mutual labels: svg, chart, d3
Britecharts
Client-side reusable Charting Library based on D3.js v5 that allows easy and intuitive use of charts and components that can be composed together creating amazing visualizations.
Stars: β 3,688 (+1158.7%)
Mutual labels: svg, chart, d3
React D3 Tree
π³ React component to create interactive D3 tree graphs
Stars: β 543 (+85.32%)
Mutual labels: svg, chart, d3
Ngx Charts
π Declarative Charting Framework for Angular
Stars: β 4,057 (+1284.64%)
Mutual labels: svg, chart, d3
multi-chart
lit-element building blocks for charts and visualization (based on d3.js v5)
Stars: β 24 (-91.81%)
Mutual labels: d3, chart
datart
Datart is a next generation Data Visualization Open Platform
Stars: β 1,042 (+255.63%)
Mutual labels: d3, chart
vue-d3-chart
A interactive chart library based on vue and d3
Stars: β 38 (-87.03%)
Mutual labels: d3, chart
a2d3
Flexible and extensible D3 directives for Angular 2
Stars: β 22 (-92.49%)
Mutual labels: d3, chart
britecharts-react
Britecharts-react is a React wrapper for the Britecharts charting library. It allows the use of Britecharts charts within a React application.
Stars: β 110 (-62.46%)
Mutual labels: d3, chart
d3-dotmatrix
Open Source Javascript library to render Dot Matrix Charts
Stars: β 14 (-95.22%)
Mutual labels: d3, chart
D3 Funnel
A JavaScript library for rendering funnel charts using the D3.js framework.
Stars: β 283 (-3.41%)
Mutual labels: chart, d3
Charts
Simple, responsive, modern SVG Charts with zero dependencies
Stars: β 14,112 (+4716.38%)
Mutual labels: svg, chart
comparative-layout-explorer
π x π =βAn online gallery to explore the design space of comparative layouts
Stars: β 16 (-94.54%)
Mutual labels: d3, chart
jelly-chart
Jelly-Chart is a chart library based on D3v4 and SVG.
Stars: β 34 (-88.4%)
Mutual labels: d3, chart
Plottable
π A library of modular chart components built on D3
Stars: β 2,834 (+867.24%)
Mutual labels: chart, d3
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 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:
Road map
Similar projects
Mainly there are 3 approaches to integrate React and D3:
- React wraps D3
- D3 prepares virtual DOM for React
- d3-react-sparkline - based on react-faux-dom
- react-faux-dom
- React builds virtual DOM, D3 makes math (
rumble-charts
is here)
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].