{"id":13421950,"url":"https://github.com/rumble-charts/rumble-charts","last_synced_at":"2025-04-04T07:09:37.665Z","repository":{"id":143907164,"uuid":"50549254","full_name":"rumble-charts/rumble-charts","owner":"rumble-charts","description":"React components for building composable and flexible charts","archived":false,"fork":false,"pushed_at":"2023-01-07T01:55:43.000Z","size":2843,"stargazers_count":342,"open_issues_count":2,"forks_count":36,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-28T06:09:43.855Z","etag":null,"topics":["chart","d3","react","svg","visualization"],"latest_commit_sha":null,"homepage":"https://rumble-charts.github.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rumble-charts.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":"ROADMAP.md","authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-01-28T02:45:55.000Z","updated_at":"2025-03-08T05:01:49.000Z","dependencies_parsed_at":null,"dependency_job_id":"a966e831-4d55-40c5-8a69-a5fad723d199","html_url":"https://github.com/rumble-charts/rumble-charts","commit_stats":null,"previous_names":[],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rumble-charts%2Frumble-charts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rumble-charts%2Frumble-charts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rumble-charts%2Frumble-charts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rumble-charts%2Frumble-charts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rumble-charts","download_url":"https://codeload.github.com/rumble-charts/rumble-charts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247135147,"owners_count":20889421,"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":["chart","d3","react","svg","visualization"],"created_at":"2024-07-30T23:00:34.414Z","updated_at":"2025-04-04T07:09:37.640Z","avatar_url":"https://github.com/rumble-charts.png","language":"TypeScript","funding_links":[],"categories":["UI Components","\u003csummary\u003eUI Components\u003c/summary\u003e","TypeScript"],"sub_categories":["Chart","Data Visualization"],"readme":"# \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[![Support Ukraine](https://img.shields.io/badge/Support-Ukraine-FFD500?style=flat\u0026labelColor=005BBB)](https://opensource.fb.com/support-ukraine)\n[![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)\n[![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)\n[![codecov](https://codecov.io/gh/rumble-charts/rumble-charts/branch/master/graph/badge.svg)](https://codecov.io/gh/rumble-charts/rumble-charts)\n\n[![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=rumble-charts_rumble-charts\u0026metric=sqale_rating)](https://sonarcloud.io/dashboard?id=rumble-charts_rumble-charts)\n[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=rumble-charts_rumble-charts\u0026metric=alert_status)](https://sonarcloud.io/dashboard?id=rumble-charts_rumble-charts)\n[![Reliability Rating](https://sonarcloud.io/api/project_badges/measure?project=rumble-charts_rumble-charts\u0026metric=reliability_rating)](https://sonarcloud.io/dashboard?id=rumble-charts_rumble-charts)\n[![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=rumble-charts_rumble-charts\u0026metric=security_rating)](https://sonarcloud.io/dashboard?id=rumble-charts_rumble-charts)\n[![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=rumble-charts_rumble-charts\u0026metric=vulnerabilities)](https://sonarcloud.io/dashboard?id=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[![Bundle size](https://badgen.net/bundlephobia/minzip/rumble-charts)](https://bundlephobia.com/package/rumble-charts@latest)\n[![Tree shaking](https://badgen.net/bundlephobia/tree-shaking/rumble-charts)](https://bundlephobia.com/package/rumble-charts@latest)\n\nReact components for building composable and flexible charts to visualize your data.\n\nIt's based on D3.js under the hood, but most of the time you will not feel that.\n\n## Real-world examples\n\n![Pie Charts](./docs/images/05.png)\n\n![Bar Charts](./docs/images/07.png)\n\n![Line Chart](./docs/images/03.png)\n\n## Documentation\n\nAll examples are live editable on \"Playroom\" tab.\n\n[https://rumble-charts.github.io](https://rumble-charts.github.io)\n\n## Demo / live edit\n\n[https://rumble-charts.github.io/playroom/](https://rumble-charts.github.io/playroom/)\n\n## Installation\n\n### NPM\n\n```bash\nnpm install --save rumble-charts\n```\n\n### CDN\n\n```html\n\n\u003cscript src='https://unpkg.com/rumble-charts/umd/rumble-charts.min.js'\u003e\u003c/script\u003e\n```\n\n## Usage\n\nJust include it:\n\n```javascript\nimport {\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} from '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\n\u003cChart width={600} height={250} series={series} minY={0} maxY={20}\u003e\n  \u003cBars innerPadding={5} groupPadding={10} /\u003e\n  \u003cLines /\u003e\n  \u003cDots /\u003e\n\u003c/Chart\u003e;\n```\n\nResult:\n\n![Combined Chart](./docs/images/08.png)\n\n## [Changelog](CHANGELOG.md)\n\n## [Road map](ROADMAP.md)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frumble-charts%2Frumble-charts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frumble-charts%2Frumble-charts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frumble-charts%2Frumble-charts/lists"}