# react-smoothie
React wrapper for [Smoothie Charts](http://smoothiecharts.org/).
## Install
With Yarn:
```bash
yarn add react-smoothie
```
With NPM:
```bash
npm install react-smoothie --save
```
### Install from GitHub
```bash
npm i cinderblock/react-smoothie
```
## Usage
There are 2 main ways to populate data.
- Original `ref` based `addTimeSeries()`
- New _(added in `0.4.0`)_ props based with reference to TimeSeries
### Import / Require
Both import or require work
```javascript
const { default: SmoothieComponent, TimeSeries } = require('react-smoothie');
import SmoothieComponent, { TimeSeries } from 'react-smoothie';
```
As of `1.0.0` the package ships native ESM alongside CommonJS; bundlers and Node pick the right build automatically.
### New prop based API
```tsx
const ts1 = new TimeSeries({});
const ts2 = new TimeSeries({
resetBounds: true,
resetBoundsInterval: 3000,
});
setInterval(() => {
var time = new Date().getTime();
ts1.append(time, Math.random());
ts2.append(time, Math.random());
}, 500);
var TestComponent = React.createClass({
render() {
return (
);
},
});
```
### Old reference based API
```tsx
var TestComponent = React.createClass({
render() {
return ;
},
componentDidMount() {
// 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(() => {
var time = new Date().getTime();
ts1.append(time, Math.random());
ts2.append(time, Math.random());
}, 500);
},
componentWillUnmount() {
clearInterval(this.dataGenerator);
},
});
```
### More Examples
See [`example.tsx`](example.tsx) for a relatively standalone and complete example.
## Props
`SmoothieComponent`'s props are all passed as the options object to the _Smoothie Charts_ constructor.
```tsx
```
### Extra props
There are some extra props that control other behaviors.
#### `tooltip`
Generate a tooltip on mouseover
- `false` does not enable tooltip
- `true` enables a default tooltip (generated by `react-smoothie`)
- `function` that returns a stateless React component
_default: `false`_
#### `responsive`
Enabling responsive mode automatically sets the width to `100%`.
_default: `false`_
#### `width`
Control the width of the `