Lightweight line charts with Pista.js

Some months ago, while I was working on a new version of trackthisfor.me, I tried to find the best library for timeseries line charts, but even if there are dozens of great libraries (c3.js, flot, chartjs just to name a few) none of these was perfect for my needs and I ended up building another one.

The goal was to have a <10kb library (5.6kb as of now), easy to download also on mobile and that works well both with jquery and zepto.
Although the dimension is small, it supports some customizations such as:
– straight/curve lines;
– fillable lines;
– multiple lines in the same chart;
– tooltip callback support;
– custom max/min X Y values;
– goal value;

There is a lot of stuff missing (such as legends, and a non-time x-axis), but i didn’t want to add a lot of bloat. If you want to have a full chart library, you’d rather want to use flot or d3.js. 🙂

The usage is really easy:

//index.html
<div id="chart"></div>

//script.js
$(document).ready(function(){
var data= [
  { name:"first",
    data:[
        {value:12, date:"12/14/2014"},
        {value:32, date:"12/15/2014"},
        {value:56, date:"12/17/2014"},
        {value:45, date:"12/19/2014"}
    ]
  }
]
options={
  height: 150,
  width: 600,
}
$("#chart").pista(data, options);

Check it out on Github or on this CodePen demo!