- - name: dateWindow
- tags:
- - interactivity
- - axes
- default: null
- 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. By default, the
- full range of the input is shown.
-
- - name: panEdgeFraction
+ - name: title
tags:
- - interactivity
- - axes
- - pan
- - chart
+ - labels
+ - 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.
-
-
+ - 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: visibility
+ - name: xlabel
tags:
- - lines
- - data
- - x-axis
+ - labels
- display
- default: true
+ default: null
examples:
- - color-visibility
- - no-visibility
- - visibility
- type: Array of booleans
- desc: 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.
+ - 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: stackedGraph
+ - name: ylabel
tags:
- - lines
- - data
- - y-axis
+ - labels
- display
- default: false
+ default: null
examples:
- - stacked
- type: Boolean
- desc: If set, stack series on top of one another rather than drawing them independently.
+ - 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: fillGraph
+ - name: y2label
tags:
- - lines
- - data
- - y-axis
+ - labels
- display
- default: false
+ default: null
examples:
- - fillGraph
- two-axes
- - steps
- type: Boolean
- desc: Should the area underneath the graph be filled? This option is not compatible
- with error bars.
+ - 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: strokeWidth
+ - name: titleHeight
tags:
- - lines
- - data
- - chart
+ - labels
- display
- default: 1
+ default: 18
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.
+ 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: strokePattern
+ - name: xLabelHeight
+ default: 18
tags:
- - lines
- - data
- - x-axis
+ - labels
- display
- default: null
- examples:
- - 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.
+ 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: stepPlot
+ - name: yLabelWidth
+ default: 18
tags:
- - lines
- - data
- - y-axis
+ - labels
- display
- default: false
- examples:
- - avoidMinZero
- - steps
- - y-axis-formatter
- type: Boolean
- desc: When set, display the graph as a step plot instead of a line plot.
+ 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:
- name: drawPoints
tags:
- - line
- lines
- data
- - points
- display
default: false
examples:
point. This makes the individual data points easier to see, but can increase
visual clutter in the chart.
+ - name: fillGraph
+ tags:
- - graph
+ - lines
+ - data
+ - display
+ default: false
+ examples:
+ - fillGraph
+ - two-axes
+ - steps
+ type: Boolean
+ desc: Should the area underneath the graph be filled? This option is not compatible
+ with error bars.
+
- name: pointSize
tags:
- - line
- lines
- data
- - points
- display
default: 1
examples:
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: rightGap
- default: 5
+ - name: stackedGraph
tags:
- - graph
- lines
- data
- - points
- display
- type: Integer
- desc: Number of pixels to leave blank at the right edge of the Dygraph. This makes
- it easier to highlight the right-most data point.
-
-
+ default: false
+ examples:
+ - stacked
+ type: Boolean
+ desc: If set, stack series on top of one another rather than drawing them independently.
+ - name: stepPlot
+ tags:
- - graph
+ - lines
+ - data
+ - display
+ default: false
+ examples:
+ - avoidMinZero
+ - steps
+ - y-axis-formatter
+ type: Boolean
+ desc: When set, display the graph as a step plot instead of a line plot.
- - name: colors
+ - name: strokePattern
tags:
- - color
- - line
+ - lines
- data
- display
default: null
examples:
- - century-scale
- - color-visibility
- - demo
- - reverse-y-axis
- - color-cycle
+ - per-series
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.
+ 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:
- - line
+ - 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
series colors.
- name: colorValue
- default: 0.5
+ default: 1.0
tags:
- - line
- color
- data
- display
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: animatedZooms
- tags:
- - interactivity
- - zoom
- default: false
- examples:
- - highlighted-region
- - link-interaction
- type: Boolean
- desc: 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.
-
- - name: highlightCircleSize
- tags:
- - interactivity
- default: 3
- examples:
- - dygraph-many-points-benchmark
- - grid_dot
- - per-series
- - unboxed-spark
- type: Integer
- desc: The size in pixels of the dot drawn over highlighted points.
-
- - name: interactionModel
- ignore: true
+ - name: colors
tags:
- - interactivity
- - line
+ - color
+ - data
+ - display
default: null
examples:
- - drawing
- - interaction
- type: Object
- desc: 'TODO(konigsberg): document this'
+ - 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: isZoomedIgnoreProgrammaticZoom
+ - name: avoidMinZero
tags:
- - interactivity
- - zoom
- - y-axis
+ - axes
default: false
examples:
- - is-zoomed-ignore-programmatic-zoom
+ - avoidMinZero
type: Boolean
- desc: When this option is passed to updateOptions() along with either the dateWindow
- or valueRange options, the zoom flags are not changed to reflect a zoomed
- state. This is primarily useful for when the display area of a chart is changed
- programmatically and also where manual zooming is allowed and use is made
- of the isZoomed method to determine this.
-
-
+ 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: labels
+ - name: axis
tags:
- - labels
- - legend
- - display
+ - axes
default: null
examples:
- - linear-regression-addseries
- - connect-separated
- - drawing
- - dygraph
- - dygraph-many-points-benchmark
- - dynamic-update
- - highlighted-region
- - independent-series
- - isolated-points
- - label-div
- - link-interaction
- - linear-regression
- - negative
- - missing-data
- - native-format
- two-axes
- - perf
- - small-range-zero
- steps
- - y-axis-formatter
- - annotation-native
- - multi-scale
- two-axes-vr
- value-axis-formatters
- type: Array
- desc: A name for each data series, including the independent (X) series. For CSV
- files and DataTable objections, 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. By default, labels roughly follow ["X", "Y1", "Y2", ...]*
-
- - name: xlabel
- tags:
- - labels
- - axes
- - 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.
+ 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: ylabel
+ - name: axisLabelColor
+ default: black
tags:
- - labels
- axes
- - 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
- 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: legend
- tags:
+ - color
- labels
- - legend
- - display
- default: onmouseover
- examples:
- - demo
- - noise
- - per-series
- - styled-chart-labels
- - multi-scale
- - range-selector
- - temperature-sf-ny
type: String
- desc: 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.
-
- - name: labelsSeparateLines
- tags:
- - labels
- - legend
- - display
- default: false
- examples:
- - century-scale
- - customLabel
- - demo
- - reverse-y-axis
- type: Boolean
- desc: Put <br/> between lines in the label string. Often used in conjunction with
- labelsDiv.
-
- - name: labelsShowZeroValues
- tags:
- - labels
- - legend
- - display
- default: true
- examples:
- - label-div
- type: Boolean
- desc: Show zero value labels in the labelsDiv.
-
- - name: hideOverlayOnMouseOut
- tags:
- - labels
- - interactivity
- - legend
- - display
- default: true
- examples:
- - gviz-selection
- type: Boolean
- desc: Whether to hide the legend when the mouse leaves the chart area.
-
- - name: showLabelsOnHighlight
- tags:
- - labels
- - legend
- - interactivity
- - display
- default: true
- examples:
- - callback
- type: Boolean
- desc: Whether to show the legend upon mouseover.
-
-
-
+ desc: Color for x- and y-axis labels. This is a CSS color string.
- - name: labelsDiv
- ignore: true
+ - name: axisLabelFontSize
+ default: 14
tags:
+ - axes
- labels
- - legend
- - display
- default: null
- type: DOM element or string
- desc: Show data labels in an external div, rather than on the graph. This value
- can either be a div element or a div id.
- examples:
- - century-scale
- - demo
- - label-div
- - reverse-y-axis
- - unboxed-spark
+ type: Integer
+ desc: Size of the font (in pixels) to use in the axis labels, both x- and y-axis.
- - name: labelsDivStyles
- ignore: true
+ - name: axisLabelFormatter
tags:
+ - axes
- labels
- - legend
- - display
default: null
examples:
- - border
- - customLabel
- - noise
- - styled-chart-labels
- - range-selector
- - temperature-sf-ny
- type: Object
- desc: 'Additional styles to apply to the currently-highlighted points div. For
- example, { ''font-weight'': ''bold'' } will make the labels bold.'
+ - 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: labelsDivWidth
- ignore: true
+ - name: axisLabelWidth
+ default: 50
tags:
+ - axes
- labels
- - legend
- - display
- default: 250
- examples:
- - customLabel
- - noise
type: Integer
- desc: Width (in pixels) of the div which shows information on the currently-highlighted
- points.
-
-
+ desc: Width (in pixels) of the containing divs for x- and y-axis labels. For the
+ y-axis, this also controls
- - name: logscale
+ - name: axisLineColor
tags:
- axes
- - display
- default: false
+ - color
+ default: black
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.
+ - 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: axis
+ - name: axisLineWidth
+ default: 0.3
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.
+ type: Float
+ desc: Thickness (in pixels) of the x- and y-axis lines.
- - name: valueRange
+ - name: axisTickSize
+ default: '3.0'
tags:
- axes
- - range
- default: null
- examples:
- - drawing
- - dynamic-update
- - is-zoomed-ignore-programmatic-zoom
- - no-visibility
- - reverse-y-axis
- - synchronize
- - zoom
- - two-axes-vr
- type: Array of two numbers
- 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.
+ type: Number
+ desc: The size of the line to display next to each tick mark on x- or y-axes.
- name: drawXAxis
tags:
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: avoidMinZero
- 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: includeZero
tags:
- - y-axis
- axes
- display
default: false
zero, typically as the lowest value. This can be used to avoid exaggerating
the variance in the data
- - name: axisLineWidth
- default: 0.3
- tags:
- - axes
- type: Float
- desc: Thickness (in pixels) of the x- and y-axis lines.
-
- - name: axisLineColor
- 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: axisTickSize
- default: 3.0
- tags:
- - axes
- type: Number
- desc: The size of the line to display next to each tick mark on x- or y-axes.
-
- - name: xAxisHeight
- default: null
+ - name: logscale
tags:
- - y-axis
- 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: axisLabelColor
- default: black
- tags:
- - axes
- - color
- - labels
- type: String
- desc: Color for x- and y-axis labels. This is a CSS color string.
-
- - name: axisLabelFontSize
- default: 14
- 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
- tags:
- - axes
- - labels
- default: null
+ default: false
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
- default: 50
- 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: xLabelHeight
- default: 18
- tags:
- - axes
- - 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:
- - axes
- - 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.
+ - 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.