How to Get Started with Dygraphs

Updated

Install Dygraphs either by downloading it from the official site or via npm (npm install --save dygraphs), then create a chart with new Dygraph(div, data, options). That single call is enough to render an interactive chart — zoom, pan, and mouseover are on by default. This guide covers both installation paths, the minimal working example, and where to go next.

Install Dygraphs

You have two options depending on your project setup.

Direct download (no build tooling): Download Dygraphs from the official homepage and include the script in your page. This suits plain HTML pages or quick experiments.

npm with a bundler (webpack, browserify, rollup):

npm install --save dygraphs

Then import it in your JavaScript:

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

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

The official site also points to an ES6 sample project if you want a fuller reference for this approach.

Create Your First Chart

The core API is a single constructor call:

new Dygraph(div, data, options)
  • div — the container element where the chart renders
  • data — your data source (a file path, CSV string, or array)
  • options — an object controlling appearance and behavior

A complete example from the project's own homepage:

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

What you get: an interactive chart. Mouse over to highlight individual values, click and drag to zoom, double-click to zoom back out, and shift-drag to pan. The roller lets you change the averaging period and press enter to apply it.

Verify It Works

After the constructor runs, the chart should appear inside your div and respond to mouse interaction immediately — no extra configuration needed. If nothing renders, check that:

  • The div exists in the DOM before the constructor runs
  • Your data file or string is reachable and correctly formatted (see the data format documentation)
  • The library script or import loaded without errors

Where to Go Next

  • Tutorial — step-by-step introduction to the library
  • Options Reference — every configuration option
  • API Reference — methods and properties on the chart object
  • CSS Reference — styling the chart
  • Data Format — accepted input formats
  • Demo Gallery — working examples to adapt
  • jsFiddle — experiment without any local setup
  • List of Users — see how others apply it

For questions, the project points to Stack Overflow and a mailing list.

What Dygraphs Is Good At

Worth knowing before you commit, since it shapes whether it fits your use case:

  • Large data sets — plots millions of points without bogging down
  • Interactivity by default — zoom, pan, and mouseover require no setup
  • High/low bands and confidence intervals — strong built-in support
  • Customization — options and custom callbacks let you shape most behavior
  • Browser support — works in all recent browsers, with pinch-to-zoom on mobile and tablet

If your goal is dense time-series data that users need to explore interactively, this feature set maps directly onto it.