react-dynamic-charts (demo)
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
MIT © Daniel Sternlicht
10.1k Jan 3, 2023
530 Dec 26, 2022
1.5k Jan 2, 2023
24 Jun 15, 2022
1.4k Jan 4, 2023
13.2k Jan 4, 2023
443 Jan 1, 2023
16 Dec 15, 2022
254 Dec 8, 2022
341 Dec 14, 2022
685 Jan 1, 2023
338 Dec 26, 2022
1.8k Oct 27, 2022
6 Oct 19, 2022
2.3k Jan 6, 2023
43 Nov 15, 2021