Skip to content
Smoothie Charts: smooooooth JavaScript charts for realtime streaming data
JavaScript HTML
Branch: master
Clone or download

Latest commit


Type Name Latest commit message Commit time
Failed to load latest commit information.
builder add new intermediate label options to builder Dec 28, 2017
docs Replace Date instance methods with static ctor method Sep 12, 2017
examples Add responsive test page Apr 20, 2018
.editorconfig Add .editorconfig file Oct 30, 2017
.gitignore Add .idea to .gitignore May 2, 2017
LICENSE.txt Bump copyright year Apr 20, 2018 Fix readme yarn setup Jul 4, 2018
bower.json Use HTTPS for Oct 30, 2017
package.json Version 1.35 Apr 20, 2018
smoothie.d.ts Rename 'tag' to 'title' Aug 15, 2018
smoothie.js update history Nov 13, 2019

npm version

Smoothie Charts is a really small charting library designed for live streaming data. I built it to reduce the headaches I was getting from watching charts jerkily updating every second.


Getting Started


Given a <canvas>:

<canvas id="chart" width="400" height="100"></canvas>

Create a time series and chart with code resembling:

// Create a time series
var series = new TimeSeries();

// Find the canvas
var canvas = document.getElementById('chart');

// Create the chart
var chart = new SmoothieChart();
chart.addTimeSeries(series, { strokeStyle: 'rgba(0, 255, 0, 1)' });
chart.streamTo(canvas, 500);

Then, add data to your time series and it will be displayed on the chart:

// Randomly add a data point every 500ms
setInterval(function() {
    series.append(, Math.random() * 10000);
}, 500);


For help, use the Smoothie Charts Google Group.

License (MIT)

You can’t perform that action at this time.