Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Create a sparkline in a canvas element.
HTML JavaScript
Latest commit 6ad48fe @adactio Merge pull request #2 from bobflay/master
clear canvas before drawing
Failed to load latest commit information.
sparkline.js clear canvas before drawing


Canvas Sparklines

This is a little snippet of JavaScript that will take an array of numeric values (in any range) and plot those values as a sparkline.

The sparkline function takes five parameters:

  1. canvas_id: The ID of a canvas element.
  2. data: An array of numeric values.
  3. endpoint: A Boolean value.
  4. color: A string value.
  5. style: A string value, either 'line' or 'bar'.

If endpoint is set to true then the sparkline will mark the final value with a red dot.

If color is not set, the sparkline will default to 50% transparent black.

If style is not set, the sparkline will default to 'line'.

The demo.html shows a few examples. The distribution of the values is determined by the dimensions of the canvas element. So it doesn't matter if the data array contains values that are larger than the pixel dimensions of the canvas element: the script will normalise the values to fit.


Place your canvas element wherever you want it to appear in your document:

<canvas id="mycanvas" width="90" height="18"></canvas>

You can link to the sparkline.js file at the end of your HTML document and then call the function afterwards:

<script src="sparkline.js"></script>
sparkline ('mycanvas', [145, 123, 121, 78, 23, 9, 23, 24, 25, 89, 35, 124, 78, 98], true);

Or you can inline the sparkline function at the bottom of your document (to avoid the extra HTTP request):

var sparkline = function(canvas_id, data, endpoint, color, style) {
sparkline('mycanvas', [145, 123, 121, 78, 23, 9, 23, 24, 25, 89, 35, 124, 78, 98], true, 'rgba(0,0,255,.5)','line');

You can see the script in action on member profiles on the website The Session e.g.

Something went wrong with that request. Please try again.