What Are the Key Features of Dygraphs?

Updated

Dygraphs is a fast, flexible open source JavaScript charting library for exploring and interpreting dense data sets. Its headline strengths are handling very large data sets (the project says it plots millions of points without bogging down), interactive behavior that works out of the box, strong support for high/low bands and confidence intervals, and deep customization through options and callbacks. It runs in all recent browsers and supports pinch-to-zoom on mobile and tablet devices.

Core features

Feature What it means in practice
Large data sets Designed to plot millions of points without getting bogged down
Interactive by default Zoom, pan, and mouseover are on without extra configuration
High/low bands Strong support for high/low bands and confidence intervals
Customizable Options and custom callbacks let you make dygraphs do almost anything
Browser support Works in all recent browsers, including pinch-to-zoom on mobile/tablet

Built-in interactions

The chart is interactive as soon as it renders:

  • Mouseover highlights individual values.
  • Click and drag zooms in.
  • Double-click zooms back out.
  • Shift-drag pans.
  • Change the number and hit enter to adjust the averaging period (the roller).

A minimal example

The library's own example shows how much a single constructor call can configure:

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

This produces an interactive chart with an always-visible legend, a title, a roller for adjusting the averaging period, custom bars, and a labeled y-axis.

When Dygraphs fits your needs

Choose Dygraphs if you need to:

  • Visualize dense or large data sets where rendering performance matters.
  • Get zoom, pan, and hover behavior without building it yourself.
  • Show high/low bands or confidence intervals around a series.
  • Customize heavily via options and callbacks.

If your requirement is a simple static chart with minimal data, the interactivity and large-data focus may be more than you need — but they won't get in your way.

Getting started

  1. Download dygraphs from the project site.
  2. Read the Tutorial to learn usage, or experiment directly on jsFiddle.
  3. Browse the demo gallery for inspiration, or check the list of users.
  4. Install via npm if you use a bundler like webpack, browserify, or rollup:
npm install --save dygraphs

import Dygraph from 'dygraphs';
// or:
const Dygraph = require('dygraphs');

const g = new Dygraph(div, data, {});

An ES6 sample project is available for more detail on this approach.

Documentation and community

  • Tutorial
  • Options Reference
  • API Reference
  • CSS Reference
  • Data format documentation
  • Ask a Question on Stack Overflow
  • Mailing List
  • dygraphs blog

Note: The source material warns that if you are reading it on a mirror (or as part of the Debian package), it may be outdated, incomplete, or locally patched, and links may not work. Use the official Dygraphs homepage at https://dygraphs.com/ instead.