https://github.com/bchao1/chart-race-react
📊 Seamless bar chart race component for React.
Science Score: 13.0%
This score indicates how likely this project is to be science-related based on various indicators:
-
â—‹CITATION.cff file
-
✓codemeta.json file
Found codemeta.json file -
â—‹.zenodo.json file
-
â—‹DOI references
-
â—‹Academic publication links
-
â—‹Committers with academic emails
-
â—‹Institutional organization owner
-
â—‹JOSS paper metadata
-
â—‹Scientific vocabulary similarity
Low similarity (8.9%) to scientific vocabulary
Keywords
Repository
📊 Seamless bar chart race component for React.
Basic Info
- Host: GitHub
- Owner: bchao1
- License: mit
- Language: JavaScript
- Default Branch: master
- Homepage: https://www.npmjs.com/package/chart-race-react
- Size: 18.2 MB
Statistics
- Stars: 523
- Watchers: 12
- Forks: 68
- Open Issues: 10
- Releases: 0
Topics
Metadata Files
README.md
chart-race-react
📊 Seamless & fully customizable bar chart race component for React.
https://www.npmjs.com/package/chart-race-react .
||||| |---|---|---|---| |Colors|
Quick Start
npm install --save chart-race-react
javascript
import BarChart from 'chart-race-react';
You should wrap BarChart inside a container div that acts as a sandbox. The width of the BarChart fits the container width.
jsx
<div style={{width: "500px"}}>
<BarChart />
</div>
Usage
Passing props.
You will need to pass your own props to the BarChart component. Refer to examples for more information.
|Prop|Type|Explanation|
|---|---|---|
|start|Boolean|Defines whether the bar chart race has started. Default is true and the chart race will start as the component mounts.|
|data|Object|An object with keys being the data field name and value being Array data. data[key].length should be equal to len.|
|timeline|Array|An array defining the time indices. Length should be equal to len.|
|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.|
|colors|Object|An object with keys being the data field name and value being the color the data bar.|
|timeout|Integer|Transition time between adjacent time indices (in ms).|
|delay|Integer|Waiting time between adjacent time indices (in ms).|
|timelineStyle|Object|CSS style objects for time indices.|
|textBoxStyle|Object|CSS style objects for data text.|
|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.|
|width|Array|Defines the width allocation for label, bar, and text box. Values in width should add up to 100.|
|maxItems|Integer|Defines the maximum number of items to show in the chart. Should be less or equal to Object.keys(data).length.|
More Demo
Easibly define custom data, text styles, colors, duration, and layout.
Add images to data labels.
Plugin your own data.
Owner
- Name: Brian Chao
- Login: bchao1
- Kind: user
- Location: Stanford, California
- Company: Stanford University
- Website: https://bchao1.github.io
- Twitter: BrianCChao
- Repositories: 14
- Profile: https://github.com/bchao1
Stanford Ph.D. student. Research in computational photography, displays, and computer graphics. Open source enthusiast.
GitHub Events
Total
- Watch event: 6
- Fork event: 1
Last Year
- Watch event: 6
- Fork event: 1
Issues and Pull Requests
Last synced: 6 months ago
All Time
- Total issues: 4
- Total pull requests: 11
- Average time to close issues: 1 day
- Average time to close pull requests: 5 months
- Total issue authors: 3
- Total pull request authors: 6
- Average comments per issue: 1.5
- Average comments per pull request: 0.18
- Merged pull requests: 0
- Bot issues: 0
- Bot pull requests: 6
Past Year
- Issues: 0
- Pull requests: 0
- Average time to close issues: N/A
- Average time to close pull requests: N/A
- Issue authors: 0
- Pull request authors: 0
- Average comments per issue: 0
- Average comments per pull request: 0
- Merged pull requests: 0
- Bot issues: 0
- Bot pull requests: 0
Top Authors
Issue Authors
- abhishekvirat0 (2)
- robksawyer (1)
- Amrouane (1)
Pull Request Authors
- dependabot[bot] (6)
- toridenney (1)
- laurentndream (1)
- crsohr (1)
- Kikobeats (1)
- imDrew259 (1)
Top Labels
Issue Labels
Pull Request Labels
Dependencies
- 369 dependencies
- @babel/cli ^7.6.4 development
- @babel/core ^7.6.4 development
- @babel/plugin-proposal-class-properties ^7.5.5 development
- @babel/preset-env ^7.6.3 development
- @babel/preset-react ^7.6.3 development
- babel-plugin-css-modules-transform ^1.6.2 development
- babel-plugin-react-css-modules ^5.2.6 development
- react ^16.10.2 development
- react-transition-group ^4.3.0 development