🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

The React Dynamic Charts component allows you to create awesome animated dynamic charts to visualize your data.

Chart_Graph React

Documentation

react-dynamic-charts (demo)

Super awesome library for adding dynamic charts visualizations to ReactJS apps.

NPM Build Status JavaScript Style Guide

Demo

Install

npm install --save react-dynamic-charts

Usage

Check out the Demo to see it in action.

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

Property Type Default Description
data array [] An array of objects that contain the data of the chart (see section below).
baseline number null If you want the chart to have a baseline, add its number here. Could be useful for charts that include negative values.
iterationTimeout number 200 Number of milliseconds you want between iterations.
startAutomatically boolean true Whether the visualization should start running automatically. Default is true.
startRunningTimeout number 0 Number of milliseconds you want before running the visualization.
onRunStart function null A callback function that being called once the visualization starts.
onRunEnd function null A callback function that being called once the visualization ends.
showTitle boolean true Whether you want to show each iteration's title.
barHeight number 50 The height (in pixels) of each bar item.
showStartButton boolean false Show a start button that triggers the animation.
startButtonText string 'Start' The text that will appear in the start button.
mainWrapperStyles object {} Styles object for the component's main wrapper.
chartWrapperStyles object {} Styles object for the chart wrapper.
baselineStyles object {} Styles object for the baseline element.
iterationTitleStyles object {} Styles object for the title element.
labelStyles object {} Styles object for the chart's labels.
startButtonStyles object {} Styles object for the start button.

Data

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

Property Type Description
name string The name of the iteration.
values array An array of data objects (see below).

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

Property Type Description
id string / number A unique idetifier for the item. Note that it should be consistent across all interations.
label string / React Node The label of the item.
value number A numeric value of the item.
color string / array Set 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"]       }     ]   } ]

License

MIT © Daniel Sternlicht


You May Also Like