⚠ 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:
new Dygraph(div, "ny-vs-sf.txt", { legend: 'always', title: 'NYC vs. SF', showRoller: true, rollPeriod: 14, customBars: true, ylabel: 'Temperature (F)', });
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 error bars / 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 dygraphsand 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
- Tutorial
- Options Reference
- API Reference
- CSS Reference
- Data format documentation
- Ask a Question on Stack Overflow.
- Mailing List
- dygraphs blog
- Policy & Licensing