{"id":17038227,"url":"https://github.com/bchao1/chart-race-react","last_synced_at":"2025-04-05T09:06:49.517Z","repository":{"id":43043381,"uuid":"216373471","full_name":"bchao1/chart-race-react","owner":"bchao1","description":"📊 Seamless bar chart race component for React. ","archived":false,"fork":false,"pushed_at":"2023-07-29T17:00:09.000Z","size":19107,"stargazers_count":522,"open_issues_count":10,"forks_count":70,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-05-18T22:28:17.085Z","etag":null,"topics":["bar-chart-race","chart","data-visualization","frontend","react","react-component","ui-components"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/chart-race-react","language":"JavaScript","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/bchao1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-10-20T14:19:05.000Z","updated_at":"2024-06-20T19:04:37.470Z","dependencies_parsed_at":"2023-01-23T06:16:01.488Z","dependency_job_id":null,"html_url":"https://github.com/bchao1/chart-race-react","commit_stats":null,"previous_names":["mckinsey666/chart-race-react"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bchao1%2Fchart-race-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bchao1%2Fchart-race-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bchao1%2Fchart-race-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bchao1%2Fchart-race-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bchao1","download_url":"https://codeload.github.com/bchao1/chart-race-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247312077,"owners_count":20918344,"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":["bar-chart-race","chart","data-visualization","frontend","react","react-component","ui-components"],"created_at":"2024-10-14T08:56:18.239Z","updated_at":"2025-04-05T09:06:49.462Z","avatar_url":"https://github.com/bchao1.png","language":"JavaScript","readme":"# chart-race-react\n\n\u003e 📊 Seamless \u0026 fully customizable bar chart race component for React.\n\n\u003e https://www.npmjs.com/package/chart-race-react .\n\n\u003cbr\u003e\n\n|||||\n|---|---|---|---|\n|Colors|\u003cp align=center\u003e\u003cimg src=\"./assets/color1.gif\" width=\"600\"\u003e\u003c/p\u003e|\u003cp align=center\u003e\u003cimg src=\"./assets/color2.gif\" width=\"600\"\u003e\u003c/p\u003e|\u003cp align=center\u003e\u003cimg src=\"./assets/color3.gif\" width=\"600\"\u003e\u003c/p\u003e|\n|Style|\u003cp align=center\u003e\u003cimg src=\"./assets/border1.gif\" width=\"600\"\u003e\u003c/p\u003e|\u003cp align=center\u003e\u003cimg src=\"./assets/border2.gif\" width=\"600\"\u003e\u003c/p\u003e|\u003cp align=center\u003e\u003cimg src=\"./assets/border3.gif\" width=\"600\"\u003e\u003c/p\u003e|\n|Speed|\u003cp align=center\u003e\u003cimg src=\"./assets/speed3.gif\" width=\"600\"\u003e\u003c/p\u003e|\u003cp align=center\u003e\u003cimg src=\"./assets/speed1.gif\" width=\"600\"\u003e\u003c/p\u003e|\u003cp align=center\u003e\u003cimg src=\"./assets/speed2.gif\" width=\"600\"\u003e\u003c/p\u003e|\n|||||\n\n## Quick Start\n```\nnpm install --save chart-race-react\n```\n```javascript\nimport BarChart from 'chart-race-react';\n```\nYou should wrap `BarChart` inside a container `div` that acts as a sandbox. The width of the `BarChart` fits the container width.\n```jsx\n\u003cdiv style={{width: \"500px\"}}\u003e\n    \u003cBarChart /\u003e\n\u003c/div\u003e\n```\n## Usage \n\u003e Passing props.\n\nYou will need to pass your own props to the `BarChart` component. Refer to `examples` for more information.\n\n|Prop|Type|Explanation|\n|---|---|---|\n|**start**|Boolean|Defines whether the bar chart race has started. Default is `true` and the chart race will start as the component mounts.|\n|**data**|Object|An object with keys being the data field name and value being Array data. `data[key].length` should be equal to **len**.|\n|**timeline**|Array|An array defining the time indices. Length should be equal to **len**.|\n|**labels**|Object|An object with keys being the data field name and value being a HTML element that acts as the data field's label.|\n|**colors**|Object|An object with keys being the data field name and value being the color the data bar.|\n|**timeout**|Integer|Transition time between adjacent time indices (in ms).|\n|**delay**|Integer|Waiting time between adjacent time indices (in ms).|\n|**timelineStyle**|Object|CSS style objects for time indices.|\n|**textBoxStyle**|Object|CSS style objects for data text.|\n|**barStyle**|Object|CSS style object defining the style of all the bars. It is advised to use `height` to define the thickness and `marginTop` to define the distance between adjacent bars.|\n|**width**|Array|Defines the width allocation for label, bar, and text box. Values in **width** should add up to 100.|\n|**maxItems**|Integer|Defines the maximum number of items to show in the chart. Should be less or equal to `Object.keys(data).length`.|\n\n## More Demo \nEasibly define custom data, text styles, colors, duration, and layout.\n\n\u003e Add images to data labels.\n\u003cp align=center\u003e\n    \u003cimg src=\"./assets/demo_icon.gif\" width=\"800\"\u003e\n\u003c/p\u003e\n\u003cbr\u003e\n\n\u003e Plugin your own data.\n\u003cp align=center\u003e\n    \u003cimg src=\"./assets/demo.gif\" width=\"800\"\u003e\n\u003c/p\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbchao1%2Fchart-race-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbchao1%2Fchart-race-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbchao1%2Fchart-race-react/lists"}