简体中文
EnglishWebsite review
This review may include AI-generated content and is not individually verified. Domain, certificate and other facts come from the observed data on this page.
What is Dygraphs?
Dygraphs is an open-source JavaScript charting library for time-series and other dense data. It renders interactive line charts in the browser, with zooming, panning and mouseover value inspection enabled by default. It is designed for charts where the number of points is large — the project says it plots millions of points without bogging down — and it has particular support for high/low bands and confidence intervals.
What you get
- Interactive charts out of the box. Mouse over to highlight values, click and drag to zoom, double-click to zoom back out, Shift-drag to pan. On mobile and tablet, pinch-to-zoom works.
- Dense data handling. The intended use case is data sets with many thousands or millions of points, such as sensor readings, financial series or scientific measurements.
- Range and uncertainty display. High/low bands and confidence intervals are a first-class feature rather than something you build yourself.
- Customization. Options and callbacks let you change appearance and behavior extensively.
A minimal example
The library is initialized with a container element, a data source and an options object:
g = new Dygraph(div, "ny-vs-sf.txt", {
legend: 'always',
title: 'NYC vs. SF',
showRoller: true,
rollPeriod: 14,
customBars: true,
ylabel: 'Temperature (F)',
});
Data can come from a file, a URL or inline data, and the options control legend, title, rolling average, error bars and axis labels.
Who it suits
Dygraphs fits developers who need a focused time-series chart rather than a general-purpose visualization toolkit. If your page shows a single dense line chart with a range band, Dygraphs is a direct match. If you need many different chart types — pie, bar, scatter, maps — or a declarative framework integration, a broader library may be less work. It works in all recent browsers and can be installed through npm and used with bundlers such as webpack, browserify or rollup:
import Dygraph from 'dygraphs';
Where to start
Download the library and read the tutorial, or experiment in jsFiddle first. The demo gallery shows what the library can do, and the options reference and data format documentation cover the details you will need once you move past the first chart. For questions, the project points to Stack Overflow and its mailing list.
If you are comparing options, the practical criterion is data volume and interaction: try Dygraphs when you have a long time series that users need to zoom into, and check the demo gallery against your own data before committing. The official site is Dygraphs.
How do I install Dygraphs using npm and a bundler?
Install Dygraphs from npm and import it as an ES module (or require it from CommonJS):
npm install --save dygraphs
import Dygraph from 'dygraphs';
// or: const Dygraph = require('dygraphs');
const g = new Dygraph(div, data, {});
The npm route is the one to take if your project already runs through webpack, browserify or rollup; the library's own documentation points to an ES6 sample project for that setup. The constructor takes a container element, your data (a file path, array, or similar), and an options object — the same call shape you'd use with a script tag.
What to check next
- Confirm your bundler resolves the package's module entry rather than a prebuilt global build; if the import returns something without a working constructor, that's usually why.
- Load a small inline data array first, then switch to your real feed. Dense data is where Dygraphs is meant to earn its keep, but a trivial series isolates bundler problems from data problems.
- If you prefer no build step at all, the project's download page covers direct browser use, and you can experiment without installing anything via its jsFiddle link.
For anything beyond the basic call, the Dygraphs options and data-format references are the pages worth reading before you write custom callbacks.
How does Dygraphs handle large data sets with millions of points?
Dygraphs is designed to plot very large series without turning the page into a slideshow: its own documentation says it handles millions of points and remains responsive. It achieves this mainly through canvas rendering, by plotting only the visible x-range after zooming or panning, and by decimating or aggregating points when the chart is wider than the number of pixels available. The built-in roller is the clearest example: it averages (or otherwise rolls up) values over a configurable period so that a dense line becomes a readable trend, which you can adjust interactively.
What this means in practice
- Zoom and pan are the main tools. Because off-screen data is not redrawn, dragging to a narrow time window keeps interaction fast even when the full series is huge.
- The roller trades detail for speed and clarity. A 14-day roll period on daily temperature data, as in the homepage example, smooths noise and reduces the number of points drawn.
- High/low bands and confidence intervals are supported directly, so you can show a range around a central line without plotting every raw sample.
- Mobile works too, including pinch-to-zoom, though very large datasets will still be limited by the device's memory and canvas performance.
A realistic scenario
Suppose you have a decade of minute-by-minute sensor readings — roughly five million points. Loading the full series into Dygraphs and then zooming to a single week is the intended workflow: the initial view may show a rolled-up or decimated line, and the detail appears as you narrow the range. If you need every individual point visible at once, no browser charting library will stay smooth; you would instead pre-aggregate on the server or use the roller.
How to decide
| Need | Reasonable approach with Dygraphs |
|---|---|
| Explore millions of points interactively | Load the series, use zoom/pan, keep the roller enabled |
| Show a clean long-term trend | Increase rollPeriod or pre-aggregate |
| Show uncertainty | Use high/low bands or custom bars |
| Embed in a modern build | Install via npm and import Dygraph |
Start with the tutorial and the data format documentation on the official site, then test with your own largest series before committing. If your data is dense but you mostly need overview-then-detail, Dygraphs is a strong fit; if you need heavy per-point annotation or 3D, look elsewhere.
How can I add high/low bands or confidence intervals to a Dygraphs chart?
Dygraphs treats high/low bands and confidence intervals as a first-class data format rather than an add-on. You supply three values per x-position—low, middle, high—and the library draws a shaded band around the central line automatically.
The customBars option
The page's own example shows the pattern:
g = new Dygraph(div, "ny-vs-sf.txt", {
legend: 'always',
title: 'NYC vs. SF',
showRoller: true,
rollPeriod: 14,
customBars: true,
ylabel: 'Temperature (F)',
});
Setting customBars: true tells Dygraphs to interpret each data point as a triple instead of a single number. The middle value becomes the line; the outer two become the band edges.
Data format
In CSV, a point looks like [low, mid, high]:
Date,Temperature
2016-01-01,[30, 38, 45]
2016-01-02,[28, 36, 43]
The central value is what the legend and mouseover report by default, while the band shows the spread. This is exactly the shape you want for confidence intervals: put the lower bound, the estimate, and the upper bound in that order.
Practical considerations
- Ordering matters. Low must be the smallest value and high the largest, or the band will render inverted or oddly. If you generate intervals programmatically, sort each triple before handing it over.
- Missing bounds. If you only have an estimate and no interval, you can repeat the value three times (
[x, x, x]) to keep the data shape consistent while showing no visible band. - Dense data. The library's stated strength is plotting very large series, so bands over thousands of points are feasible; the band is drawn as a filled region behind the line, which stays readable as long as your intervals are not wildly wider than the signal.
- Rolling averages. The example pairs
customBarswithshowRollerandrollPeriod. When a user changes the averaging period interactively, the band is recomputed along with the line, so the interval stays consistent with the smoothed series.
A reader scenario
Suppose you are charting weekly server latency with p10/p50/p90 percentiles. Each row becomes [p10, p50, p90] with customBars: true. The p50 line shows the typical experience, and the shaded region shows how variable things were—useful for spotting weeks where the median looked fine but the tail blew out.
Where to go next
Confirm the exact triple syntax and any edge cases in the data format documentation, then browse the demo gallery for band examples you can adapt. If you hit a snag, the project's community channels (Stack Overflow tag and mailing list) are the intended support route. The library is open source, so you can also read the source if the docs leave a detail ambiguous.
How do I customize Dygraphs using options and callbacks?
Customize Dygraphs primarily through the options object you pass as the third argument to the Dygraph constructor, and through callbacks that run at specific points in the chart's lifecycle. The library exposes a broad options reference plus an API that lets callbacks inspect or modify the chart as it renders.
Options: the main customization surface
Every chart starts with a configuration object:
new Dygraph(div, data, {
legend: 'always',
title: 'NYC vs. SF',
ylabel: 'Temperature (F)',
showRoller: true,
rollPeriod: 14,
customBars: true
});
The page evidence shows these specific options in use, so you can treat them as concrete starting points:
legend— controls whether and where the legend appears (for example,'always').title— sets the chart title.ylabel— labels the y-axis.showRollerandrollPeriod— expose and set the averaging period, which the user can also change interactively.customBars— enables high/low band or confidence-interval style rendering.
Beyond these, Dygraphs documents a full Options Reference and CSS Reference, which are the places to look when you need axis formatting, colors, gridlines, interaction behavior or styling hooks. Options are the first tool to reach for because they are declarative and require no code beyond the config object.
Callbacks: when options are not enough
Callbacks let you hook into chart behavior and drawing. They are useful when you need logic that depends on data values, user interaction, or the rendered canvas. Typical uses include:
- Formatting axis labels or value readouts dynamically.
- Reacting to zoom, pan or selection events.
- Drawing custom overlays or annotations on top of the chart.
- Adjusting series visibility or styling based on runtime state.
Because callbacks run inside the chart's lifecycle, they can access the Dygraph instance and its data, so you can read the current range, the underlying values, or the DOM container. The API Reference and Annotations documentation cover the available methods and events.
Choosing between them
| Need | Use |
|---|---|
| Static appearance, labels, legend, bands | Options |
| User-adjustable averaging period | showRoller + rollPeriod |
| Dynamic label formatting or event response | Callbacks |
| Custom drawing on the canvas | Callbacks |
| Styling via CSS classes | CSS Reference |
A practical rule: if the behavior can be expressed as a fixed setting, use an option; if it depends on data or user action at runtime, use a callback.
A concrete next step
Start with the Tutorial to get a working chart, then open the Options Reference and the demo gallery side by side. Pick a demo whose behavior resembles what you want, copy its config, and modify one option at a time. When you hit a limit — for example, a label that must change based on the visible range — move that piece into a callback and consult the API Reference for the relevant method or event.
For installation with a bundler, the page shows the npm path:
npm install --save dygraphs
import Dygraph from 'dygraphs';
const g = new Dygraph(div, data, {});
If you get stuck, the project points to Stack Overflow and a mailing list for questions, and the source on GitHub plus the issue tracker for bugs and contributions. The official project site is Dygraphs.
Where can I find Dygraphs examples, demos, and a list of users?
Dygraphs keeps all three of those resources in its own site navigation. The Demo Gallery is the main examples hub, the Test Cases page shows smaller feature-by-feature samples, and the List of Users page names projects and organizations that have used the library.
What each page is for
| Page | Best for | What you get |
|---|---|---|
| Demo Gallery | Seeing full charts in context | Interactive examples you can inspect for options and layout patterns |
| Test Cases | Checking one feature at a time | Focused cases for things like zooming, error bands, or custom callbacks |
| List of Users | Judging real-world adoption | Named projects and organizations, useful when you need to justify the choice to a team |
A practical way to use them
Start with the Demo Gallery, find the chart closest to what you need, and view its source to see which options produce that result. If the feature you want is not obvious in a full demo, search the Test Cases page for it — those examples isolate single behaviors, so the relevant option is easier to spot. Skim the List of Users page only if you need evidence that the library is used beyond tutorials.
For questions after that, the project points to Stack Overflow and its mailing list, both linked from the main navigation. If you are evaluating alternatives, Plotly and Chart.js cover similar interactive charting ground and also publish example galleries worth comparing.
Fastly
Google Workspace
User reviews (0)