⚠ Please visit the official Dygraphs homepage https://dygraphs.com/ instead. You are reading this on a mirror, which may have outdated, incomplete and/or locally patched information, or as part of the Debian package; links may not work.

dygraphs is a fast, flexible open source JavaScript charting library.

It allows users to explore and interpret dense data sets. Here's how it works:

This JavaScript… 
g = new Dygraph(div, "ny-vs-sf.txt", {
  legend: 'always',
  title: 'NYC vs. SF',
  showRoller: true,
  rollPeriod: 14,
  customBars: true,
  ylabel: 'Temperature (F)',
});
… makes this chart!

The chart is interactive: you can mouse over to highlight individual values. You can click and drag to zoom. Double-clicking will zoom you back out. Shift-drag will pan. You can change the number and hit enter to adjust the averaging period.

Features

  • Handles huge data sets: dygraphs plots millions of points without getting bogged down.
  • Interactive out of the box: zoom, pan and mouseover are on by default.
  • Strong support for high/low bands / confidence intervals.
  • Highly customizable: using options and custom callbacks, you can make dygraphs do almost anything.
  • dygraphs is works in all recent browsers. You can even pinch to zoom on mobile/tablet devices!
  • There's an active community developing and supporting dygraphs.

Getting Started

Start by downloading dygraphs. Then read the Tutorial to learn how to use it, or just play with dygraphs on jsFiddle.

Once you've got your feet wet, look for inspiration in the demo gallery or check out our list of users.

If you're using npm and a bundler like webpack, browserify or rollup, you can install dygraphs via:

npm install --save dygraphs
and use it via: 
import Dygraph from 'dygraphs';
// or: const Dygraph = require('dygraphs');
const g = new Dygraph(div, data, {});

Check out the dygraphs ES6 sample project for more details on this approach.

Quick Links