Bar Chart Race Component for React. Integrate beautiful Bar Chart Races to your...
source link: https://www.tuicool.com/articles/fqqQnyB
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
chart-race-react
:bar_chart: Seamless & fully customizable bar chart race component for React.
https://www.npmjs.com/package/chart-race-react .
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>
Demo
Colors
Style
Speed
Usage
Passing props.
You will need to pass your own props to the BarChart
component. Refer to examples
for more information.
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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK