Real-time chart component for React using c3
npm install react-rt-chartreact-rt-chart
===
A React component wrapping c3.js flow API that makes it easy to create real-time charts.
bash
npm install react-rt-chart
`$3
`bash
import RTChart from 'react-rt-chart';
``javascript
componentDidMount() {
setInterval(() => this.forceUpdate(), 1000);
},render() {
var data = {
date: new Date(),
Car: getRandomValue(),
Bus: getRandomValue()
};
return fields={['Car','Bus']}
data={data} />
}
`
!Awesome cat gif$3
To use the default styling include c3.css from github or from node_modules/c3 within react-rt-chart.
$3
####
fields (required)The names of the provided values
`javascript
fields={['name_1', 'name_2']}
`####
data
New value to append to graph`javascript
{
date: new Date(),
name_1: 100,
name_2: 200
}
`
#### maxValues (default - 30)
The number of values visible on the graph.
`javascript
maxValues={60}
`
#### initialData
An list of values that will be loaded into the graph immediately.`javascript
var initialdata = [
{ date: .., name_1: .., name_2: ..},
{ date: .., name_1: .., name_2: ..},
..
];
initialData={initialData}
`
#### chart
Chart options. See c3js - references for all options.
Example
`javascript
var chart = {
axis: {
y: { min: 50, max: 100 }
},
point: {
show: false
}
};
return chart={chart}
fields={['data1','data2']}
data={this.state.data} />
}
`
#### flow
Animation options. See c3.js flow API for all options.`javascript
render() {
var flow = {
duration: 200
};
return flow={flow}
fields={['data1','data2']}
data={this.state.data} />
}
`####
resetReset and unload the chart if true.
`javascript
reset={true}
`
---$3
$3
- Use React 16.2+ #11
####
v1.3.0- Accept any valid react props #8
####
v1.2.0- Make it possible to use different chart types, not just timeseries
####
v1.1.4- Move react* to devDeps (#3) #3
- Use component refs instead of getDOMNode #4
####
v1.1.3Make it possible to change chart types
####
v1.0.0Changed:
Data format have changed from using an id field to just use the object properties
New format:
`javascript
data={{date: [Date], val1: [Number], val2: [Number], ...}}
`
Added
- Added `initialData={[]}`
- Added `reset={Boolean}
- Some bug fixes####
0.0.1`Inital version.