chart

A React library for creating animated charts visualizations based on dynamic data

Apr 30, 2020
A React library for creating animated charts visualizations based on dynamic data

react-dynamic-charts

A React library for creating animated charts visualizations based on dynamic data.

View Demo View Github

react-dynamic-charts

Install

npm install --save react-dynamic-charts

Usage

import React, { Component } from 'react'; import { LiveBarChart } from 'react-dynamic-charts'; import 'react-dynamic-charts/dist/index.css'; // Don't forget to import the styles class App extends Component { state = { data: [ // ... ] }; render () { return ( <LiveBarChart data={this.state.data} /> ) } }

Props

PropertyTypeDefaultDescription
dataarray[]An array of objects that contain the data of the chart (see section below).
baselinenumbernullIf you want the chart to have a baseline, add its number here. Could be useful for charts that include negative values.
iterationTimeoutnumber200Number of milliseconds you want between iterations.
startAutomaticallybooleantrueWhether the visualization should start running automatically. Default is true.
startRunningTimeoutnumber0Number of milliseconds you want before running the visualization.
onRunStartfunctionnullA callback function that being called once the visualization starts.
onRunEndfunctionnullA callback function that being called once the visualization ends.
showTitlebooleantrueWhether you want to show each iteration's title.
barHeightnumber50The height (in pixels) of each bar item.
showStartButtonbooleanfalseShow a start button that triggers the animation.
startButtonTextstring'Start'The text that will appear in the start button.
mainWrapperStylesobject{}Styles object for the component's main wrapper.
chartWrapperStylesobject{}Styles object for the chart wrapper.
baselineStylesobject{}Styles object for the baseline element.
iterationTitleStylesobject{}Styles object for the title element.
labelStylesobject{}Styles object for the chart's labels.
startButtonStylesobject{}Styles object for the start button.

Data

The data property is expected to be an array of objects. Each object will present an iteration and will include the following fields:

PropertyTypeDescription
namestringThe name of the iteration.
valuesarrayAn array of data objects (see below).

Each value in the values array will contain the following properties:

PropertyTypeDescription
idstring / numberA unique identifier for the item. Note that it should be consistent across all iterations.
labelstring / React NodeThe label of the item.
valuenumberA numeric value of the item.
colorstring / arraySet a fixed color for the item. Could be also an array of colors that will generate a gradient effect. By default, if not set, each item will get a random color.

Here's an example of a data object:

[ { "name": "Round 1", "values": [ { "id": 1, "label": "Test 1", "value": 0, "color": "red" }, { "id": 2, "label": "Test 2", "value": 0, "color": ["yellow", "green"] } ] }, { "name": "Round 2", "values": [ { "id": 1, "label": "Test 1", "value": 10, "color": "red" }, { "id": 2, "label": "Test 2", "value": 5, "color": ["yellow", "green"] } ] }, { "name": "Round 3", "values": [ { "id": 1, "label": "Test 1", "value": 12, "color": "red" }, { "id": 2, "label": "Test 2", "value": 21, "color": ["yellow", "green"] } ] } ]

GitHub

Recommended