Interactive visualizations of time series using JavaScript and the HTML canvas tag
3,240
stars
2,433
commits
JavaScript
primary language
Jul 29, 2026
updated
README
dygraphs JavaScript charting library
The dygraphs JavaScript library produces interactive, zoomable charts of time series:
Learn more about it at dygraphs.com.
Get help with dygraphs on Stack Overflow (preferred) and Google Groups.
Features
- Plots time series without using an external server or Flash
- Supports error bands around data series
- Interactive pan and zoom
- Displays values on mouseover
- Adjustable averaging period
- Extensive set of options for customization.
- Compatible with the Google Visualization API
Minimal Example
<html>
<head>
<link rel="stylesheet" type="text/css" href="dygraph.css" />
<script type="text/javascript" src="dygraph.js"></script>
</head>
<body>
<div id="graphdiv"></div>
<script type="text/javascript"><!--//--><![CDATA[//><!--
Dygraph.onDOMready(function onDOMready() { // or jQuery $() etc.
g = new Dygraph(
document.getElementById("graphdiv"), // containing div
"Date,Temperature\n" + // the data series
"2008-05-07,75\n" +
"2008-05-08,70\n" +
"2008-05-09,80\n",
{ } // the options
);
});
//--><!]]></script>
</body>
</html>
Learn more by reading the tutorial and seeing demonstrations of what
dygraphs can do in the gallery. You can get dygraph.js and dygraph.css
from UNPKG, jsDelivr, cdnjs or NPM (see below).
Usage with a module loader
Get dygraphs from NPM:
npm install dygraphs
Do not install from the git repository! Always use a tarball install,
which contains the prebuilt files; npm fails to build the source code
on install from github. (The tarball from the GitHub Registry is fine.)
You'll find pre-built JS & CSS files in node_modules/dygraphs/dist/. If you're
using a module bundler like browserify or webpack, you can import dygraphs:
import Dygraph from 'dygraphs';
// or: const Dygraph = require('dygraphs');
const g = new Dygraph('graphdiv', data, { /* options */ });
Check out the dygraphs-es6 repo for a fully-worked example.
Development
To get going, install the following Debian packages…
jqmkshpaxpython3
… clone the repo and run:
npm install
npm run build-jsonly
Then open tests/demo.html in your browser.
Read more about the dygraphs development process in the developer guide.
License(s)
dygraphs is 100% human-written and available under the MIT licence, included in LICENSE.txt.
Use of so-called “AI” / LLMs to prepare a contribution or interact with anyone in the project or its users is not welcome.
Contributors
(top 30 of 101)
Similar repos
Languages
JavaScript
76.4%
HTML
19.7%
Shell
2.0%
Python
1.4%
Interactive visualizations of time series using JavaScript and the HTML canvas tag
3,240
stars
2,433
commits
JavaScript
primary language
Jul 29, 2026
updated
README
dygraphs JavaScript charting library
The dygraphs JavaScript library produces interactive, zoomable charts of time series:
Learn more about it at dygraphs.com.
Get help with dygraphs on Stack Overflow (preferred) and Google Groups.
Features
- Plots time series without using an external server or Flash
- Supports error bands around data series
- Interactive pan and zoom
- Displays values on mouseover
- Adjustable averaging period
- Extensive set of options for customization.
- Compatible with the Google Visualization API
Minimal Example
<html>
<head>
<link rel="stylesheet" type="text/css" href="dygraph.css" />
<script type="text/javascript" src="dygraph.js"></script>
</head>
<body>
<div id="graphdiv"></div>
<script type="text/javascript"><!--//--><![CDATA[//><!--
Dygraph.onDOMready(function onDOMready() { // or jQuery $() etc.
g = new Dygraph(
document.getElementById("graphdiv"), // containing div
"Date,Temperature\n" + // the data series
"2008-05-07,75\n" +
"2008-05-08,70\n" +
"2008-05-09,80\n",
{ } // the options
);
});
//--><!]]></script>
</body>
</html>
Learn more by reading the tutorial and seeing demonstrations of what
dygraphs can do in the gallery. You can get dygraph.js and dygraph.css
from UNPKG, jsDelivr, cdnjs or NPM (see below).
Usage with a module loader
Get dygraphs from NPM:
npm install dygraphs
Do not install from the git repository! Always use a tarball install,
which contains the prebuilt files; npm fails to build the source code
on install from github. (The tarball from the GitHub Registry is fine.)
You'll find pre-built JS & CSS files in node_modules/dygraphs/dist/. If you're
using a module bundler like browserify or webpack, you can import dygraphs:
import Dygraph from 'dygraphs';
// or: const Dygraph = require('dygraphs');
const g = new Dygraph('graphdiv', data, { /* options */ });
Check out the dygraphs-es6 repo for a fully-worked example.
Development
To get going, install the following Debian packages…
jqmkshpaxpython3
… clone the repo and run:
npm install
npm run build-jsonly
Then open tests/demo.html in your browser.
Read more about the dygraphs development process in the developer guide.
License(s)
dygraphs is 100% human-written and available under the MIT licence, included in LICENSE.txt.
Use of so-called “AI” / LLMs to prepare a contribution or interact with anyone in the project or its users is not welcome.
Similar repos
Contributors
(top 30 of 101)
Languages
JavaScript
76.4%
HTML
19.7%
Shell
2.0%
Python
1.4%