Minimal Multi-line Chart Library In Pure JS – picograph.js

Category: Chart & Graph , Javascript | February 6, 2021
Views Total:655 views
Official Page:Go to website
Last Update:February 6, 2021


Minimal Multi-line Chart Library In Pure JS – picograph.js


picograph.js is a tiny and standalone JavaScript library to dynamically renders a minimal, multi-line chart on an HTML canvas element.

Ideal for generating auto-updating time-series graphs such as performance monitor, traffic usage report, and much more.

Works on most modern browsers that support HTML5 canvas API.

How to use it:

1. Insert the JavaScript picograph.js into the document and we’re ready to go.

<script src="picograph.js"></script>

2. Create an HTML canvas element for the graph.

<canvas id="graphDemo"></canvas>

3. Create a DIV container for legends/labels.

<div id="graphLabels"></div>

4. Plot your data to the line graph. Possible parameters:

  • canvasID: canvas ID
  • labels: a list/array of label names
  • unit: the unit for values
  • labelDivID: CSS id of label container
  • intervalSize: amount to shift the graph on update
  • maxVal: max value
  • minVal: max value
  • scalesteps: step size
  • vlines: show vertical lines
  • timestamps: Show timestamps.
  • vlinesFreq: Vertical lines and timestamps will be drawn every vlinesFreq*intervalSize. Increase this if the vertical lines are too crowded.
var demo = createGraph(canvasID, labels, unit, labelDivID, intervalSize, maxVal, minVal, vlines=false, timestamps=false, scalesteps=5, vlinesFreq = 1);

5. Update the line graph.

Graph.update(yval, labelID)



  • Added minimum value scaling


  • Added vlinesFreq parameter


  • Removed unnecessary padding


  • Added vertical lines and timestamps

You Might Be Interested In:

Leave a Reply