{"id":13436600,"url":"https://github.com/RumbleInc/rumble-js-charts","last_synced_at":"2025-03-18T21:30:41.584Z","repository":{"id":82560234,"uuid":"74355028","full_name":"RumbleInc/rumble-js-charts","owner":"RumbleInc","description":"React components for building composable and flexible charts","archived":false,"fork":false,"pushed_at":"2016-11-21T11:07:54.000Z","size":2,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-10-27T20:20:12.163Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://github.com/rumble-charts/rumble-charts","language":null,"has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RumbleInc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-11-21T11:02:43.000Z","updated_at":"2017-06-20T11:57:17.000Z","dependencies_parsed_at":"2023-05-02T13:48:13.354Z","dependency_job_id":null,"html_url":"https://github.com/RumbleInc/rumble-js-charts","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RumbleInc%2Frumble-js-charts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RumbleInc%2Frumble-js-charts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RumbleInc%2Frumble-js-charts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RumbleInc%2Frumble-js-charts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RumbleInc","download_url":"https://codeload.github.com/RumbleInc/rumble-js-charts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244310353,"owners_count":20432522,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T03:00:50.637Z","updated_at":"2025-03-18T21:30:40.960Z","avatar_url":"https://github.com/RumbleInc.png","language":null,"funding_links":[],"categories":["Uncategorized","UI Components","Demos"],"sub_categories":["Uncategorized","Chart"],"readme":"# !!! rumble-charts was moved\nhttps://github.com/rumble-charts/rumble-charts\n\n# \u003cimg src=\"https://raw.githubusercontent.com/rumble-charts/rumble-charts/master/images/logo.png\" alt=\"Logo\" width=\"48\" height=\"48\" /\u003e rumble-charts\n\n[![Gitter](https://img.shields.io/gitter/room/nwjs/nw.js.svg)](https://gitter.im/rumble-charts/rumble-charts)\n\n[![Build Status](https://travis-ci.org/rumble-charts/rumble-charts.svg)](https://travis-ci.org/rumble-charts/rumble-charts)\n[![codecov](https://codecov.io/gh/rumble-charts/rumble-charts/branch/master/graph/badge.svg)](https://codecov.io/gh/rumble-charts/rumble-charts)\n[![Dependency Status](https://david-dm.org/rumble-charts/rumble-charts.svg)](https://david-dm.org/rumble-charts/rumble-charts) \n\n[![npm](https://img.shields.io/npm/v/rumble-charts.svg)](https://www.npmjs.com/package/rumble-charts)\n[![npm](https://img.shields.io/npm/dm/rumble-charts.svg)](https://www.npmjs.com/package/rumble-charts)\n\nReact components for building composable and flexible charts. \n\nIt's based on D3.js under the hood, but most of the time you will not feel that.\n\n## Documentation\n\nAll examples are editable. You can see a result right on the page.\n\n[https://rumble-charts.github.io](https://rumble-charts.github.io)\n\n## Demo / live edit\n\n[rosko.github.io/slides/2016-04-declarative-charts/#/liveedit](https://rosko.github.io/slides/2016-04-declarative-charts/#/liveedit)\n\n## Installation\n\n### NPM\n\n```bash\nnpm install --save rumble-charts\n```\n\n## Usage\n\nJust include it:\n\n```javascript\nconst {\n  // main component\n  Chart, \n  // graphs\n  Bars, Cloud, Dots, Labels, Lines, Pies, RadialLines, Ticks, Title,\n  // wrappers\n  Layer, Animate, Transform, Handlers,\n  // helpers\n  helpers, DropShadow, Gradient\n} = require('rumble-charts');\n```\n\nAnd use:\n\n```jsx\nconst series = [{\n    data: [1, 2, 3]\n}, {\n    data: [5, 7, 11]\n}, {\n    data: [13, 17, 19]\n}];\n\nclass Demo extends Component {\n  render() {\n    return \u003cChart width={400} height={400} series={series} minY={0}\u003e\n      \u003cBars /\u003e\n      \u003cLines /\u003e\n      \u003cDots /\u003e\n    \u003c/Chart\u003e;\n  }\n}\n```\n\n## Road map\n\n- [x] Write unit tests for graphics components\n- [x] Make a first version of documentation with examples\n- [x] Update to React 15.x\n- [x] Update to lodash 4.x\n- [ ] Write unit tests for wrappers and helpers components \n- [ ] Support React ART\n- [ ] Support morphing between graphics types (Pies \u003c=\u003e Bars)\n\n## Similar projects \n\nMainly there are 3 approaches to integrate React and D3:  \n\n - React wraps D3\n    - [d3-react-squared](https://github.com/bgrsquared/d3-react-squared)  \n    - [d3act](https://github.com/AnSavvides/d3act)\n - D3 prepares virtual DOM for React\n    - [react-faux-dom](https://github.com/Olical/react-faux-dom)\n    - [d3-react-sparkline](https://github.com/QubitProducts/d3-react-sparkline/) - based on react-faux-dom\n - React builds virtual DOM, D3 makes math (`rumble-charts` is here) \n    - [react-d3-components](https://github.com/codesuki/react-d3-components)\n    - [react-d3](https://github.com/esbullington/react-d3/) and [rd3](https://github.com/yang-wei/rd3) as a fork\n    - [react-vis](https://github.com/uber/react-vis)\n    - [victory](https://github.com/FormidableLabs/victory)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRumbleInc%2Frumble-js-charts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FRumbleInc%2Frumble-js-charts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRumbleInc%2Frumble-js-charts/lists"}