Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/RumbleInc/rumble-js-charts
React components for building composable and flexible charts
https://github.com/RumbleInc/rumble-js-charts
Last synced: about 2 months ago
JSON representation
React components for building composable and flexible charts
- Host: GitHub
- URL: https://github.com/RumbleInc/rumble-js-charts
- Owner: RumbleInc
- Created: 2016-11-21T11:02:43.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2016-11-21T11:07:54.000Z (about 8 years ago)
- Last Synced: 2024-08-01T03:19:26.148Z (4 months ago)
- Homepage: https://github.com/rumble-charts/rumble-charts
- Size: 1.95 KB
- Stars: 1
- Watchers: 11
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-react-components-all - rumble-charts - React components for building composable and flexible charts. (Uncategorized / Uncategorized)
- awesome-list - rumble-charts - React components for building composable and flexible charts. (Demos / Chart)
README
# !!! rumble-charts was moved
https://github.com/rumble-charts/rumble-charts
# 
rumble-charts
[](https://gitter.im/rumble-charts/rumble-charts)
[](https://travis-ci.org/rumble-charts/rumble-charts)
[](https://codecov.io/gh/rumble-charts/rumble-charts)
[](https://david-dm.org/rumble-charts/rumble-charts)
[](https://www.npmjs.com/package/rumble-charts)
[](https://www.npmjs.com/package/rumble-charts)
React components for building composable and flexible charts.
It's based on D3.js under the hood, but most of the time you will not feel that.
## Documentation
All examples are editable. You can see a result right on the page.
[https://rumble-charts.github.io](https://rumble-charts.github.io)
## Demo / live edit
[rosko.github.io/slides/2016-04-declarative-charts/#/liveedit](https://rosko.github.io/slides/2016-04-declarative-charts/#/liveedit)
## Installation
### NPM
```bash
npm install --save rumble-charts
```
## Usage
Just include it:
```javascript
const {
// main component
Chart,
// graphs
Bars, Cloud, Dots, Labels, Lines, Pies, RadialLines, Ticks, Title,
// wrappers
Layer, Animate, Transform, Handlers,
// helpers
helpers, DropShadow, Gradient
} = require('rumble-charts');
```
And use:
```jsx
const series = [{
data: [1, 2, 3]
}, {
data: [5, 7, 11]
}, {
data: [13, 17, 19]
}];
class Demo extends Component {
render() {
return
;
}
}
```
## Road map
- [x] Write unit tests for graphics components
- [x] Make a first version of documentation with examples
- [x] Update to React 15.x
- [x] Update to lodash 4.x
- [ ] Write unit tests for wrappers and helpers components
- [ ] Support React ART
- [ ] Support morphing between graphics types (Pies <=> Bars)
## Similar projects
Mainly there are 3 approaches to integrate React and D3:
- React wraps D3
- [d3-react-squared](https://github.com/bgrsquared/d3-react-squared)
- [d3act](https://github.com/AnSavvides/d3act)
- D3 prepares virtual DOM for React
- [react-faux-dom](https://github.com/Olical/react-faux-dom)
- [d3-react-sparkline](https://github.com/QubitProducts/d3-react-sparkline/) - based on react-faux-dom
- React builds virtual DOM, D3 makes math (`rumble-charts` is here)
- [react-d3-components](https://github.com/codesuki/react-d3-components)
- [react-d3](https://github.com/esbullington/react-d3/) and [rd3](https://github.com/yang-wei/rd3) as a fork
- [react-vis](https://github.com/uber/react-vis)
- [victory](https://github.com/FormidableLabs/victory)
## License
MIT