-- 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.
+- name: title
tags:
- - overall display
+ - labels
+ - display
+ default: null
+ examples:
+ - border
+ - demo
+ - noise
+ - styled-chart-labels
+ - multi-scale
+ - range-selector
+ - temperature-sf-ny
+ type: String
+ desc: 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.
-- 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.
+- name: xlabel
tags:
- - overall display
+ - labels
+ - display
+ default: null
+ examples:
+ - border
+ - demo
+ - styled-chart-labels
+ - multi-scale
+ type: String
+ desc: 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.
-- name: file
+- name: ylabel
+ tags:
+ - labels
+ - display
+ default: null
+ examples:
+ - border
+ - demo
+ - two-axes
+ - noise
+ - styled-chart-labels
+ - multi-scale
+ - range-selector
+ - temperature-sf-ny
+ - two-axes-vr
type: String
+ desc: 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 yAxisLabelWidth option. 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.
+
+- name: y2label
+ tags:
+ - labels
+ - display
default: null
- desc: 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. String can be a URL of CSV or CSV, GViz DataTable or 2D Array.
+ examples:
+ - two-axes
+ - two-axes-vr
+ type: String
+ desc: 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.
+
+- name: titleHeight
tags:
- - data
+ - labels
+ - display
+ default: 18
examples:
- - drawing
- - dygraph-many-points-benchmark
+ - styled-chart-labels
+ type: Integer
+ desc: 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.
-- name: annotationClickHandler
- type: function(annotation, point, dygraph, event)
- default: null
- desc: If provided, this function is called whenever the user clicks on an annotation.
+- name: xLabelHeight
+ default: 18
tags:
- - annotations
- - handler
+ - labels
+ - display
+ type: Integer
+ desc: 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.
+
+- name: yLabelWidth
+ default: 18
+ tags:
+ - labels
+ - display
+ type: Integer
+ desc: 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.
+
+- name: connectSeparatedPoints
+ tags:
+ - lines
+ - data
+ - display
+ default: false
examples:
- - annotation
+ - connect-separated
+ - independent-series
+ type: Boolean
+ desc: 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.
-- name: annotationDblClickHandler
- type: function(annotation, point, dygraph, event)
- default: null
- desc: If provided, this function is called whenever the user double-clicks on an annotation.
+- name: drawPoints
tags:
- - annotations
- - handler
+ - lines
+ - data
+ - display
+ default: false
examples:
- - annotation
+ - linear-regression-addseries
+ - draw-points
+ - dynamic-update
+ - independent-series
+ - interaction
+ - linear-regression-fractions
+ - linear-regression
+ - per-series
+ type: Boolean
+ desc: 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.
-- name: annotationMouseOutHandler
- type: function(annotation, point, dygraph, event)
- default: null
- desc: If provided, this function is called whenever the user mouses out of an annotation.
+- name: fillGraph
tags:
- - annotations
- - handler
+ - lines
+ - data
+ - display
+ default: false
examples:
- - annotation
+ - fillGraph
+ - two-axes
+ - steps
+ type: Boolean
+ desc: Should the area underneath the graph be filled? This option is not compatible
+ with error bars.
-- name: annotationMouseOverHandler
- type: function(annotation, point, dygraph, event)
- default: null
- desc: If provided, this function is called whenever the user mouses over an annotation.
+- name: pointSize
tags:
- - annotations
- - handler
+ - lines
+ - data
+ - display
+ default: 1
examples:
- - annotation
+ - per-series
+ type: Integer
+ desc: 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.
-- name: displayAnnotations
+- name: stackedGraph
+ tags:
+ - lines
+ - data
+ - display
+ default: false
+ examples:
+ - stacked
type: Boolean
+ desc: If set, stack series on top of one another rather than drawing them independently.
+
+- name: stepPlot
+ tags:
+ - lines
+ - data
+ - display
default: false
- 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.
+ examples:
+ - avoidMinZero
+ - steps
+ - y-axis-formatter
+ type: Boolean
+ desc: When set, display the graph as a step plot instead of a line plot.
+
+- name: strokePattern
tags:
- - annotations
+ - lines
+ - data
+ - display
+ default: null
examples:
- - annotation-gviz
+ - per-series
+ type: Array
+ desc: 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.
+
+- name: strokeWidth
+ tags:
+ - lines
+ - data
+ - display
+ default: 1
+ examples:
+ - linear-regression-addseries
+ - drawing
+ - grid_dot
+ - layout-options
+ - linear-regression-fractions
+ - linear-regression
+ - per-series
+ - unboxed-spark
+ - styled-chart-labels
+ type: Integer
+ desc: The width of the lines connecting data points. This can be used to increase
+ the contrast or some graphs.
+
+- name: colorSaturation
+ default: 1.0
+ tags:
+ - color
+ - data
+ - display
+ type: Float (0.0 - 1.0)
+ desc: If colors is not specified, saturation of the automatically-generated data
+ series colors.
+
+- name: colorValue
+ default: 1.0
+ tags:
+ - color
+ - data
+ - display
+ type: Float (0.0 - 1.0)
+ desc: If colors is not specified, value of the data series colors, as in hue/saturation/value.
+ (0.0-1.0, default 0.5)
+
+- name: colors
+ tags:
+ - color
+ - data
+ - display
+ default: null
+ examples:
+ - century-scale
+ - color-visibility
+ - demo
+ - reverse-y-axis
+ - color-cycle
+ type: Array
+ desc: 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.
- name: avoidMinZero
- type: Boolean
- default: false
- 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."
tags:
- axes
+ 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."
- name: axis
- 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.
tags:
- axes
+ default: null
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.
- name: axisLabelColor
- type: String
default: black
- desc: Color for x- and y-axis labels. This is a CSS color string.
tags:
- axes
+ - color
+ - labels
+ type: String
+ desc: Color for x- and y-axis labels. This is a CSS color string.
- name: axisLabelFontSize
- type: Integer
default: 14
- desc: Size of the font (in pixels) to use in the axis labels, both x- and y-axis.
tags:
- axes
+ - labels
+ type: Integer
+ desc: Size of the font (in pixels) to use in the axis labels, both x- and y-axis.
- name: axisLabelFormatter
- type: function(number or Date, granularity, opts, dygraph)
- default: null
- 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').
tags:
- axes
+ - labels
+ default: null
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').
- 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
tags:
- axes
- labels
+ type: Integer
+ desc: Width (in pixels) of the containing divs for x- and y-axis labels. For the
+ y-axis, this also controls
- 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)'.
tags:
- axes
+ - color
+ 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)'.
- name: axisLineWidth
- type: Float
default: 0.3
- desc: Thickness (in pixels) of the x- and y-axis lines.
tags:
- axes
+ type: Float
+ desc: Thickness (in pixels) of the x- and y-axis lines.
- 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.
- tags:
- - axes
-
-- name: dateWindow
- type: Array of two Dates or numbers
- default: null
- 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. By default, the full range of the input is shown.
tags:
- axes
- examples:
- - dateWindow
- - drawing
- - is-zoomed-ignore-programmatic-zoom
- - link-interaction
- - synchronize
- - zoom
+ type: Number
+ desc: The size of the line to display next to each tick mark on x- or y-axes.
- name: drawXAxis
- type: Boolean
- 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.
tags:
- axes
+ - 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.
- name: drawYAxis
- type: Boolean
- 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.
tags:
- axes
+ - 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.
- name: includeZero
- type: Boolean
- default: false
- 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
tags:
- axes
+ - 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
- name: logscale
- type: Boolean
- default: false
- 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.
tags:
- axes
+ - display
+ default: false
examples:
- logscale
- stock
-
-- 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.
- tags:
- - axes
- - interactive elements
- examples:
- - zoom
+ 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.
- name: pixelsPerLabel
- type: Integer
- default: null
- 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. By default, values are 60 (x-axis) or 30 (y-axes).
tags:
- axes
- grid
- examples:
- - value-axis-formatters
-
-- name: ticker
- type: "function(min, max, pixels, opts, dygraph, vals) -> [{v: ..., label: ...}, ...]"
- default: null
- desc: 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. By default, uses Dygraph.dateTicker or Dygraph.numericTicks, but see
- dygraph-tickers.js for an extensive discussion. This is set on a per-axis basis.
- tags:
- - axes
-
-- name: valueRange
- type: Array of two numbers
+ - labels
default: null
- 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. By default, the full range of the input is shown.
- tags:
- - axes
examples:
- - drawing
- - dynamic-update
- - is-zoomed-ignore-programmatic-zoom
- - no-visibility
- - reverse-y-axis
- - synchronize
- - zoom
- - two-axes-vr
+ - value-axis-formatters
+ type: Integer
+ 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. By
+ default, values are 60 (x-axis) or 30 (y-axes).
- name: xAxisHeight
- type: Integer
default: null
- desc: Height, in pixels, of the x-axis. If not set explicitly, this is computed based on axisLabelFontSize
- and axisTickSize.
tags:
- axes
+ - display
+ type: Integer
+ desc: Height, in pixels, of the x-axis. If not set explicitly, this is computed
+ based on axisLabelFontSize and axisTickSize.
- name: xAxisLabelWidth
- type: Integer
- default: 50
- desc: Width, in pixels, of the x-axis labels.
tags:
- axes
+ - labels
+ default: 50
examples:
- x-axis-formatter
- value-axis-formatters
+ type: Integer
+ desc: Width, in pixels, of the x-axis labels.
- name: yAxisLabelWidth
- type: Integer
- 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.
tags:
- axes
+ - labels
+ default: 50
examples:
- customLabel
- two-axes
- multi-scale
- two-axes-vr
- value-axis-formatters
+ type: Integer
+ desc: Width, in pixels, of the y-axis labels. This also affects the amount of
+ space available for a y-axis chart label.
-- name: delimiter
- type: String
- default: ','
- desc: 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.
- tags:
- - csv parsing
-
-- name: xValueParser
- type: function(str) -> number
- default: null
- desc: 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.
- tags:
- - csv parsing
-
-- name: clickCallback
- type: function(e, x, points)
+- name: ticker
default: null
- desc: "A function to call when the canvas is clicked. The function should take three arguments, the\
- \ event object for the click, the x-value that was clicked (for dates this is millis since epoch),\
- \ and the closest points along that date. The points have 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"
tags:
- - callbacks
- examples:
+ - axes
+ - formatting
- callback
+ type: 'function(min, max, pixels, opts, dygraph, vals) -> [{v: ..., label: ...},
+ ...]'
+ desc: 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. By default,
+ uses Dygraph.dateTicker or Dygraph.numericTicks, but see dygraph-tickers.js
+ for an extensive discussion. This is set on a per-axis basis.
-- name: drawCallback
- type: function(dygraph, is_initial)
- default: null
- desc: When set, this callback gets called every time the dygraph is drawn. This includes the initial
- draw, after zooming and repeatedly while panning. The first parameter is the dygraph being drawn.
- The second is a boolean value indicating whether this is the initial draw.
+- name: dateWindow
tags:
- - callbacks
+ - interactivity
+ - axes
+ default: null
examples:
- - linear-regression-addseries
- - annotation
- - callback
- - is-zoomed
+ - 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. By default, the
+ full range of the input is shown.
-- name: highlightCallback
- type: function(event, x, points,row)
- default: null
- desc: 'When set, this callback gets called every time a new point is highlighted. The parameters are
- the JavaScript mousemove event, the x-coordinate of the highlighted points and an array of highlighted
- points: [ {name: ''series'', yval: y-value}, ... ]'
+- name: panEdgeFraction
tags:
- - callbacks
- examples:
- - callback
- - crosshair
-
-- name: underlayCallback
- type: function(canvas, area, dygraph)
+ - interactivity
+ - axes
+ - pan
default: null
- desc: When set, this callback gets called before the chart is drawn. It details on how to use this.
- tags:
- - callbacks
examples:
- - highlighted-region
- - interaction
- - linear-regression-fractions
- - linear-regression
- - underlay-callback
+ - 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.
-- name: unhighlightCallback
- type: function(event)
- default: null
- desc: When set, this callback gets called every time the user stops highlighting any point by mousing
- out of the graph. The parameter is the mouseout event.
+- name: valueRange
tags:
- - callbacks
- examples:
- - callback
- - crosshair
-
-- name: zoomCallback
- type: function(minDate, maxDate, yRanges)
+ - interactivity
+ - range
+ - axes
default: null
- desc: A function to call when the zoom window is changed (either by zooming in or out). minDate and
- maxDate are milliseconds since epoch. yRanges is an array of [bottom, top] pairs, one for each
- y-axis.
- tags:
- - callbacks
examples:
- - callback
+ - drawing
+ - dynamic-update
- is-zoomed-ignore-programmatic-zoom
+ - no-visibility
+ - reverse-y-axis
+ - synchronize
- zoom
-
-- name: title
- type: String
- default: null
- desc: 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.
- tags:
- - chart labels
- examples:
- - border
- - demo
- - noise
- - styled-chart-labels
- - multi-scale
- - range-selector
- - temperature-sf-ny
-
-- name: titleHeight
- type: Integer
- default: 18
- desc: 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.
- tags:
- - chart labels
- examples:
- - styled-chart-labels
-
-- name: xLabelHeight
- type: Integer
- default: 18
- desc: 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.
- tags:
- - chart labels
-
-- name: xlabel
- type: String
- default: null
- desc: 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.
- tags:
- - chart labels
- examples:
- - border
- - demo
- - styled-chart-labels
- - multi-scale
-
-- name: y2label
- type: String
- default: null
- desc: 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.
- tags:
- - chart labels
- examples:
- - two-axes
- two-axes-vr
+ type: Array of two numbers
+ desc: Explicitly set the vertical range of the graph to [low,&n