Dynamic Charts and Visualizations in React

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

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 is expected to be an array of objects. Each object will present an iteration 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 identifier for the item. Note that it should be consistent across all iterations.
`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

Download Details:

Author: dsternlicht

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/dsternlicht/react-dynamic-charts

License: MIT

#react #reactjs