Blog of Raivo Laanemets

Some time ago I built a small library to draw some line charts using the HTML5 canvas. I have been using it in some projects requiring simple responsive line charts. It can do this:

• Draws min/max/zero line.
• Draws min/max labels.
• Single line.
• Width-responsive.

Multiple lines, ticks, x-axis labels etc. are not support. There are other libraries that support all of these. It has no dependencies but requires ES5, canvas and requestAnimationFrame support. The library is extremely lightweight and uses very few resources.

Example

This is the HTML code containing the canvas and input data. The data is embedded directly by using the data-values attribute:

<canvas class="chart" id="chart" data-values="1,2,3,-1,-3,0,1,2"></canvas>
<script src="dataline.js"></script>
<script>
  Dataline.draw("chart");
</script>

And the CSS code to set the chart size:

.chart {
  width: 100%;
  height: 200px;
}

Live demo: http://demos.rlaanemets.com/dataline/example.html

The source code of the library, documentation, and the installation instructions can be found in the project repository.