react-dynamic-charts (demo)

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

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