React wrapper for Smoothie Chart
With Yarn:
yarn add react-smoothie
With NPM:
npm install react-smoothie --save
There are 2 main ways to populate data.
- Original
ref
basedaddTimeSeries()
- New (added in
0.4.0
) props based with reference to TimeSeries
Both import or require work
const { default: SmoothieComponent, TimeSeries } = require('react-smoothie');
import SmoothieComponent, { TimeSeries } from 'react-smoothie';
const ts1 = new TimeSeries({});
const ts2 = new TimeSeries({
resetBounds: true,
resetBoundsInterval: 3000,
});
setInterval(function() {
var time = new Date().getTime();
ts1.append(time, Math.random());
ts2.append(time, Math.random());
}, 500);
var TestComponent = React.createClass({
render: function() {
return (
<SmoothieComponent
responsive
height={300}
series={[
{
data: ts1,
strokeStyle: { g: 255 },
fillStyle: { g: 255 },
lineWidth: 4,
},
{
data: ts2,
strokeStyle: { r: 255 },
fillStyle: { r: 255 },
lineWidth: 4,
},
]}
/>
);
},
});
var TestComponent = React.createClass({
render: function() {
return <SmoothieComponent ref="chart" responsive height={300} />;
},
componentDidMount: function() {
// Initialize TimeSeries yourself
var ts1 = new TimeSeries({});
this.refs.chart.addTimeSeries(ts1, {
strokeStyle: 'rgba(0, 255, 0, 1)',
fillStyle: 'rgba(0, 255, 0, 0.2)',
lineWidth: 4,
});
// Or let addTimeSeries create a new instance of TimeSeries for us
var ts2 = this.refs.chart.addTimeSeries(
{
resetBounds: true,
resetBoundsInterval: 3000,
},
{
strokeStyle: { r: 255 },
fillStyle: { r: 255 },
lineWidth: 4,
}
);
this.dataGenerator = setInterval(function() {
var time = new Date().getTime();
ts1.append(time, Math.random());
ts2.append(time, Math.random());
}, 500);
},
componentWillUnmount: function() {
clearInterval(this.dataGenerator);
},
});
See test.jsx
for a relatively standalone example.
SmoothieComponent
's props are all passed as the options object to Smoothie Chart's constructor.
<SmoothieComponent ref="chart" width={1000} height={300} interpolation="step" />
There are some extra props that control other behaviors.
Generate a tooltip on mouseover
false
does not enabble tooltiptrue
enables a default ugly tooltipfunction
that returns a stateless React component
default: false
Enabling responsive mode automatically sets the width to 100%
.
default: false
Control the width of the <canvas>
used.
default: 800
Control the height of the <canvas>
used.
default: 200
default: 0
(ms)
Delay the displayed chart. This value is passed after the component mounts as the second argument to SmoothieChart.streamTo
.
Experimental support for responsive charts was added in 0.3.0.
Simply set the responsive
prop to true
and canvas will use the full width of the parent container.
Height is still a controlled prop.
The TimeSeries
object from Smoothie Chart is exposed via the addTimeSeries()
function.
The optional first argument of addTimeSeries()
gets passed as the options to the TimeSeries
constructor.
The last argument of addTimeSeries()
gets passed as the options argument of SmoothieChart.addTimeSeries()
.
As of 0.4.0
, TimeSeries
is also exported directly and can be passed as an argument to addTimeSeries()
.
var ts = this.refs.chart.addTimeSeries(
{
/* Optional TimeSeries opts */
},
{
/* Chart.addTimeSeries opts */
}
);
ts.append(new Date().getTime(), Math.random());
Run yarn dev
or npm run dev
to start the Webpack Dev Server and open the page on your browser.
Don't forget to run yarn
or npm install
first to install dependencies.