Skip to content
πŸ“Š Seamless bar chart race component for React.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets add logo Oct 21, 2019
examples transpile with babel, setup packages Oct 21, 2019
src ver 1.0.2, clean code Oct 21, 2019
.gitignore transpile with babel, setup packages Oct 21, 2019
.npmignore add npmignore, beta version available" Oct 21, 2019
LICENSE add MIT license Oct 21, 2019
README.md update readme Oct 22, 2019
babel.config.js
package-lock.json ver 1.0.2, clean code Oct 21, 2019
package.json ver 1.0.2, clean code Oct 21, 2019

README.md

chart-race-react

πŸ“Š Seamless & fully customizable bar chart race component for React.

https://www.npmjs.com/package/chart-race-react .


Colors

Style

Speed

Quick Start

npm install --save chart-race-react
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.

<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.

You can’t perform that action at this time.