Created: 2012-03-21 15:27
Updated: 2013-10-02 14:57
License: other

Simple, tiny & cute.js

A charting library for JavaScript. Please visit for more details.


To use STC, just initialise the class and call the plot method once you get a hold on the data.

var chart = new STC(canvasElement.getContext('2d'), {
  w: width,
  h: height

The data should be an array consisting of X and Y coordinates and an optional label (currently only shown when point chart is in use).

  [0, 0, '0'],
  [0, 1, '1'],
  [1, 0, '2'],
  [1, 1, '3']
], {
  type: 'area'


Class constructor takes the following options:

  • w: width of the canvas element (required)
  • h: height of the element (required)
  • padding: padding from all the sides (defaults to 20)
  • axes | grid | background: canvas gradient or a colour in which the axes/grid/background should be drawn. false if you don't want them.

Using with QML

STC was primarily built for qmlcanvas and use on mobile phones. Using it with QML should be as simple as with HTML.

import "stc.qml.js" as STC

Canvas {
  id: canvas

  onPaint: {
    var c = new STC.STC(getContext(), {
      w: width,
      h: height

    fetchDataFromSQLiteDB(function (data) {
      c.plot(d, {axes: false})

To enable interactivity on the graph, you can create a MouseArea over the canvas and combine two helper methods:

  • closestPtX([x, y]): returns the point closes to the given (absolute) coordinates
  • ptToCoords([x, y]): returns absolute coordinates (for use with QML) of the given point (relative)

Please note that saving the STC object into a QML property will not work because QML destroys object's prototype chain.

Cookies help us deliver our services. By using our services, you agree to our use of cookies Learn more