Download

Chartlets

(Tiny charts for tablet and mobile web apps.)

Line charts

Bar charts

Pie charts

Custom charts

Docs

What are Chartlets?

Chartlets are tiny charts without grids or legends, like Sparklines. They're perfect for conveying simple relationships or trends, especially when space is scarce.

Chartlets uses the HTML5 <canvas> element for fast performance and is only 2.8k when minified and gzipped. It has no dependencies.

Usage

1. Download and include <script src="chartlets.min.js"></script>.

2. Create a <canvas> element with a width, height, and the class name "chartlet." Then add HTML5 data attributes as described below.

3. Call Chartlets.render().

Examples

<canvas class="chartlet" data-type="line" data-colors="#ffcc00 #ff66cc" data-range="0 10" data-sets="[1 5 3 9 4] [4 3 9 7 2]" width="100" height="55" data-opts="stroke:2 shape:smooth cap:circle"></canvas>
<canvas class="chartlet" data-type="line" data-colors="hsla(319,83%,65%) hsl(200,83%,50%)" data-sets="[10 15 10 16 20 15 16 14 9] [5 12 15 20 14 -2 -5 8 15]" width="100" height="55" data-opts="stroke:1 fill:solid axis:0"></canvas>
<canvas class="chartlet" data-type="line" data-sets="[1 3 2 4 3] [2 1 3 3 2] [1 4 3 4 2]" width="100" height="55" data-opts="transform:stack theme:money"></canvas>
<canvas class="chartlet" data-type="line" data-colors="hsl(268, 74%, 50%)" data-range="-10 10" data-sets="[1 3 8 7 4 -4 -5 3 4 7 8]" width="100" height="55" data-opts="shape:step stroke:2.5 axis:0"></canvas>
<canvas class="chartlet" data-type="bar" data-colors="hsl(34,57%,50%) hsl(194,67%,50%) hsl(49,89%,60%)" data-sets="[1 2 3 4] [2 3 4 5] [3 4 5 6]" width="100" height="50"></canvas>
<canvas class="chartlet" data-type="bar" data-colors="rgb(249,40,48) rgb(47,180,177) rgb(255,168,57)" data-range="0 15" data-sets="[1 2 3 4] [2 3 4 5] [3 4 5 6]" width="100" height="50" data-opts="orient:horiz transform:stack"></canvas>
<canvas class="chartlet" data-type="pie" data-sets="[1 2 3 4 5]" width="65" height="65" data-opts="theme:money"></canvas>
<canvas class="chartlet" data-type="pie" data-colors="#ED729D #72CAED" data-sets="[2 4]" width="85" height="65" data-opts="bgcolor:#003"></canvas>

Chart Types

Chartlets includes three basic chart types:

<canvas class="chartlet" data-type="line" ...></canvas>

<canvas class="chartlet" data-type="bar" ...></canvas>

<canvas class="chartlet" data-type="pie" ...></canvas>

Chart Data

Data is expressed as one or more sets of y-values, depending on the chart type. Sets must be of equal length; x-scales are assumed to have even increments.

<canvas class="chartlet" data-type="line" ... data-sets="[1 2 3 4 5] [5 4 3 2 1]"></canvas>

<canvas class="chartlet" data-type="bar" ... data-sets="[1.5 2.5 3.5] [4.5 5.5 6.5]"></canvas>

<canvas class="chartlet" data-type="pie" ... data-sets="[10 20 30]"></canvas>


Scales are derived from the minimum and maximum data points unless explicited stated:

<canvas class="chartlet" ... data-range="0 10" data-sets="[1 3 5] [2 4 6]"></canvas>


Pro tip: Data can be expressed in shorthand notation (e.g. "[1 2] [3 4]") or JSON (e.g. "[[1, 2], [3, 4]]").

Chart Colors

Colors are expressed in hexadecimal, RGB(A) or HSL(A) notation, one color for each data set.

<canvas class="chartlet" ... data-colors="#f00 #bada55"></canvas>

<canvas class="chartlet" ... data-colors="rgb(255,0,0) rgba(10,20,30,0.5)"></canvas>

<canvas class="chartlet" ... data-colors="hsl(200, 83%, 50%) hsla(319, 83%, 50%, 0.5)"></canvas>

Themes

Instead of specifying an array of colors, you can apply a color theme:

<canvas class="chartlet" ... data-opts="theme:money"></canvas>

Pick from one of ten built-in themes, each with five colors:

blues

money

circus

party

garden

crayon

ocean

spring

beach

fire

Or create a custom theme using any number and combination of hex, RGB(A) or HSL(A) strings:

Chartlets.setTheme("rainbow", ["#eb1f1f", "#fcb13a", "#ffd026"]);

To load the current color set:

var colors = Chartlets.getTheme();

Or to load colors for a particular theme:

var colors = Chartlets.getTheme("money");

Chart Options

Chartlets can be customized via the data-opts attribute:

<canvas class="chartlet" data-type="line" ... data-opts="stroke:2 shape:smooth cap:circle"></canvas>

Global options

Line options

Bar options

Updating Data

The update method helps you re-render charts with new data (or populate charts with data from an AJAX request). It accepts an element (or element ID) and an array of data sets. Below, the <canvas> element with ID "demo1" is updated with new values every 500ms.

var a = [2, 3, 5, 3, 6, 3, 7, 8, 4, 2];
var b = [8, 3, 4, 7, 2, 7, 2, 4, 6, 1];

setInterval(function() {
  a.push(Math.ceil(Math.random() * 9));
  b.push(Math.ceil(Math.random() * 9));
  a.shift();
  b.shift();

  Chartlets.update("demo1", [a, b]);
}, 500);

Here, a pie chart acts as a progress meter:

var a = 0;

setInterval(function() {
  if (++a > 100) {
    a = 0;
  }

  Chartlets.update("demo2", [[a, 100 - a]]);
}, 50);

Transitions

You can apply a transition effect during an update if the old and new data structures are identical. For example:

Chartlets.update("my-chart-id", [[1,2,3], [4,5,6]], { transition: "linear" });

The only transition type is "linear." Try it out below:

Custom Chart Types

You can create your own chart type by writing a custom renderer. For example, say you want to draw a smiley face with a configurable smile:

<canvas class="chartlet" id="smiley1" data-type="smiley" data-sets="[1 2] [3 4]" width="75" height="75" data-opts="gender:male hair:yes"></canvas>

The setRenderer method accepts a chart type and rendering function, which gives you direct access to the canvas context, chart data and other properties:

Chartlets.setRenderer("smiley", function (ctx, width, height, sets, opts) {
  // width = 75
  // height = 75
  // sets = [[1,2], [3,4]]
  // opts = { gender: "male", hair: "yes" }
  // colors = Chartlets.getTheme()

  // now draw into ctx
});

Transitions should work without any additional logic. Following on the above example, a smiley face might transition from a smile to a frown when the chart is updated:

Chartlets.update("smiley1", [[4,3], [2,1]], { transition: "linear" });

Notes