+- name: width
+ type: Integer
+ default: 480
+ desc: Width, in pixels, of the chart. If the container div has been explicitly sized, this will be
+ ignored.
+ category: Overall display
+ tags:
+ - overall display
+ examples:
+ - linear-regression-addseries
+ - annotation
+ - century-scale
+ - color-visibility
+ - daylight-savings
+ - demo
+ - drawing
+ - independent-series
+ - link-interaction
+ - linear-regression-fractions
+ - linear-regression
+ - no-range
+ - small-range-zero
+ - reverse-y-axis
+ - color-cycle
+ - multi-scale
+ - value-axis-formatters
+- name: height
+ type: Integer
+ default: 320
+ desc: Height, in pixels, of the chart. If the container div has been explicitly sized, this will be
+ ignored.
+ category: Overall display
+ tags:
+ - overall display
+ examples:
+ - annotation
+ - century-scale
+ - color-visibility
+ - demo
+ - drawing
+ - link-interaction
+ - no-range
+ - small-range-zero
+ - reverse-y-axis
+ - color-cycle
+ - multi-scale
+ - value-axis-formatters
- name: annotationClickHandler
type: function(annotation, point, dygraph, event)
default: null
\ of zero is disabled. \nThis 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."
- category: Axis display
+ category: Axes
tags:
- - axis display
+ - axes
examples:
- avoidMinZero
- name: axis
- type: String or object
- default: (none)
+ type: String or Object
+ default: null
desc: 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.
- category: Axis display
+ category: Axes
tags:
- - axis display
+ - axes
examples:
- two-axes
- steps
type: String
default: black
desc: Color for x- and y-axis labels. This is a CSS color string.
- category: Axis display
+ category: Axes
tags:
- - axis display
+ - axes
- name: axisLabelFontSize
type: Integer
default: 14
desc: Size of the font (in pixels) to use in the axis labels, both x- and y-axis.
- category: Axis display
+ category: Axes
tags:
- - axis display
+ - axes
- name: axisLabelFormatter
type: function(number or Date, granularity, opts, dygraph)
default: Depends on the data type
(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').
- category: Axis display
+ category: Axes
tags:
- - axis display
+ - axes
examples:
- x-axis-formatter
- y-axis-formatter
default: 50
desc: Width (in pixels) of the containing divs for x- and y-axis labels. For the y-axis, this also
controls
- category: Axis display
+ category: Axes
tags:
- - axis display
+ - axes
+ - labels
- name: axisLineColor
type: String
default: black
desc: 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)'.
- category: Axis display
+ category: Axes
tags:
- - axis display
+ - axes
examples:
- demo
- name: axisLineWidth
type: Float
default: 0.3
desc: Thickness (in pixels) of the x- and y-axis lines.
- category: Axis display
+ category: Axes
tags:
- - axis display
+ - axes
- name: axisTickSize
type: Number
default: '3.0'
desc: The size of the line to display next to each tick mark on x- or y-axes.
- category: Axis display
+ category: Axes
tags:
- - axis display
+ - axes
- name: dateWindow
type: Array of two Dates or numbers
default: Full range of the input is shown
desc: 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.
- category: Axis display
+ category: Axes
tags:
- - axis display
+ - axes
examples:
- dateWindow
- drawing
default: true
desc: Whether to draw the x-axis. Setting this to false also prevents x-axis ticks from being drawn
and reclaims the space for the chart grid/lines.
- category: Axis display
+ category: Axes
tags:
- - axis display
+ - axes
examples:
- unboxed-spark
- name: drawYAxis
default: true
desc: Whether to draw the y-axis. Setting this to false also prevents y-axis ticks from being drawn
and reclaims the space for the chart grid/lines.
- category: Axis display
+ category: Axes
tags:
- - axis display
+ - axes
examples:
- drawing
- unboxed-spark
desc: 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
- category: Axis display
+ category: Axes
tags:
- - axis display
+ - axes
examples:
- no-range
- numeric-gviz
desc: When set for a y-axis, the graph shows that axis in log scale. Any values less than or equal
to zero are not displayed. Not compatible with showZero, and ignores connectSeparatedPoints.
Also, showing log scale with valueRanges that are less than zero will result in an unviewable graph.
- category: Axis display
+ category: Axes
tags:
- - axis display
+ - axes
examples:
- logscale
- stock
desc: 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% pased the edges of the displayed values.
null means no bounds.
- category: Axis display
+ category: Axes
tags:
- - axis display
+ - axes
+ - interactive elements
examples:
- zoom
- name: pixelsPerLabel
default: 60 (x-axis) or 30 (y-axes)
desc: 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.
- category: Axis display
+ category: Axes
tags:
- - axis display
+ - axes
+ - grid
examples:
- value-axis-formatters
- name: ticker
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.
- category: Axis display
+ category: Axes
tags:
- - axis display
+ - axes
- name: valueRange
type: Array of two numbers
default: Full range of the input is shown
desc: 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.
- category: Axis display
+ category: Axes
tags:
- - axis display
+ - axes
examples:
- drawing
- dynamic-update
default: null
desc: Height, in pixels, of the x-axis. If not set explicitly, this is computed based on axisLabelFontSize
and axisTickSize.
- category: Axis display
+ category: Axes
tags:
- - axis display
+ - axes
- name: xAxisLabelWidth
type: Integer
default: 50
desc: Width, in pixels, of the x-axis labels.
- category: Axis display
+ category: Axes
tags:
- - axis display
+ - axes
examples:
- x-axis-formatter
- value-axis-formatters
default: 50
desc: Width, in pixels, of the y-axis labels. This also affects the amount of space available for
a y-axis chart label.
- category: Axis display
+ category: Axes
tags:
- - axis display
+ - axes
examples:
- customLabel
- two-axes
- multi-scale
- two-axes-vr
- value-axis-formatters
-- name: customBars
- type: Boolean
- default: false
- desc: When set, parse each CSV cell as "low;middle;high". Error bars will be drawn for each point
- between low and high, with the series itself going through middle.
- category: CSV parsing
- tags:
- - csv parsing
- examples:
- - custom-bars
- - zero-series
- - stock
- - range-selector
- - temperature-sf-ny
- name: delimiter
type: String
default: ','
category: CSV parsing
tags:
- csv parsing
-- name: errorBars
- type: Boolean
- default: false
- desc: Does the data contain standard deviations? Setting this to true alters the input format (see
- above).
- category: CSV parsing
- tags:
- - csv parsing
- examples:
- - callback
- - crosshair
- - custom-bars
- - customLabel
- - draw-points
- - fillGraph
- - fractions
- - grid_dot
- - interaction
- - is-zoomed-ignore-programmatic-zoom
- - link-interaction
- - linear-regression-fractions
- - missing-data
- - resize
- - no-visibility
- - noise
- - numeric-gviz
- - perf
- - steps
- - synchronize
- - underlay-callback
- - visibility
- - zoom
-- name: fractions
- type: Boolean
- default: false
- desc: 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).
- category: CSV parsing
- tags:
- - csv parsing
- examples:
- - fractions
- - linear-regression-fractions
- name: xValueParser
type: function(str) -> number
default: parseFloat() or Date.parse()*
examples:
- callback
- crosshair
-- name: pointClickCallback
- type: function(e, point)
- default: null
- desc: "A function to call when a data point is clicked. The function should take two arguments, the\
- \ event object for the click, and the point that was clicked. The 'point' argument has these properties:\n\
- \ * xval/yval: The data coordinates of the point (with dates/times as millis since epoch) \n *\
- \ canvasx/canvasy: The canvas coordinates at which the point is drawn. \n name: The name of the\
- \ data series to which the point belongs"
- category: Callbacks
- tags:
- - callbacks
- examples:
- - annotation
- - callback
- name: underlayCallback
type: function(canvas, area, dygraph)
default: null
- callback
- is-zoomed-ignore-programmatic-zoom
- zoom
-- name: axisLabelWidth
- type: Integer
- default: 50
- desc: Width (in pixels) of the containing divs for x- and y-axis labels. For the y-axis, this also
- controls
- category: Chart labels
- tags:
- - chart labels
- name: title
type: String
default: null
category: Data Series Colors
tags:
- data series colors
+ - error bars
- name: timingName
type: String
default: null
between low and high, with the series itself going through middle.
category: Error Bars
tags:
- - error bars
+ - error bar
+ - bars
+ - csv
+ - parsing
examples:
- custom-bars
- zero-series
category: Error Bars
tags:
- error bars
+ - bars
+ - csv parsing
+ - csv
+ - parsing
examples:
- callback
- crosshair
- underlay-callback
- visibility
- zoom
-- name: fillAlpha
- type: Float (0.0 - 1.0)
- default: 0.15
- desc: Error bars (or custom bars) for each series are drawn in the same color as the series, but with
- partial transparency. This sets the transparency. A value of 0.0 means that the error bars will
- not be drawn, whereas a value of 1.0 means that the error bars 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.
- category: Error Bars
- tags:
- - error bars
- name: fractions
type: Boolean
default: false
category: Error Bars
tags:
- error bars
+ - bars
+ - csv parsing
+ - csv
+ - parsing
examples:
- fractions
- linear-regression-fractions
-- name: rollPeriod
- type: Integer >= 1
- default: 1
- desc: Number of days over which to average data. Discussed extensively above.
- category: Error Bars
- tags:
- - error bars
- examples:
- - annotation
- - callback
- - century-scale
- - crosshair
- - customLabel
- - draw-points
- - dygraph-many-points-benchmark
- - grid_dot
- - link-interaction
- - missing-data
- - resize
- - no-visibility
- - noise
- - perf
- - reverse-y-axis
- - unboxed-spark
- - spacing
- - styled-chart-labels
- - synchronize
- - two-series
- - underlay-callback
- - visibility
- - range-selector
- - temperature-sf-ny
- name: sigma
type: Float
default: 2.0
category: Grid
tags:
- grid
-- name: pixelsPerLabel
- type: Integer
- default: 60 (x-axis) or 30 (y-axes)
- desc: 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.
- category: Grid
- tags:
- - grid
- examples:
- - value-axis-formatters
- name: animatedZooms
type: Boolean
default: false
examples:
- highlighted-region
- link-interaction
-- name: hideOverlayOnMouseOut
- type: Boolean
- default: true
- desc: Whether to hide the legend when the mouse leaves the chart area.
- category: Interactive Elements
- tags:
- - interactive elements
- examples:
- - gviz-selection
- name: highlightCircleSize
type: Integer
default: 3
examples:
- drawing
- interaction
-- name: panEdgeFraction
- type: Float
- default: null
- desc: 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% pased the edges of the displayed values.
- null means no bounds.
- category: Interactive Elements
- tags:
- - interactive elements
- examples:
- - zoom
- name: pointClickCallback
type: function(e, point)
default: null
category: Interactive Elements
tags:
- interactive elements
+ - callback
examples:
- annotation
- callback
- interactive elements
examples:
- range-selector
-- name: showLabelsOnHighlight
- type: Boolean
- default: true
- desc: Whether to show the legend upon mouseover.
- category: Interactive Elements
- tags:
- - interactive elements
- examples:
- - callback
- name: showRangeSelector
type: Boolean
default: false
- interactive elements
examples:
- range-selector
-- name: showRoller
- type: Boolean
- default: false
- desc: If the rolling average period text box should be shown.
- category: Interactive Elements
- tags:
- - interactive elements
- examples:
- - annotation
- - callback
- - crosshair
- - dynamic-update
- - fractions
- - isolated-points
- - missing-data
- - numeric-gviz
- - steps
- - underlay-callback
- - range-selector
- - temperature-sf-ny
- name: hideOverlayOnMouseOut
type: Boolean
default: true
category: Legend
tags:
- legend
+ - interactive elements
examples:
- gviz-selection
- name: labels
category: Legend
tags:
- legend
+ - interactive elements
examples:
- callback
-- name: valueFormatter
- type: function(num or millis, opts, dygraph)
- default: Depends on the type of your data.
- desc: 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. For date axes, you can call new Date(millis) to get a
- Date object. opts is a function you can call to access various options (e.g. opts('labelsKMB')).
- category: Legend
- tags:
- - legend
- examples:
- - y-axis-formatter
- - value-axis-formatters
-- name: height
- type: Integer
- default: 320
- desc: Height, in pixels, of the chart. If the container div has been explicitly sized, this will be
- ignored.
- category: Overall display
- tags:
- - overall display
- examples:
- - annotation
- - century-scale
- - color-visibility
- - demo
- - drawing
- - link-interaction
- - no-range
- - small-range-zero
- - reverse-y-axis
- - color-cycle
- - multi-scale
- - value-axis-formatters
- name: rightGap
type: Integer
default: 5
category: Overall display
tags:
- overall display
-- name: width
- type: Integer
- default: 480
- desc: Width, in pixels, of the chart. If the container div has been explicitly sized, this will be
- ignored.
- category: Overall display
- tags:
- - overall display
- examples:
- - linear-regression-addseries
- - annotation
- - century-scale
- - color-visibility
- - daylight-savings
- - demo
- - drawing
- - independent-series
- - link-interaction
- - linear-regression-fractions
- - linear-regression
- - no-range
- - small-range-zero
- - reverse-y-axis
- - color-cycle
- - multi-scale
- - value-axis-formatters
- name: rollPeriod
type: Integer >= 1
default: 1
category: Rolling Averages
tags:
- rolling averages
+ - error bars
examples:
- annotation
- callback
category: Rolling Averages
tags:
- rolling averages
+ - interactive elements
examples:
- annotation
- callback
category: Value display/formatting
tags:
- value display/formatting
+ - legend
examples:
- y-axis-formatter
- value-axis-formatters
-[{"category": "Annotations", "name": "annotationClickHandler", "tags": ["annotations", "handler"], "default": null, "examples": ["annotation"], "type": "function(annotation, point, dygraph, event)", "desc": "If provided, this function is called whenever the user clicks on an annotation."}, {"category": "Annotations", "name": "annotationDblClickHandler", "tags": ["annotations", "handler"], "default": null, "examples": ["annotation"], "type": "function(annotation, point, dygraph, event)", "desc": "If provided, this function is called whenever the user double-clicks on an annotation."}, {"category": "Annotations", "name": "annotationMouseOutHandler", "tags": ["annotations", "handler"], "default": null, "examples": ["annotation"], "type": "function(annotation, point, dygraph, event)", "desc": "If provided, this function is called whenever the user mouses out of an annotation."}, {"category": "Annotations", "name": "annotationMouseOverHandler", "tags": ["annotations", "handler"], "default": null, "examples": ["annotation"], "type": "function(annotation, point, dygraph, event)", "desc": "If provided, this function is called whenever the user mouses over an annotation."}, {"category": "Annotations", "name": "displayAnnotations", "tags": ["annotations"], "default": false, "examples": ["annotation-gviz"], "type": "Boolean", "desc": "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."}, {"category": "Axis display", "name": "avoidMinZero", "tags": ["axis display"], "default": false, "examples": ["avoidMinZero"], "type": "Boolean", "desc": "When set, the heuristic that fixes the Y axis at zero for a data set with the minimum Y value of zero is disabled. \nThis 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."}, {"category": "Axis display", "name": "axis", "tags": ["axis display"], "default": "(none)", "examples": ["two-axes", "steps", "two-axes-vr", "value-axis-formatters"], "type": "String or object", "desc": "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."}, {"category": "Axis display", "name": "axisLabelColor", "tags": ["axis display"], "default": "black", "type": "String", "desc": "Color for x- and y-axis labels. This is a CSS color string."}, {"category": "Axis display", "name": "axisLabelFontSize", "tags": ["axis display"], "default": 14, "type": "Integer", "desc": "Size of the font (in pixels) to use in the axis labels, both x- and y-axis."}, {"category": "Axis display", "name": "axisLabelFormatter", "tags": ["axis display"], "default": "Depends on the data type", "examples": ["x-axis-formatter", "y-axis-formatter", "value-axis-formatters"], "type": "function(number or Date, granularity, opts, dygraph)", "desc": "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')."}, {"category": "Axis display", "name": "axisLabelWidth", "tags": ["axis display"], "default": 50, "type": "Integer", "desc": "Width (in pixels) of the containing divs for x- and y-axis labels. For the y-axis, this also controls"}, {"category": "Axis display", "name": "axisLineColor", "tags": ["axis display"], "default": "black", "examples": ["demo"], "type": "String", "desc": "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)'."}, {"category": "Axis display", "name": "axisLineWidth", "tags": ["axis display"], "default": 0.3, "type": "Float", "desc": "Thickness (in pixels) of the x- and y-axis lines."}, {"category": "Axis display", "name": "axisTickSize", "tags": ["axis display"], "default": "3.0", "type": "Number", "desc": "The size of the line to display next to each tick mark on x- or y-axes."}, {"category": "Axis display", "name": "dateWindow", "tags": ["axis display"], "default": "Full range of the input is shown", "examples": ["dateWindow", "drawing", "is-zoomed-ignore-programmatic-zoom", "link-interaction", "synchronize", "zoom"], "type": "Array of two Dates or numbers", "desc": "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."}, {"category": "Axis display", "name": "drawXAxis", "tags": ["axis display"], "default": true, "examples": ["unboxed-spark"], "type": "Boolean", "desc": "Whether to draw the x-axis. Setting this to false also prevents x-axis ticks from being drawn and reclaims the space for the chart grid/lines."}, {"category": "Axis display", "name": "drawYAxis", "tags": ["axis display"], "default": true, "examples": ["drawing", "unboxed-spark"], "type": "Boolean", "desc": "Whether to draw the y-axis. Setting this to false also prevents y-axis ticks from being drawn and reclaims the space for the chart grid/lines."}, {"category": "Axis display", "name": "includeZero", "tags": ["axis display"], "default": false, "examples": ["no-range", "numeric-gviz", "small-range-zero"], "type": "Boolean", "desc": "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"}, {"category": "Axis display", "name": "logscale", "tags": ["axis display"], "default": false, "examples": ["logscale", "stock"], "type": "Boolean", "desc": "When set for a y-axis, the graph shows that axis in log scale. Any values less than or equal to zero are not displayed. Not compatible with showZero, and ignores connectSeparatedPoints. Also, showing log scale with valueRanges that are less than zero will result in an unviewable graph."}, {"category": "Axis display", "name": "panEdgeFraction", "tags": ["axis display"], "default": null, "examples": ["zoom"], "type": "Float", "desc": "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% pased the edges of the displayed values. null means no bounds."}, {"category": "Axis display", "name": "pixelsPerLabel", "tags": ["axis display"], "default": "60 (x-axis) or 30 (y-axes)", "examples": ["value-axis-formatters"], "type": "Integer", "desc": "Number of pixels&n