React wrapper for Smoothie Charts.

With Yarn:

yarn add react-smoothie

With NPM:

npm install react-smoothie --save

npm i cinderblock/react-smoothie

There are 2 main ways to populate data.

• Original ref based addTimeSeries()
• 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(() => {
  var time = new Date().getTime();

  ts1.append(time, Math.random());
  ts2.append(time, Math.random());
}, 500);

var TestComponent = React.createClass({
  render() {
    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() {
    return <SmoothieComponent ref="chart" responsive height={300} />;
  },

  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);
  },
});

See example.tsx for a relatively standalone and complete example.

SmoothieComponent's props are all passed as the options object to the Smoothie Charts 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 enable tooltip
• true enables a default tooltip (generated by react-smoothie)
• function 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.

TimeSeries is the main class that Smoothie Charts uses internally for each series of data. There are two ways to access and use these objects, corresponding to the two API versions.

TimeSeries is available as an import.

const ts1 = new TimeSeries();
ts1.append(time, Math.random());

TimeSeries 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, an instance of TimeSeries 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.

• Improve Types for Canvas drawing (setting gradients)
• Rewrite of options processing
• New modern React (with hooks) example
• Switch to Npm

• Remove Yarn restrictions

• Update dep to latest
• Publish to GitHub Packages

• Use prepare script to allow installing from GitHub

• Export prop type

• TypeScript

• Fix tooltip positioning relative
• Allow setting class via classNameCanvas

• Allow setting canvas css class

• Tooltip support

• Single option to set both style colors to be the same

• TimeSeries can be passed as an argument to addTimeSeries()
• Use object to set style colors

• Export as Module

• Allow setting streamDelay option

• Fix passing args to Smoothie Charts