Dygraphs Options Reference

Options Reference

Dygraphs tries to do a good job of displaying your data without any further configuration. But inevitably, you're going to want to tinker. Dygraphs provides a rich set of options for configuring its display and behavior.

Usage

You specify options in the third parameter to the dygraphs constructor:

g = new Dygraph(div,
                data,
                {
                  option1: value1,
                  option2: value2,
                  ...
                });

After you've created a Dygraph, you can change an option by calling the updateOptions method:

g.updateOptions({
                  new_option1: value1,
                  new_option2: value2
                });

And, without further ado, here's the complete list of options:

Annotations

annotationClickHandler
If provided, this function is called whenever the user clicks on an annotation.
Type: function(annotation, point, dygraph, event)
Default: null
Examples: annotation

annotationDblClickHandler
If provided, this function is called whenever the user double-clicks on an annotation.
Type: function(annotation, point, dygraph, event)
Default: null
Examples: annotation

annotationMouseOutHandler
If provided, this function is called whenever the user mouses out of an annotation.
Type: function(annotation, point, dygraph, event)
Default: null
Examples: annotation

annotationMouseOverHandler
If provided, this function is called whenever the user mouses over an annotation.
Type: function(annotation, point, dygraph, event)
Default: null
Examples: annotation

displayAnnotations
Only applies when Dygraphs is used as a GViz chart. Causes string columns following a data series to be interpreted as annotations on points in that series. This is the same format used by Google's AnnotatedTimeLine chart.
Type: boolean
Default: false
Examples: annotation-gviz

Axis display

avoidMinZero
When set, the heuristic that fixes the Y axis at zero for a data set with the minimum Y value of zero is disabled. This is particularly useful for data sets that contain many zero values, especially for step plots which may otherwise have lines not visible running along the bottom axis.
Type: boolean
Default: false
Examples: avoidMinZero

axis
Set to either an object ({}) filled with options for this axis or to the name of an existing data series with its own axis to re-use that axis. See tests for usage.
Type: string or object
Default: (none)
Examples: two-axes steps two-axes-vr value-axis-formatters

axisLabelColor
Color for x- and y-axis labels. This is a CSS color string.
Type: string
Default: black
Examples: NONE

axisLabelFontSize
Size of the font (in pixels) to use in the axis labels, both x- and y-axis.
Type: integer
Default: 14
Examples: NONE

axisLabelFormatter
Function to call to format the tick values that appear along an axis. This is usually set on a per-axis basis. The first parameter is either a number (for a numeric axis) or a Date object (for a date axis). The second argument specifies how fine-grained the axis is. For date axes, this is a reference to the time granularity enumeration, defined in dygraph-tickers.js, e.g. Dygraph.WEEKLY. opts is a function which provides access to various options on the dygraph, e.g. opts('labelsKMB').
Type: function(number or Date, granularity, opts, dygraph)
Default: Depends on the data type
Examples: x-axis-formatter y-axis-formatter value-axis-formatters