## 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 behaviour.

### 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
                    });

Some options can be set on a per-axis and per-series basis. See the docs on per-axis and per-series options to learn how to do this. The options which may be set in this way are marked as such on this page.

For options which are functions (e.g. callbacks and formatters), the value of `this` is set to the Dygraph object.

Note: tests marked with ⚠ access external resources, such as Google’s jsapi.

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)

annotation: | the annotation left
point: | the point associated with the annotation
dygraph: | the reference graph
event: | the mouse event

Default: null

Gallery Samples: | annotations
Other Examples: | annotation

annotationDblClickHandler #

If provided, this function is called whenever the user double-clicks on an annotation.

Type: function(annotation, point, dygraph, event)

annotation: | the annotation left
point: | the point associated with the annotation
dygraph: | the reference graph
event: | the mouse event

Default: null

Gallery Samples: | annotations
Other Examples: | annotation

annotationMouseOutHandler #

If provided, this function is called whenever the user mouses out of an annotation.

Type: function(annotation, point, dygraph, event)

annotation: | the annotation left
point: | the point associated with the annotation
dygraph: | the reference graph
event: | the mouse event

Default: null

Gallery Samples: | annotations
Other Examples: | annotation

annotationMouseOverHandler #

If provided, this function is called whenever the user mouses over an annotation.

Type: function(annotation, point, dygraph, event)
Default: null

Gallery Samples: | annotations
Other 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

Gallery Samples: | annotations-gviz
Other Examples: | annotation-gviz⚠

### Axis display

axis #

Set to either 'y1' or 'y2' to assign a series to a y-axis (primary or secondary). Must be set per-series.

Type: string
Default: (none)

Gallery Samples: | two-axes
Other Examples: | grid_dot; steps; two-axes; two-axes-vr; value-axis-formatters

axisLabelFontSize #

Size of the font (in pixels) to use in the axis labels, both x- and y-axis.

Type: integer
Default: 14

Gallery Samples: | NONE
Other 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.

Type: function(number_or_Date, granularity, opts, dygraph)

number_or_Date: | Either a number (for a numeric axis) or a Date object (for a date axis)
granularity: | 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: | a function which provides access to various options on the dygraph, e.g. opts('labelsKMB').
dygraph: | the referenced graph

Default: Depends on the data type

Gallery Samples: | NONE
Other Examples: | value-axis-formatters; x-axis-formatter

axisLabelWidth #

Width (in pixels) of the containing divs for x- and y-axis labels. For the y-axis, this also controls the width of the y-axis. Note that for the x-axis, this is independent from pixelsPerLabel, which controls the spacing between labels.

Type: integer
Default: 50 (y-axis), 60 (x-axis)

Gallery Samples: | two-axes
Other Examples: | customLabel; customLabelCss3; multi-scale; two-axes; two-axes-vr; value-axis-formatters; x-axis-formatter

axisLineColor #

Color of the x- and y-axis lines. Accepts any value which the HTML canvas strokeStyle attribute understands, e.g. 'black' or 'rgb(0, 100, 255)'.

Type: string
Default: black

Gallery Samples: | demo
Other Examples: | demo; plugins; rtl

axisLineWidth #

Thickness (in pixels) of the x- and y-axis lines.

Type: float
Default: 0.3

Gallery Samples: | NONE
Other Examples: | NONE

axisTickSize #

The size of the line to display next to each tick mark on x- or y-axes.

Type: number
Default: 3.0

Gallery Samples: | NONE
Other Examples: | NONE

dateWindow #

Initially zoom in on a section of the graph. Is of the form [earliest, latest], where earliest/latest are milliseconds since epoch. If the data for the x-axis is numeric, the values in dateWindow must also be numbers.

Type: Array of two numbers
Default: Full range of the input is shown

Gallery Samples: | drawing; interaction-api; link-interaction
Other Examples: | dateWindow; daylight-savings; drawing; independent-series; link-interaction; old-yrange-behavior; plotters; range-selector; zoom

drawAxesAtZero #

When set, draw the X axis at the Y=0 position and the Y axis at the X=0 position if those positions are inside the graph’s visible area. Otherwise, draw the axes at the bottom or left graph edge as usual.

Type: boolean
Default: false

Gallery Samples: | linear-regression
Other Examples: | NONE

drawAxis #

Whether to draw the specified axis. This may be set on a per-axis basis to define the visibility of each axis separately. Setting this to false also prevents axis ticks from being drawn and reclaims the space for the chart grid/lines.

Type: boolean
Default: true for x and y, false for y2

Gallery Samples: | drawing
Other Examples: | drawing; range-selector; unboxed-spark

includeZero #

Usually, dygraphs will use the range of the data plus some padding to set the range of the y-axis. If this option is set, the y-axis will always include zero, typically as the lowest value. This can be used to avoid exaggerating the variance in the data

Type: boolean
Default: false

Gallery Samples: | no-range
Other Examples: | no-range; numeric-gviz⚠; plotters; range-selector; small-range-zero; steps

independentTicks #

Only valid for y and y2, has no effect on x: This option defines whether the y axes should align their ticks or if they should be independent. Possible combinations: [1.] y=true, y2=false (default): y is the primary axis and the y2 ticks are aligned to the the ones of y. (only 1 grid) [2.] y=false, y2=true: y2 is the primary axis and the y ticks are aligned to the the ones of y2. (only 1 grid) [3.] y=true, y2=true: Both axis are independent and have their own ticks. (2 grids) [4.] y=false, y2=false: Invalid configuration causes an error.

Type: boolean
Default: true for y, false for y2

Gallery Samples: | NONE
Other Examples: | grid_dot; two-axes

labelsUTC #

Show date/time labels according to UTC (instead of local time).

Type: boolean
Default: false

Gallery Samples: | NONE
Other Examples: | drawing; labelsDateUTC

logscale #

When set for the y-axis or x-axis, the graph shows that axis in log scale. Any values less than or equal to zero are not displayed. Showing log scale with ranges that go below zero will result in an unviewable graph. Not compatible with showZero. connectSeparatedPoints is ignored. This is ignored for date-based x-axes.

Type: boolean
Default: false

Gallery Samples: | stock
Other Examples: | logscale; stock

panEdgeFraction #

A value representing the farthest a graph may be panned, in percent of the display. For example, a value of 0.1 means that the graph can only be panned 10% passed the edges of the displayed values. null means no bounds.

Type: float
Default: null

Gallery Samples: | NONE
Other Examples: | zoom

pixelsPerLabel #

Number of pixels to require between each x- and y-label. Larger values will yield a sparser axis with fewer ticks. This is set on a per-axis basis.

Type: integer
Default: 70 (x-axis) or 30 (y-axes)

Gallery Samples: | NONE
Other Examples: | hairlines; spacing; value-axis-formatters

ticker #

This lets you specify an arbitrary function to generate tick marks on an axis. The tick marks are an array of (value, label) pairs. The built-in functions go to great lengths to choose good tick marks so, if you set this option, you’ll most likely want to call one of them and modify the result. See dygraph-tickers.js for an extensive discussion. This is set on a per-axis basis.

Type: function(min, max, pixels, opts, dygraph, vals) → [{v: …, label: …}, …]

min: |
max: |
pixels: |
opts: |
dygraph: | the reference graph
vals: |

Default: Dygraph.dateTicker or Dygraph.numericTicks

Gallery Samples: | NONE
Other Examples: | grid_dot; label_v

valueRange #

Explicitly set the vertical range of the graph to [low, high]. This may be set on a per-axis basis to define each y-axis separately. If either limit is unspecified, it will be calculated automatically (e.g. [null, 30] to automatically calculate just the lower bound)

Type: Array of two numbers
Default: Full range of the input is shown

Gallery Samples: | drawing; dynamic-update; interaction-api
Other Examples: | drawing; dynamic-update; grid_dot; label_v; no-visibility; old-yrange-behavior; reverse-y-axis; two-axes-vr; zoom

xAxisHeight #

Height, in pixels, of the x-axis. If not set explicitly, this is computed based on axisLabelFontSize and axisTickSize.

Type: integer
Default: (null)

Gallery Samples: | NONE
Other Examples: | range-selector

xRangePad #

Add the specified amount of extra space (in pixels) around the X-axis value range to ensure points at the edges remain visible.

Type: float
Default: 0

Gallery Samples: | NONE
Other Examples: | NONE

yRangePad #

If set, add the specified amount of extra space (in pixels) around the Y-axis value range to ensure points at the edges remain visible. If unset, use the traditional Y padding algorithm.

Type: float
Default: null

Gallery Samples: | NONE
Other Examples: | NONE

### CSV parsing

customBars #

When set, parse each CSV cell as "low;middle;high". Custom high/low bands will be drawn for each point between low and high, with the series itself going through middle.

Type: boolean
Default: false

Gallery Samples: | range-selector; stock; temperature-sf-ny
Other Examples: | custom-bars; missing-data; range-selector; resizable; steps; stock; temperature-sf-ny; zero-series

delimiter #

The delimiter to look for when separating fields of a CSV file. Setting this to a tab is not usually necessary, since tab-delimited data is auto-detected.

Type: string
Default: ,

Gallery Samples: | NONE
Other Examples: | NONE

errorBars #

Does the data contain standard deviations? Setting this to true alters the input format (see above).

Type: boolean
Default: false

Gallery Samples: | callbacks; interaction; link-interaction; resizable; resize; synchronize
Other Examples: | callback; charting-combinations; crosshair; custom-bars; customLabel; customLabelCss3; draw-points; fractions; grid_dot; interaction; legend-values; linear-regression-fractions; link-interaction; missing-data; no-visibility; numeric-gviz⚠; old-yrange-behavior; perf; plotters; resize; steps; synchronize; underlay-callback; visibility; zoom

fractions #

When set, attempt to parse each cell in the CSV file as "a/b", where a and b are integers. The ratio will be plotted. This allows computation of Wilson confidence intervals (see below).

Type: boolean
Default: false

Gallery Samples: | NONE
Other Examples: | fractions; linear-regression-fractions

xValueParser #

A function which parses x-values (i.e. the dependent series). Must return a number, even when the values are dates. In this case, millis since epoch are used. This is used primarily for parsing CSV data. *=Dygraphs is slightly more accepting in the dates which it will parse. See code for details.

Type: function(str) -> number
Default: parseFloat() or Date.parse()*

Gallery Samples: | NONE
Other Examples: | NONE

### Callbacks

clickCallback #

A function to call when the canvas is clicked.

Type: function(e, x, points)

e: | The event object for the click
x: | The x value that was clicked (for dates, this is milliseconds since epoch)
points: | The closest points along that date. See Point properties for details.

Default: null

Gallery Samples: | callbacks; highlighted-series
Other Examples: | callback

drawCallback #

When set, this callback gets called every time the dygraph is drawn. This includes the initial draw, after zooming and repeatedly while panning.

Type: function(dygraph, is_initial)

dygraph: | The graph being drawn
is_initial: | True if this is the initial draw, false for subsequent draws.

Default: null

Gallery Samples: | annotations; callbacks
Other Examples: | annotation; callback; is-zoomed; linear-regression-addseries; zoom

highlightCallback #

When set, this callback gets called every time a new point is highlighted.

Type: function(event, x, points, row, seriesName)

event: | the JavaScript mousemove event
x: | the x-coordinate of the highlighted points
points: | an array of highlighted points: `[ {name: 'series', yval: y-value}, … ]`
row: | integer index of the highlighted row in the data table, starting from 0
seriesName: | name of the highlighted series, only present if highlightSeriesOpts is set.

Default: null

Gallery Samples: | callbacks
Other Examples: | callback

pointClickCallback #

A function to call when a data point is clicked. and the point that was clicked.

Type: function(e, point)

e: | the event object for the click
point: | the point that was clicked See Point properties for details

Default: null

Gallery Samples: | annotations; callbacks
Other Examples: | annotation; callback

underlayCallback #

When set, this callback gets called before the chart is drawn. It details on how to use this.

Type: function(context, area, dygraph)

context: | the canvas drawing context on which to draw
area: | An object with {x,y,w,h} properties describing the drawing area.
dygraph: | the reference graph

Default: null

Gallery Samples: | highlighted-region; highlighted-weekends; interaction; linear-regression
Other Examples: | highlighted-region; interaction; linear-regression; linear-regression-fractions; underlay-callback

unhighlightCallback #

When set, this callback gets called every time the user stops highlighting any point by mousing out of the graph.

Type: function(event)

event: | the mouse event

Default: null

Gallery Samples: | callbacks
Other Examples: | callback

zoomCallback #

A function to call when the zoom window is changed (either by zooming in or out). When animatedZooms is set, zoomCallback is called once at the end of the transition (it will not be called for intermediate frames).

Type: function(minDate, maxDate, yRanges)

minDate: | milliseconds since epoch
maxDate: | milliseconds since epoch.
yRanges: | is an array of [bottom, top] pairs, one for each y-axis.

Default: null

Gallery Samples: | callbacks
Other Examples: | callback; zoom

### Chart labels

axisLabelWidth #

Width (in pixels) of the containing divs for x- and y-axis labels. For the y-axis, this also controls the width of the y-axis. Note that for the x-axis, this is independent from pixelsPerLabel, which controls the spacing between labels.

Type: integer
Default: 50 (y-axis), 60 (x-axis)

Gallery Samples: | two-axes
Other Examples: | customLabel; customLabelCss3; multi-scale; two-axes; two-axes-vr; value-axis-formatters; x-axis-formatter

title #

Text to display above the chart. You can supply any HTML for this value, not just text. If you wish to style it using CSS, use the “dygraph-label” or “dygraph-title” classes.

Type: string
Default: null

Gallery Samples: | border; demo; gallery; range-selector; styled-chart-labels; temperature-sf-ny
Other Examples: | border; demo; label_v; legend-formatter; multi-scale; old-yrange-behavior; plotters; plugins; range-selector; resizable; rtl; styled-chart-labels; temperature-sf-ny

titleHeight #

Height of the chart title, in pixels. This also controls the default font size of the title. If you style the title on your own, this controls how much space is set aside above the chart for the title’s div.

Type: integer
Default: 18

Gallery Samples: | styled-chart-labels
Other Examples: | styled-chart-labels

xLabelHeight #

Height of the x-axis label, in pixels. This also controls the default font size of the x-axis label. If you style the label on your own, this controls how much space is set aside below the chart for the x-axis label’s div.

Type: integer
Default: 18

Gallery Samples: | NONE
Other Examples: | NONE

xlabel #

Text to display below the chart’s x-axis. You can supply any HTML for this value, not just text. If you wish to style it using CSS, use the “dygraph-label” or “dygraph-xlabel” classes.

Type: string
Default: null

Gallery Samples: | border; demo; styled-chart-labels
Other Examples: | border; demo; legend-formatter; multi-scale; plugins; rtl; styled-chart-labels

y2label #

Text to display to the right of the chart’s secondary y-axis. This label is only displayed if a secondary y-axis is present. See this test for an example of how to do this. The comments for the “ylabel” option generally apply here as well. This label gets a “dygraph-y2label” instead of a “dygraph-ylabel” class.

Type: string
Default: null

Gallery Samples: | two-axes
Other Examples: | two-axes; two-axes-vr

yLabelWidth #

Width of the div which contains the y-axis label. Since the y-axis label appears rotated 90 degrees, this actually affects the height of its div.

Type: integer
Default: 18

Gallery Samples: | NONE
Other Examples: | NONE

ylabel #

Text to display to the left of the chart’s y-axis. You can supply any HTML for this value, not just text. If you wish to style it using CSS, use the “dygraph-label” or “dygraph-ylabel” classes. The text will be rotated 90 degrees by default, so CSS rules may behave in unintuitive ways. No additional space is set aside for a y-axis label. If you need more space, increase the width of the y-axis tick labels using the per-axis `axisLabelWidth` option on the y axis. If you need a wider div for the y-axis label, either style it that way with CSS (but remember that it’s rotated, so width is controlled by the “height” property) or set the yLabelWidth option.

Type: string
Default: null

Gallery Samples: | border; demo; range-selector; styled-chart-labels; temperature-sf-ny; two-axes
Other Examples: | border; demo; legend-formatter; multi-scale; plugins; range-selector; resizable; rtl; styled-chart-labels; temperature-sf-ny; two-axes; two-axes-vr

### Configuration

axes #

Defines per-axis options. Valid keys are 'x', 'y' and 'y2'. Only some options may be set on a per-axis basis. If an option may be set in this way, it will be noted on this page. See also documentation on per-series and per-axis options.

Type: Object
Default: null

Gallery Samples: | drawing; two-axes
Other Examples: | customLabel; customLabelCss3; drawing; grid_dot; hairlines; label_v; labelsKMB; logscale; multi-scale; plotters; range-selector; spacing; two-axes; two-axes-vr; unboxed-spark; value-axis-formatters; x-axis-formatter

plugins #

Defines per-graph plugins. Useful for per-graph customization

Type: Array of plugins
Default: []

Gallery Samples: | NONE
Other Examples: | crosshair; hairlines; old-yrange-behavior; plugins; straw-broom

### Data

dataHandler #

Custom DataHandler. This is an advanced customisation. See `docs/datahandler-proposal.pdf`.

Type: Dygraph.DataHandler
Default: (depends on data)

Gallery Samples: | NONE
Other Examples: | NONE

file #

Sets the data being displayed in the chart. This can only be set when calling updateOptions; it cannot be set from the constructor. For a full description of valid data formats, see the Data Formats page.

Type: string (URL of CSV or CSV), GViz DataTable or 2D Array
Default: (set when constructed)

Gallery Samples: | drawing
Other Examples: | drawing; dygraph-many-points-benchmark; hairlines

### Data Line display

connectSeparatedPoints #

Usually, when Dygraphs encounters a missing value in a data series, it interprets this as a gap and draws it as such. If, instead, the missing values represents an x-value for which only a different series has data, then you’ll want to connect the dots by setting this to true. To explicitly include a gap with this option set, use a value of NaN.

Type: boolean
Default: false

Gallery Samples: | independent-series
Other Examples: | connect-separated; independent-series; missing-data

drawGapEdgePoints #

Draw points at the edges of gaps in the data. This improves visibility of small data segments or other data irregularities.

Type: boolean
Default: false

Gallery Samples: | NONE
Other Examples: | isolated-points

drawHighlightPointCallback #

Draw a custom item when a point is highlighted. Default is a small dot matching the series color. This method should constrain drawing to within pointSize pixels from (cx, cy) Also see drawPointCallback

Type: function(g, seriesName, canvasContext, cx, cy, color, pointSize, idx)

g: | the reference graph
seriesName: | the name of the series
canvasContext: | the canvas to draw on
cx: | center x coordinate
cy: | center y coordinate
color: | series color
pointSize: | the radius of the image.
idx: | the row-index of the point in the data.

Default: null

Gallery Samples: | NONE
Other Examples: | custom-circles

drawPointCallback #

Draw a custom item when drawPoints is enabled. Default is a small dot matching the series color. This method should constrain drawing to within pointSize pixels from (cx, cy). Also see drawHighlightPointCallback

Type: function(g, seriesName, canvasContext, cx, cy, color, pointSize, idx)

g: | the reference graph
seriesName: | the name of the series
canvasContext: | the canvas to draw on
cx: | center x coordinate
cy: | center y coordinate
color: | series color
pointSize: | the radius of the image.
idx: | the row-index of the point in the data.

Default: null

Gallery Samples: | NONE
Other Examples: | custom-circles

drawPoints #

Draw a small dot at each point, in addition to a line going through the point. This makes the individual data points easier to see, but can increase visual clutter in the chart. The small dot can be replaced with a custom rendering by supplying a drawPointCallback.

Type: boolean
Default: false

Gallery Samples: | dynamic-update; independent-series; interaction; linear-regression; per-series
Other Examples: | custom-circles; draw-points; dynamic-update; independent-series; interaction; linear-regression; linear-regression-addseries; linear-regression-fractions; per-series; smooth-plots

fillGraph #

Should the area underneath the graph be filled? This option is not compatible with `customBars` nor `errorBars`. This may be set on a per-series basis.

Type: boolean
Default: false

Gallery Samples: | two-axes
Other Examples: | charting-combinations; fillGraph; fillGraph-alpha; range-selector; steps; two-axes

plotter #

A function (or array of functions) which plot each data series on the chart. TODO(danvk): more details! May be set per-series.

Type: array or function
Default: [DygraphCanvasRenderer.Plotters.fillPlotter, DygraphCanvasRenderer.Plotters.errorPlotter, DygraphCanvasRenderer.Plotters.linePlotter]

Gallery Samples: | NONE
Other Examples: | plotters; smooth-plots

pointSize #

The size of the dot to draw on each point in pixels (see drawPoints). A dot is always drawn when a point is "isolated", i.e. there is a missing point on either side of it. This also controls the size of those dots.

Type: integer
Default: 1

Gallery Samples: | per-series
Other Examples: | custom-circles; independent-series; isolated-points; linear-regression-fractions; per-series; smooth-plots

stackedGraph #

If set, stack series on top of one another rather than drawing them independently. The first series specified in the input data will wind up on top of the chart and the last will be on bottom. NaN values are drawn as white areas without a line on top, see stackedGraphNaNFill for details.

Type: boolean
Default: false

Gallery Samples: | highlighted-series
Other Examples: | range-selector; series-highlight; stacked; steps

stackedGraphNaNFill #

Controls handling of NaN values inside a stacked graph. NaN values are interpolated/extended for stacking purposes, but the actual point value remains NaN in the legend display. Valid option values are "all" (interpolate internally, repeat leftmost and rightmost value as needed), "inside" (interpolate internally only, use zero outside leftmost and rightmost value), and "none" (treat NaN as zero everywhere).

Type: string
Default: all

Gallery Samples: | NONE
Other Examples: | NONE

stepPlot #

When set, display the graph as a step plot instead of a line plot. This option may either be set for the whole graph or for single series.

Type: boolean
Default: false

Gallery Samples: | NONE
Other Examples: | charting-combinations; range-selector; steps

strokeBorderColor #

Color for the line border used if strokeBorderWidth is set.

Type: string
Default: white

Gallery Samples: | NONE
Other Examples: | NONE

strokeBorderWidth #

Draw a border around graph lines to make crossing lines more easily distinguishable. Useful for graphs with many lines.

Type: float
Default: null

Gallery Samples: | highlighted-series
Other Examples: | custom-circles; series-highlight

strokePattern #

A custom pattern array where the even index is a draw and odd is a space in pixels. If null then it draws a solid line. The array should have a even length as any odd lengthed array could be expressed as a smaller even length array. This is used to create dashed lines.

Type: Array of integers
Default: null

Gallery Samples: | NONE
Other Examples: | charting-combinations; per-series; plotters

strokeWidth #

The width of the lines connecting data points. This can be used to increase the contrast or some graphs.

Type: float
Default: 1.0

Gallery Samples: | drawing; highlighted-series; linear-regression; per-series; styled-chart-labels
Other Examples: | custom-circles; drawing; grid_dot; layout-options; legend-formatter; linear-regression; linear-regression-addseries; linear-regression-fractions; per-series; plotters; series-highlight; smooth-plots; styled-chart-labels; unboxed-spark

visibility #

Which series should initially be visible? Once the Dygraph has been constructed, you can access and modify the visibility of each series using the `visibility` and `setVisibility` methods.

Type: Array of booleans
Default: [true, true, ...]

Gallery Samples: | color-visibility
Other Examples: | color-visibility; no-visibility; visibility

### Data Series Colors

color #

A per-series color definition. Used in conjunction with, and overrides, the colors option.

Type: string
Default: (see description)

Gallery Samples: | linear-regression; link-interaction; range-selector
Other Examples: | customLabel; customLabelCss3; independent-series; legend-values; link-interaction; range-selector; smooth-plots

colorSaturation #

If colors is not specified, saturation of the automatically-generated data series colors.

Type: float (0.0 - 1.0)
Default: 1.0

Gallery Samples: | NONE
Other Examples: | NONE

colorValue #

If colors is not specified, value of the data series colors, as in hue/saturation/value. (0.0-1.0, default 0.5)

Type: float (0.0 - 1.0)
Default: 1.0

Gallery Samples: | range-selector
Other Examples: | range-selector

colors #

List of colors for the data series. These can be of the form "#AABBCC" or "rgb(255,100,200)" or "yellow", etc. If not specified, equally-spaced points around a color wheel are used. Overridden by the “color” option.

Type: Array of strings
Default: (see description)

Gallery Samples: | color-cycle; color-visibility; demo
Other Examples: | century-scale; color-cycle; color-visibility; demo; legend-formatter; plugins; reverse-y-axis; rtl

fillAlpha #

Custom or sigma-based high/low bands for each series are drawn in the same colour as the series, but with partial transparency. This sets the transparency. A value of 0.0 means that the bands will not be drawn, whereas a value of 1.0 means that the bands will be as dark as the line for the series itself. This can be used to produce chart lines whose thickness varies at each point.

Type: float (0.0 - 1.0)
Default: 0.15

Gallery Samples: | range-selector
Other Examples: | fillGraph-alpha; range-selector

### Debugging

timingName #

Set this option to log timing information. The value of the option will be logged along with the timimg, so that you can distinguish multiple dygraphs on the same page.

Type: string
Default: null

Gallery Samples: | NONE
Other Examples: | dygraph-many-points-benchmark

### Deprecated

timingName #

Set this option to log timing information. The value of the option will be logged along with the timimg, so that you can distinguish multiple dygraphs on the same page.

Type: string
Default: null

Gallery Samples: | NONE
Other Examples: | dygraph-many-points-benchmark

### Error Bars

These are actually high/low bands, not error bars; the misnomer is historic.

customBars #

When set, parse each CSV cell as "low;middle;high". Custom high/low bands will be drawn for each point between low and high, with the series itself going through middle.

Type: boolean
Default: false

Gallery Samples: | range-selector; stock; temperature-sf-ny
Other Examples: | custom-bars; missing-data; range-selector; resizable; steps; stock; temperature-sf-ny; zero-series

errorBars #

Does the data contain standard deviations? Setting this to true alters the input format (see above).

Type: boolean
Default: false

Gallery Samples: | callbacks; interaction; link-interaction; resizable; resize; synchronize
Other Examples: | callback; charting-combinations; crosshair; custom-bars; customLabel; customLabelCss3; draw-points; fractions; grid_dot; interaction; legend-values; linear-regression-fractions; link-interaction; missing-data; no-visibility; numeric-gviz⚠; old-yrange-behavior; perf; plotters; resize; steps; synchronize; underlay-callback; visibility; zoom

fillAlpha #

Custom or sigma-based high/low bands for each series are drawn in the same colour as the series, but with partial transparency. This sets the transparency. A value of 0.0 means that the bands will not be drawn, whereas a value of 1.0 means that the bands will be as dark as the line for the series itself. This can be used to produce chart lines whose thickness varies at each point.

Type: float (0.0 - 1.0)
Default: 0.15

Gallery Samples: | range-selector
Other Examples: | fillGraph-alpha; range-selector

fractions #

When set, attempt to parse each cell in the CSV file as "a/b", where a and b are integers. The ratio will be plotted. This allows computation of Wilson confidence intervals (see below).

Type: boolean
Default: false

Gallery Samples: | NONE
Other Examples: | fractions; linear-regression-fractions

rollPeriod #

Number of days over which to average data. Discussed extensively above.

Type: integer >= 1
Default: 1

Gallery Samples: | annotations; callbacks; link-interaction; range-selector; resizable; resize; styled-chart-labels; synchronize; temperature-sf-ny
Other Examples: | annotation; callback; century-scale; crosshair; customLabel; customLabelCss3; draw-points; dygraph-many-points-benchmark; grid_dot; legend-values; link-interaction; missing-data; no-visibility; perf; range-selector; resizable; resize; reverse-y-axis; spacing; styled-chart-labels; synchronize; temperature-sf-ny; unboxed-spark; underlay-callback; visibility

sigma #

When errorBars is set, shade this many standard deviations above/below each point.

Type: float
Default: 2.0

Gallery Samples: | NONE
Other Examples: | NONE

wilsonInterval #

Use in conjunction with the "fractions" option. Instead of plotting +/- N standard deviations, dygraphs will compute a Wilson confidence interval and plot that. This has more reasonable behavior for ratios close to 0 or 1.

Type: boolean
Default: true

Gallery Samples: | NONE
Other Examples: | NONE

### Grid

drawGrid #

Whether to display gridlines in the chart. This may be set on a per-axis basis to define the visibility of each axis’ grid separately.

Type: boolean
Default: true for x and y, false for y2

Gallery Samples: | drawing
Other Examples: | drawing; grid_dot; plotters; two-axes; unboxed-spark

gridLineColor #

The color of the gridlines. This may be set on a per-axis basis to define each axis’ grid separately.

Type: red, blue
Default: rgb(128,128,128)

Gallery Samples: | drawing
Other Examples: | drawing; grid_dot; smooth-plots

gridLinePattern #

A custom pattern array where the even index is a draw and odd is a space in pixels. If null then it draws a solid line. The array should have a even length as any odd lengthed array could be expressed as a smaller even length array. This is used to create dashed gridlines.

Type: Array of integers
Default: null

Gallery Samples: | NONE
Other Examples: | grid_dot; two-axes

gridLineWidth #

Thickness (in pixels) of the gridlines drawn under the chart. The vertical/horizontal gridlines can be turned off entirely by using the drawGrid option. This may be set on a per-axis basis to define each axis’ grid separately.

Type: float
Default: 0.3

Gallery Samples: | NONE
Other Examples: | grid_dot

independentTicks #

Only valid for y and y2, has no effect on x: This option defines whether the y axes should align their ticks or if they should be independent. Possible combinations: [1.] y=true, y2=false (default): y is the primary axis and the y2 ticks are aligned to the the ones of y. (only 1 grid) [2.] y=false, y2=true: y2 is the primary axis and the y ticks are aligned to the the ones of y2. (only 1 grid) [3.] y=true, y2=true: Both axis are independent and have their own ticks. (2 grids) [4.] y=false, y2=false: Invalid configuration causes an error.

Type: boolean
Default: true for y, false for y2

Gallery Samples: | NONE
Other Examples: | grid_dot; two-axes

pixelsPerLabel #

Number of pixels to require between each x- and y-label. Larger values will yield a sparser axis with fewer ticks. This is set on a per-axis basis.

Type: integer
Default: 70 (x-axis) or 30 (y-axes)

Gallery Samples: | NONE
Other Examples: | hairlines; spacing; value-axis-formatters

### Interactive Elements

animatedZooms #

Set this option to animate the transition between zoom windows. Applies to programmatic and interactive zooms. Note that if you also set a drawCallback, it will be called several times on each zoom. If you set a zoomCallback, it will only be called after the animation is complete.

Type: boolean
Default: false

Gallery Samples: | highlighted-region; link-interaction
Other Examples: | dense-fill; highlighted-region; label_v; link-interaction; old-yrange-behavior; plotters

hideOverlayOnMouseOut #

Whether to hide the legend when the mouse leaves the chart area.

Type: boolean
Default: true

Gallery Samples: | NONE
Other Examples: | gviz-selection⚠

highlightCircleSize #

The size in pixels of the dot drawn over highlighted points.

Type: integer
Default: 3

Gallery Samples: | highlighted-series; per-series
Other Examples: | custom-circles; dygraph-many-points-benchmark; grid_dot; independent-series; per-series; series-highlight; unboxed-spark

highlightSeriesBackgroundAlpha #

Fade the background while highlighting series. 1=fully visible background (disable fading), 0=hiddden background (show highlighted series only).

Type: float
Default: 0.5

Gallery Samples: | NONE
Other Examples: | NONE

highlightSeriesBackgroundColor #

Sets the background color used to fade out the series in conjunction with “highlightSeriesBackgroundAlpha”.

Type: string
Default: rgb(255, 255, 255)

Gallery Samples: | NONE
Other Examples: | NONE

highlightSeriesOpts #

When set, the options from this object are applied to the timeseries closest to the mouse pointer for interactive highlighting. See also “highlightCallback”. Example: highlightSeriesOpts: { strokeWidth: 3 }.

Type: Object
Default: null

Gallery Samples: | highlighted-series
Other Examples: | custom-circles; legend-formatter; series-highlight

interactionModel #

TODO(konigsberg): document this

Type: Object
Default: ...

Gallery Samples: | drawing; interaction
Other Examples: | drawing; interaction

panEdgeFraction #

A value representing the farthest a graph may be panned, in percent of the display. For example, a value of 0.1 means that the graph can only be panned 10% passed the edges of the displayed values. null means no bounds.

Type: float
Default: null

Gallery Samples: | NONE
Other Examples: | zoom

pointClickCallback #

A function to call when a data point is clicked. and the point that was clicked.

Type: function(e, point)

e: | the event object for the click
point: | the point that was clicked See Point properties for details

Default: null

Gallery Samples: | annotations; callbacks
Other Examples: | annotation; callback

showLabelsOnHighlight #

Whether to show the legend upon mouseover.

Type: boolean
Default: true

Gallery Samples: | callbacks
Other Examples: | callback

showRoller #

If the rolling average period text box should be shown.

Type: boolean
Default: false

Gallery Samples: | annotations; callbacks; dynamic-update; range-selector; temperature-sf-ny
Other Examples: | annotation; callback; crosshair; dynamic-update; fractions; isolated-points; missing-data; numeric-gviz⚠; range-selector; resizable; steps; temperature-sf-ny; underlay-callback

### Legend

hideOverlayOnMouseOut #

Whether to hide the legend when the mouse leaves the chart area.

Type: boolean
Default: true

Gallery Samples: | NONE
Other Examples: | gviz-selection⚠

labels #

A distinct name for each data series, including the independent (X) series. For CSV files and DataTable objects, this is determined by context. For raw data, this must be specified. If it is not, default values are supplied and a warning is logged. Make sure no two names are the same!

Type: Array of strings
Default: ["X", "Y1", "Y2", ...]*

Gallery Samples: | annotations-native; drawing; dygraph-simple; dynamic-update; highlighted-region; highlighted-series; highlighted-weekends; independent-series; linear-regression; link-interaction; negative; two-axes

Other Examples:

annotation-native; connect-separated; custom-bars; dateWindow; daylight-savings; dense-fill; drawing; dygraph; dygraph-many-points-benchmark; dynamic-update; grid_dot; hairlines; highlighted-region; independent-series; isolated-points; label-div; label_v; labelsDateMilliseconds; labelsDateUTC; labelsKMB; linear-regression; linear-regression-addseries; link-interaction; missing-data; multi-scale; native-format; negative; perf; plotter; plotters; range-selector; series-highlight; small-range-zero; smooth-plots; steps; two-axes; two-axes-vr; value-axis-formatters

labelsDiv #

Show data labels in an external div, rather than on the graph. This value can either be a div element or a div id.

Type: DOM element or string
Default: null

Gallery Samples: | demo
Other Examples: | century-scale; demo; hairlines; label-div; legend-formatter; plugins; reverse-y-axis; rtl; unboxed-spark

labelsSeparateLines #

Put `<br/>` between lines in the label string. Often used in conjunction with labelsDiv.

Type: boolean
Default: false

Gallery Samples: | demo
Other Examples: | century-scale; customLabel; customLabelCss3; demo; hairlines; legend-values; plugins; reverse-y-axis; rtl

labelsShowZeroValues #

Show zero value labels in the labelsDiv.

Type: boolean
Default: true

Gallery Samples: | NONE
Other Examples: | label-div

legend #

When to display the legend. By default, it only appears when a user mouses over the chart. Set it to "always" to always display a legend of some sort, "never" to hide it. When set to "follow", legend follows highlighted points.

Type: string
Default: onmouseover

Gallery Samples: | demo; range-selector; styled-chart-labels; temperature-sf-ny
Other Examples: | css-positioning; demo; hairlines; label_v; legend-formatter; legend-values; multi-scale; old-yrange-behavior; per-series; plotters; plugins; range-selector; rtl; smooth-plots; styled-chart-labels; temperature-sf-ny; unboxed-spark

legendFollowOffsetX #

Number of pixels to use as horizontal offset from the point for a “floating” legend ("follow" mode). This should be positive (to the right) because the legend flips over to the left side if it’s too wide.

Type: integer
Default: 50

Gallery Samples: | NONE
Other Examples: | NONE

legendFollowOffsetY #

Number of pixels to use as vertical offset from the point for a “floating” legend ("follow" mode).

Type: integer
Default: -50

Gallery Samples: | NONE
Other Examples: | NONE

legendFormatter #

Set this to supply a custom formatter for the legend. See `docs/legend-formatter.md` (online) and the legendFormatter demo for usage.

Type: function(data): string or DocumentFragment node
Default: null

Gallery Samples: | NONE
Other Examples: | legend-formatter

showLabelsOnHighlight #

Whether to show the legend upon mouseover.

Type: boolean
Default: true

Gallery Samples: | callbacks
Other Examples: | callback

valueFormatter #

Function to provide a custom display format for the values displayed on mouseover. This does not affect the values that appear on tick marks next to the axes. To format those, see axisLabelFormatter. This is usually set on a per-axis basis. .

Type: function(num_or_millis, opts, seriesName, dygraph, row, col)

num_or_millis: | The value to be formatted. This is always a number. For date axes, it’s millis since epoch. You can call new Date(millis) to get a Date object.
opts: | This is a function you can call to access various options (e.g. opts('labelsKMB')). It returns per-axis values for the option when available.
seriesName: | The name of the series from which the point came, e.g. 'X', 'Y', 'A', etc.
dygraph: | The dygraph object for which the formatting is being done
row: | The row of the data from which this point comes. g.getValue(row, 0) will return the x-value for this point.
col: | The column of the data from which this point comes. g.getValue(row, col) will return the original y-value for this point. This can be used to get the full confidence interval for the point, or access un-rolled values for the point.

Default: Depends on the type of your data.

Gallery Samples: | NONE
Other Examples: | hairlines; labelsKMB; multi-scale; value-axis-formatters

### Overall display

animateBackgroundFade #

Activate an animation effect for a gradual fade.

Type: boolean
Default: true

Gallery Samples: | NONE
Other Examples: | NONE

height #

Height, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored.

Type: integer
Default: 320

Gallery Samples: | annotations; annotations-gviz; border; callbacks; color-cycle; color-visibility; demo; drawing; dynamic-update; highlighted-region; highlighted-series; highlighted-weekends; independent-series; interaction; linear-regression; link-interaction; negative; no-range; plotter; range-selector; stock; styled-chart-labels; synchronize; temperature-sf-ny; two-axes
Other Examples: | annotation; century-scale; charting-combinations; color-cycle; color-visibility; demo; dense-fill; drawing; hairlines; iframe; legend-formatter; link-interaction; multi-scale; no-range; plotters; plugins; reverse-y-axis; rtl; series-highlight; small-range-zero; smooth-plots; straw-broom; styled-chart-labels; synchronize; value-axis-formatters

pixelRatio #

Overrides the pixel ratio scaling factor for the canvas’ 2d context. Ordinarily, this is set to the devicePixelRatio / (context.backingStoreRatio || 1), so on mobile devices, where the devicePixelRatio can be somewhere around 3, performance can be improved by overriding this value to something less precise, like 1, at the expense of resolution.

Type: float
Default: (devicePixelRatio / context.backingStoreRatio)

Gallery Samples: | NONE
Other Examples: | NONE

resizable #

Whether to add a ResizeObserver to the container div ("passive") and additionally make it resizable ("horizontal", "vertical", "both"). In any case, if the container div has CSS "overflow:visible;" it will be changed to "overflow:hidden;" to make CSS resizing possible. Note that this is distinct from resizing the graph when the window size changes, which is always active; this feature adds user-resizable “handles” to the container div.

Type: string
Default: no

Gallery Samples: | resizable
Other Examples: | resizable; resize

rightGap #

Number of pixels to leave blank at the right edge of the Dygraph. This makes it easier to highlight the right-most data point.

Type: integer
Default: 5

Gallery Samples: | NONE
Other Examples: | NONE

width #

Width, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored.

Type: integer
Default: 480

Gallery Samples: | annotations; annotations-gviz; border; callbacks; color-cycle; color-visibility; demo; drawing; dynamic-update; highlighted-region; highlighted-series; highlighted-weekends; independent-series; interaction; linear-regression; link-interaction; negative; no-range; plotter; range-selector; stock; styled-chart-labels; synchronize; temperature-sf-ny; two-axes

Other Examples:

annotation; century-scale; charting-combinations; color-cycle; color-visibility; customLabel; customLabelCss3; daylight-savings; demo; dense-fill; drawing; hairlines; iframe; independent-series; legend-formatter; legend-values; linear-regression; linear-regression-addseries; linear-regression-fractions; link-interaction; multi-scale; no-range; plotters; plugins; reverse-y-axis; rtl; series-highlight; small-range-zero; smooth-plots; straw-broom; styled-chart-labels; synchronize; value-axis-formatters

### Range Selector

rangeSelectorAlpha #

The transparency of the veil that is drawn over the unselected portions of the range selector mini plot. A value of 0 represents full transparency and the unselected portions of the mini plot will appear as normal. A value of 1 represents full opacity and the unselected portions of the mini plot will be hidden.

Type: float (0.0 - 1.0)
Default: 0.6

Gallery Samples: | NONE
Other Examples: | range-selector

rangeSelectorBackgroundLineWidth #

The width of the lines below and on both sides of the range selector mini plot.

Type: float
Default: 1

Gallery Samples: | NONE
Other Examples: | range-selector

rangeSelectorBackgroundStrokeColor #

The color of the lines below and on both sides of the range selector mini plot. This can be of the form "#AABBCC" or "rgb(255,100,200)" or "yellow".

Type: string
Default: gray

Gallery Samples: | NONE
Other Examples: | range-selector

rangeSelectorForegroundLineWidth #

The width the lines in the interactive layer of the range selector.

Type: float
Default: 1

Gallery Samples: | NONE
Other Examples: | range-selector

rangeSelectorForegroundStrokeColor #

The color of the lines in the interactive layer of the range selector. This can be of the form "#AABBCC" or "rgb(255,100,200)" or "yellow".

Type: string
Default: black

Gallery Samples: | NONE
Other Examples: | range-selector

rangeSelectorHeight #

Height, in pixels, of the range selector widget. This option can only be specified at Dygraph creation time.

Type: integer
Default: 40

Gallery Samples: | range-selector
Other Examples: | range-selector

rangeSelectorPlotFillColor #

The range selector mini plot fill color. This can be of the form "#AABBCC" or "rgb(255,100,200)" or "yellow". You can also specify null or "" to turn off fill.

Type: string
Default: #A7B1C4

Gallery Samples: | range-selector
Other Examples: | range-selector

rangeSelectorPlotFillGradientColor #

The top color for the range selector mini plot fill color gradient. This can be of the form "#AABBCC" or "rgb(255,100,200)" or "rgba(255,100,200,42)" or "yellow". You can also specify null or "" to disable the gradient and fill with one single color.

Type: string
Default: white

Gallery Samples: | range-selector
Other Examples: | range-selector

rangeSelectorPlotLineWidth #

The width of the range selector mini plot line.

Type: float
Default: 1.5

Gallery Samples: | NONE
Other Examples: | range-selector

rangeSelectorPlotStrokeColor #

The range selector mini plot stroke color. This can be of the form "#AABBCC" or "rgb(255,100,200)" or "yellow". You can also specify null or "" to turn off stroke.

Type: string
Default: #808FAB

Gallery Samples: | range-selector
Other Examples: | range-selector

rangeSelectorVeilColour #

The fillStyle for the veil of the range selector (e.g. "rgba(240, 240, 240, 0.6)"); if set, the rangeSelectorAlpha option is ignored.

Type: string
Default: null

Gallery Samples: | NONE
Other Examples: | range-selector

showInRangeSelector #

Mark this series for inclusion in the range selector. The mini plot curve will be an average of all such series. If this is not specified for any series, the default behavior is to average all the visible series. Setting it for one series will result in that series being charted alone in the range selector. Once it’s set for a single series, it needs to be set for all series which should be included (regardless of visibility).

Type: boolean
Default: null

Gallery Samples: | NONE
Other Examples: | range-selector

showRangeSelector #

Show or hide the range selector widget.

Type: boolean
Default: false

Gallery Samples: | range-selector
Other Examples: | iframe; range-selector

### Rolling Averages

rollPeriod #

Number of days over which to average data. Discussed extensively above.

Type: integer >= 1
Default: 1

Gallery Samples: | annotations; callbacks; link-interaction; range-selector; resizable; resize; styled-chart-labels; synchronize; temperature-sf-ny
Other Examples: | annotation; callback; century-scale; crosshair; customLabel; customLabelCss3; draw-points; dygraph-many-points-benchmark; grid_dot; legend-values; link-interaction; missing-data; no-visibility; perf; range-selector; resizable; resize; reverse-y-axis; spacing; styled-chart-labels; synchronize; temperature-sf-ny; unboxed-spark; underlay-callback; visibility

showRoller #

If the rolling average period text box should be shown.

Type: boolean
Default: false

Gallery Samples: | annotations; callbacks; dynamic-update; range-selector; temperature-sf-ny
Other Examples: | annotation; callback; crosshair; dynamic-update; fractions; isolated-points; missing-data; numeric-gviz⚠; range-selector; resizable; steps; temperature-sf-ny; underlay-callback

### Series

series #

Defines per-series options. Its keys match the y-axis label names, and the values are dictionaries themselves that contain options specific to that series.

Type: Object
Default: null

Gallery Samples: | annotations; annotations-native; independent-series; per-series
Other Examples: | annotation; annotation-native; connect-separated; custom-circles; dygraph-many-points-benchmark; fillGraph; fillGraph-alpha; grid_dot; hairlines; isolated-points; per-series; plotters; range-selector; smooth-plots; steps; two-axes; two-axes-vr; value-axis-formatters

### Value display/formatting

digitsAfterDecimal #

Unless it’s run in scientific mode (see the `sigFigs` option), dygraphs displays numbers with `digitsAfterDecimal` digits after the decimal point. Trailing zeros are not displayed, so with a value of 2 you’ll get '0', '0.1', '0.12', '123.45' but not '123.456' (it will be rounded to '123.46'). Numbers with absolute value less than 0.1^digitsAfterDecimal (i.e. those which would show up as '0.00') will be displayed in scientific notation.

Type: integer
Default: 2

Gallery Samples: | NONE
Other Examples: | NONE

labelsKMB #

Show k/M/B for thousands/millions/billions on y-axis.

Type: boolean
Default: false

Gallery Samples: | annotations-gviz; demo; no-range; two-axes
Other Examples: | annotation-gviz⚠; century-scale; css-positioning; demo; grid_dot; labelsKMB; legend-formatter; no-range; plugins; reverse-y-axis; rtl; two-axes; two-axes-vr

labelsKMG2 #

Show Ki/Mi/Gi for powers of 1024 on y-axis. If used together with `labelsKMB` (deprecated), K/M/G are used instead.

Type: boolean
Default: false

Gallery Samples: | NONE
Other Examples: | labelsKMB

labelsUTC #

Show date/time labels according to UTC (instead of local time).

Type: boolean
Default: false

Gallery Samples: | NONE
Other Examples: | drawing; labelsDateUTC

maxNumberWidth #

When displaying numbers in normal (not scientific) mode, large numbers will be displayed with many trailing zeros (e.g. 100000000 instead of 1e9). This can lead to unwieldy y-axis labels. If there are more than `maxNumberWidth` digits to the left of the decimal in a number, dygraphs will switch to scientific notation, even when not operating in scientific mode. If you’d like to see all those digits, set this to something large, like 20 or 30.

Type: integer
Default: 6

Gallery Samples: | NONE
Other Examples: | NONE

sigFigs #

By default, dygraphs displays numbers with a fixed number of digits after the decimal point. If you’d prefer to have a fixed number of significant figures, set this option to that number of sig figs. A value of 2, for instance, would cause 1 to be display as 1.0 and 1234 to be displayed as 1.23e+3.

Type: integer
Default: null

Gallery Samples: | NONE
Other Examples: | NONE

valueFormatter #

Function to provide a custom display format for the values displayed on mouseover. This does not affect the values that appear on tick marks next to the axes. To format those, see axisLabelFormatter. This is usually set on a per-axis basis. .

Type: function(num_or_millis, opts, seriesName, dygraph, row, col)

num_or_millis: | The value to be formatted. This is always a number. For date axes, it’s millis since epoch. You can call new Date(millis) to get a Date object.
opts: | This is a function you can call to access various options (e.g. opts('labelsKMB')). It returns per-axis values for the option when available.
seriesName: | The name of the series from which the point came, e.g. 'X', 'Y', 'A', etc.
dygraph: | The dygraph object for which the formatting is being done
row: | The row of the data from which this point comes. g.getValue(row, 0) will return the x-value for this point.
col: | The column of the data from which this point comes. g.getValue(row, col) will return the original y-value for this point. This can be used to get the full confidence interval for the point, or access un-rolled values for the point.

Default: Depends on the type of your data.

Gallery Samples: | NONE
Other Examples: | hairlines; labelsKMB; multi-scale; value-axis-formatters

### Point Properties

Some callbacks take a point argument. Its properties are:

- xval/yval: The data coordinates of the point (with dates/times as millis since epoch)
- canvasx/canvasy: The canvas coordinates at which the point is drawn.
- name: The name of the data series to which the point belongs
- idx: The row number of the point in the data set