dygraphs
Version:
dygraphs is a fast, flexible open source JavaScript charting library.
841 lines (777 loc) • 138 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dygraphs — options reference</title>
<link rel="stylesheet" type="text/css" href=".jslibs/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="dist/dygraph.css" />
<link rel="stylesheet" type="text/css" href="common/vextlnk.css" />
<link rel="stylesheet" type="text/css" href="site.css" />
<script type="text/javascript" src=".jslibs/jquery.min.js"></script>
<script type="text/javascript" src=".jslibs/bootstrap.min.js"></script>
<script type="text/javascript" src="dist/dygraph.js"></script>
</head>
<body>
<nav id="header" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-responsive-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">dygraphs</a>
</div><!-- /navbar-header -->
<div class="collapse navbar-collapse" id="navbar-responsive-collapse">
<!-- TODO(danvk): fill in relevant links here -->
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" id="drop3" role="button" data-toggle="dropdown" href="#">Documentation<b class="caret"></b></a>
<ul id="menu0" class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="tutorial.html">Tutorial</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="options.html">Options Reference</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="jsdoc/symbols/Dygraph.html">API Reference</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="data.html">Data Format</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="annotations.html">Annotations</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="css.html">CSS Reference</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="versions.html">Version History</a></li>
<li role="separator" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="ie.html">Notes on Internet Explorer</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Examples<b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li role="presentation"><a role="menuitem" tabindex="-1" href="gallery/">Demo Gallery</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="users.html">List of Users</a></li>
<li role="separator" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="tests/">Test Cases</a></li>
<li role="separator" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://dygraphs.com/fiddle/">Play</a></li>
</ul>
</li>
<li><a class="xnavbar-link" href="download.html">Download</a></li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop7" role="button" data-toggle="dropdown" href="#">Community <b class="caret"></b></a>
<ul id="menu4" class="dropdown-menu" role="menu" aria-labelledby="drop7">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://blog.dygraphs.com/">Blog</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://stackoverflow.com/questions/ask?tags=dygraphs+javascript">Ask a Question</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://stackoverflow.com/questions/tagged/dygraphs">Stack Overflow</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://groups.google.com/g/dygraphs-users">Mailing List</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop6" role="button" data-toggle="dropdown" href="#">Contribute <b class="caret"></b></a>
<ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop6">
<li role="presentation"><a role="menuitem" tabindex="-1" href="changes.html">Contributors Guide</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://github.com/danvk/dygraphs">Source (Github)</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://github.com/danvk/dygraphs/issues">Issue Tracker</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://github.com/danvk/dygraphs/issues/new">Report a Bug</a></li>
</ul>
</li>
</ul><!-- /navbar-nav -->
</div><!-- /navbar-responsive-collapse -->
</div><!-- container-fluid -->
</nav>
<div class="container" id="main">
<div class="row">
<div class="col-lg-12">
<!--
DO NOT EDIT THIS FILE!
This file is generated by generate-documentation.py.
-->
<link rel="stylesheet" type="text/css" href="options.css" />
<div class="col-lg-3">
<div class="dygraphs-side-nav affix-top" data-spy="affix" data-offset-top="0">
<ul class='nav'>
<li><a href="#usage">Usage</a>
<li><a href="#Annotations">Annotations</a>
<li><a href="#Axis_20display">Axis display</a>
<li><a href="#CSV_20parsing">CSV parsing</a>
<li><a href="#Callbacks">Callbacks</a>
<li><a href="#Chart_20labels">Chart labels</a>
<li><a href="#Configuration">Configuration</a>
<li><a href="#Data">Data</a>
<li><a href="#Data_20Line_20display">Data Line display</a>
<li><a href="#Data_20Series_20Colors">Data Series Colors</a>
<li><a href="#Debugging">Debugging</a>
<li><a href="#Deprecated">Deprecated</a>
<li><a href="#Error_20Bars">Error Bars</a>
<li><a href="#Grid">Grid</a>
<li><a href="#Interactive_20Elements">Interactive Elements</a>
<li><a href="#Legend">Legend</a>
<li><a href="#Overall_20display">Overall display</a>
<li><a href="#Range_20Selector">Range Selector</a>
<li><a href="#Rolling_20Averages">Rolling Averages</a>
<li><a href="#Series">Series</a>
<li><a href="#Value_20display_2Fformatting">Value display/formatting</a>
</ul></div></div>
<div id='content' class='col-lg-9'>
<h2>Options Reference</h2>
<p>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.</p>
<a name="usage"></a><h3>Usage</h3>
<p>You specify options in the third parameter to the dygraphs constructor:</p>
<pre>g = new Dygraph(div,
data,
{
option1: value1,
option2: value2,
...
});
</pre>
<p>After you've created a Dygraph, you can change an option by calling the
<code>updateOptions</code> method:</p>
<pre>g.updateOptions({
new_option1: value1,
new_option2: value2
});
</pre>
<p>Some options can be set on a per-axis and per-series basis.
See the docs on <a href="per-axis.html">per-axis and per-series options</a>
to learn how to do this. The options which may be set in this way
are marked as such on this page.</p>
<p>For options which are functions (e.g. callbacks and formatters),
the value of <code>this</code> is set to the Dygraph object.</p>
<p><strong>Note:</strong> tests marked with ⚠ access external resources,
such as Google’s jsapi.</p>
<p>And, without further ado, here's the complete list of options:</p>
<a name="Annotations"></a><h3>Annotations</h3>
<div class='option'><p>
<a name="annotationClickHandler"></a><b>annotationClickHandler</b>
<a class="link" href="#annotationClickHandler">#</a>
</p><p>
If provided, this function is called whenever the user clicks on an annotation.
</p><p>
<i>Type: function(annotation, point, dygraph, event)</i><br />
</p><div class='parameters'><table>
<tr><th>annotation:</th><td>the annotation left</td></tr>
<tr><th>point:</th><td>the point associated with the annotation</td></tr>
<tr><th>dygraph:</th><td>the reference graph</td></tr>
<tr><th>event:</th><td>the mouse event</td></tr>
</table></div><p>
<i>Default: null</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><a href="gallery/#g/annotations">annotations</a></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/annotation.html">annotation</a></td></tr>
</table></div>
<div class='option'><p>
<a name="annotationDblClickHandler"></a><b>annotationDblClickHandler</b>
<a class="link" href="#annotationDblClickHandler">#</a>
</p><p>
If provided, this function is called whenever the user double-clicks on an annotation.
</p><p>
<i>Type: function(annotation, point, dygraph, event)</i><br />
</p><div class='parameters'><table>
<tr><th>annotation:</th><td>the annotation left</td></tr>
<tr><th>point:</th><td>the point associated with the annotation</td></tr>
<tr><th>dygraph:</th><td>the reference graph</td></tr>
<tr><th>event:</th><td>the mouse event</td></tr>
</table></div><p>
<i>Default: null</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><a href="gallery/#g/annotations">annotations</a></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/annotation.html">annotation</a></td></tr>
</table></div>
<div class='option'><p>
<a name="annotationMouseOutHandler"></a><b>annotationMouseOutHandler</b>
<a class="link" href="#annotationMouseOutHandler">#</a>
</p><p>
If provided, this function is called whenever the user mouses out of an annotation.
</p><p>
<i>Type: function(annotation, point, dygraph, event)</i><br />
</p><div class='parameters'><table>
<tr><th>annotation:</th><td>the annotation left</td></tr>
<tr><th>point:</th><td>the point associated with the annotation</td></tr>
<tr><th>dygraph:</th><td>the reference graph</td></tr>
<tr><th>event:</th><td>the mouse event</td></tr>
</table></div><p>
<i>Default: null</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><a href="gallery/#g/annotations">annotations</a></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/annotation.html">annotation</a></td></tr>
</table></div>
<div class='option'><p>
<a name="annotationMouseOverHandler"></a><b>annotationMouseOverHandler</b>
<a class="link" href="#annotationMouseOverHandler">#</a>
</p><p>
If provided, this function is called whenever the user mouses over an annotation.
</p><p>
<i>Type: function(annotation, point, dygraph, event)</i><br />
<i>Default: null</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><a href="gallery/#g/annotations">annotations</a></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/annotation.html">annotation</a></td></tr>
</table></div>
<div class='option'><p>
<a name="displayAnnotations"></a><b>displayAnnotations</b>
<a class="link" href="#displayAnnotations">#</a>
</p><p>
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.
</p><p>
<i>Type: boolean</i><br />
<i>Default: false</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><font color="#9999FF" title="inactive">annotations-gviz</font></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/annotation-gviz.html">annotation-gviz</a><b class="extlink" title="WARNING: accesses external resources (Google jsapi)">⚠</b></td></tr>
</table></div>
<a name="Axis_20display"></a><h3>Axis display</h3>
<div class='option'><p>
<a name="axis"></a><b>axis</b>
<a class="link" href="#axis">#</a>
</p><p>
Set to either 'y1' or 'y2' to assign a series to a y-axis (primary or secondary). Must be set per-series.
</p><p>
<i>Type: string</i><br />
<i>Default: (none)</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><font color="#9999FF" title="inactive">two-axes</font></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/grid_dot.html">grid_dot</a>; <a href="tests/steps.html">steps</a>; <a href="tests/two-axes.html">two-axes</a>; <a href="tests/two-axes-vr.html">two-axes-vr</a>; <a href="tests/value-axis-formatters.html">value-axis-formatters</a></td></tr>
</table></div>
<div class='option'><p>
<a name="axisLabelFontSize"></a><b>axisLabelFontSize</b>
<a class="link" href="#axisLabelFontSize">#</a>
</p><p>
Size of the font (in pixels) to use in the axis labels, both x- and y-axis.
</p><p>
<i>Type: integer</i><br />
<i>Default: 14</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
<tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
</table></div>
<div class='option'><p>
<a name="axisLabelFormatter"></a><b>axisLabelFormatter</b>
<a class="link" href="#axisLabelFormatter">#</a>
</p><p>
Function to call to format the tick values that appear along an axis. This is usually set on a <a href='per-axis.html'>per-axis</a> basis.
</p><p>
<i>Type: function(number_or_Date, granularity, opts, dygraph)</i><br />
</p><div class='parameters'><table>
<tr><th>number_or_Date:</th><td>Either a number (for a numeric axis) or a Date object (for a date axis)</td></tr>
<tr><th>granularity:</th><td>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.</td></tr>
<tr><th>opts:</th><td>a function which provides access to various options on the dygraph, e.g. opts('labelsKMB').</td></tr>
<tr><th>dygraph:</th><td>the referenced graph</td></tr>
</table></div><p>
<i>Default: Depends on the data type</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/value-axis-formatters.html">value-axis-formatters</a>; <a href="tests/x-axis-formatter.html">x-axis-formatter</a></td></tr>
</table></div>
<div class='option'><p>
<a name="axisLabelWidth"></a><b>axisLabelWidth</b>
<a class="link" href="#axisLabelWidth">#</a>
</p><p>
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.
</p><p>
<i>Type: integer</i><br />
<i>Default: 50 (y-axis), 60 (x-axis)</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><font color="#9999FF" title="inactive">two-axes</font></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/customLabel.html">customLabel</a>; <a href="tests/customLabelCss3.html">customLabelCss3</a>; <a href="tests/multi-scale.html">multi-scale</a>; <a href="tests/two-axes.html">two-axes</a>; <a href="tests/two-axes-vr.html">two-axes-vr</a>; <a href="tests/value-axis-formatters.html">value-axis-formatters</a>; <a href="tests/x-axis-formatter.html">x-axis-formatter</a></td></tr>
</table></div>
<div class='option'><p>
<a name="axisLineColor"></a><b>axisLineColor</b>
<a class="link" href="#axisLineColor">#</a>
</p><p>
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)'.
</p><p>
<i>Type: string</i><br />
<i>Default: black</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><font color="#9999FF" title="inactive">demo</font></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/demo.html">demo</a>; <a href="tests/plugins.html">plugins</a>; <a href="tests/rtl.html">rtl</a></td></tr>
</table></div>
<div class='option'><p>
<a name="axisLineWidth"></a><b>axisLineWidth</b>
<a class="link" href="#axisLineWidth">#</a>
</p><p>
Thickness (in pixels) of the x- and y-axis lines.
</p><p>
<i>Type: float</i><br />
<i>Default: 0.3</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
<tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
</table></div>
<div class='option'><p>
<a name="axisTickSize"></a><b>axisTickSize</b>
<a class="link" href="#axisTickSize">#</a>
</p><p>
The size of the line to display next to each tick mark on x- or y-axes.
</p><p>
<i>Type: number</i><br />
<i>Default: 3.0</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
<tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
</table></div>
<div class='option'><p>
<a name="dateWindow"></a><b>dateWindow</b>
<a class="link" href="#dateWindow">#</a>
</p><p>
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.
</p><p>
<i>Type: Array of two numbers</i><br />
<i>Default: Full range of the input is shown</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><a href="gallery/#g/drawing">drawing</a>; <font color="#9999FF" title="inactive">interaction-api</font>; <a href="gallery/#g/link-interaction">link-interaction</a></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/dateWindow.html">dateWindow</a>; <a href="tests/daylight-savings.html">daylight-savings</a>; <a href="tests/drawing.html">drawing</a>; <a href="tests/independent-series.html">independent-series</a>; <a href="tests/link-interaction.html">link-interaction</a>; <a href="tests/old-yrange-behavior.html">old-yrange-behavior</a>; <a href="tests/plotters.html">plotters</a>; <a href="tests/range-selector.html">range-selector</a>; <a href="tests/zoom.html">zoom</a></td></tr>
</table></div>
<div class='option'><p>
<a name="drawAxesAtZero"></a><b>drawAxesAtZero</b>
<a class="link" href="#drawAxesAtZero">#</a>
</p><p>
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.
</p><p>
<i>Type: boolean</i><br />
<i>Default: false</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><a href="gallery/#g/linear-regression">linear-regression</a></td></tr>
<tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
</table></div>
<div class='option'><p>
<a name="drawAxis"></a><b>drawAxis</b>
<a class="link" href="#drawAxis">#</a>
</p><p>
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.
</p><p>
<i>Type: boolean</i><br />
<i>Default: true for x and y, false for y2</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><a href="gallery/#g/drawing">drawing</a></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/drawing.html">drawing</a>; <a href="tests/range-selector.html">range-selector</a>; <a href="tests/unboxed-spark.html">unboxed-spark</a></td></tr>
</table></div>
<div class='option'><p>
<a name="includeZero"></a><b>includeZero</b>
<a class="link" href="#includeZero">#</a>
</p><p>
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
</p><p>
<i>Type: boolean</i><br />
<i>Default: false</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><font color="#9999FF" title="inactive">no-range</font></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/no-range.html">no-range</a>; <a href="tests/numeric-gviz.html">numeric-gviz</a><b class="extlink" title="WARNING: accesses external resources (Google jsapi)">⚠</b>; <a href="tests/plotters.html">plotters</a>; <a href="tests/range-selector.html">range-selector</a>; <a href="tests/small-range-zero.html">small-range-zero</a>; <a href="tests/steps.html">steps</a></td></tr>
</table></div>
<div class='option'><p>
<a name="independentTicks"></a><b>independentTicks</b>
<a class="link" href="#independentTicks">#</a>
</p><p>
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.
</p><p>
<i>Type: boolean</i><br />
<i>Default: true for y, false for y2</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/grid_dot.html">grid_dot</a>; <a href="tests/two-axes.html">two-axes</a></td></tr>
</table></div>
<div class='option'><p>
<a name="labelsUTC"></a><b>labelsUTC</b>
<a class="link" href="#labelsUTC">#</a>
</p><p>
Show date/time labels according to UTC (instead of local time).
</p><p>
<i>Type: boolean</i><br />
<i>Default: false</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/drawing.html">drawing</a>; <a href="tests/labelsDateUTC.html">labelsDateUTC</a></td></tr>
</table></div>
<div class='option'><p>
<a name="logscale"></a><b>logscale</b>
<a class="link" href="#logscale">#</a>
</p><p>
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.
</p><p>
<i>Type: boolean</i><br />
<i>Default: false</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><a href="gallery/#g/stock">stock</a></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/logscale.html">logscale</a>; <a href="tests/stock.html">stock</a></td></tr>
</table></div>
<div class='option'><p>
<a name="panEdgeFraction"></a><b>panEdgeFraction</b>
<a class="link" href="#panEdgeFraction">#</a>
</p><p>
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.
</p><p>
<i>Type: float</i><br />
<i>Default: null</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/zoom.html">zoom</a></td></tr>
</table></div>
<div class='option'><p>
<a name="pixelsPerLabel"></a><b>pixelsPerLabel</b>
<a class="link" href="#pixelsPerLabel">#</a>
</p><p>
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 <a href='per-axis.html'>per-axis</a> basis.
</p><p>
<i>Type: integer</i><br />
<i>Default: 70 (x-axis) or 30 (y-axes)</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/hairlines.html">hairlines</a>; <a href="tests/spacing.html">spacing</a>; <a href="tests/value-axis-formatters.html">value-axis-formatters</a></td></tr>
</table></div>
<div class='option'><p>
<a name="ticker"></a><b>ticker</b>
<a class="link" href="#ticker">#</a>
</p><p>
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 <a href='per-axis.html'>per-axis</a> basis.
</p><p>
<i>Type: function(min, max, pixels, opts, dygraph, vals) → [{v: …, label: …}, …]</i><br />
</p><div class='parameters'><table>
<tr><th>min:</th><td></td></tr>
<tr><th>max:</th><td></td></tr>
<tr><th>pixels:</th><td></td></tr>
<tr><th>opts:</th><td></td></tr>
<tr><th>dygraph:</th><td>the reference graph</td></tr>
<tr><th>vals:</th><td></td></tr>
</table></div><p>
<i>Default: Dygraph.dateTicker or Dygraph.numericTicks</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/grid_dot.html">grid_dot</a>; <a href="tests/label_v.html">label_v</a></td></tr>
</table></div>
<div class='option'><p>
<a name="valueRange"></a><b>valueRange</b>
<a class="link" href="#valueRange">#</a>
</p><p>
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)
</p><p>
<i>Type: Array of two numbers</i><br />
<i>Default: Full range of the input is shown</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><a href="gallery/#g/drawing">drawing</a>; <a href="gallery/#g/dynamic-update">dynamic-update</a>; <font color="#9999FF" title="inactive">interaction-api</font></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/drawing.html">drawing</a>; <a href="tests/dynamic-update.html">dynamic-update</a>; <a href="tests/grid_dot.html">grid_dot</a>; <a href="tests/label_v.html">label_v</a>; <a href="tests/no-visibility.html">no-visibility</a>; <a href="tests/old-yrange-behavior.html">old-yrange-behavior</a>; <a href="tests/reverse-y-axis.html">reverse-y-axis</a>; <a href="tests/two-axes-vr.html">two-axes-vr</a>; <a href="tests/zoom.html">zoom</a></td></tr>
</table></div>
<div class='option'><p>
<a name="xAxisHeight"></a><b>xAxisHeight</b>
<a class="link" href="#xAxisHeight">#</a>
</p><p>
Height, in pixels, of the x-axis. If not set explicitly, this is computed based on axisLabelFontSize and axisTickSize.
</p><p>
<i>Type: integer</i><br />
<i>Default: (null)</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/range-selector.html">range-selector</a></td></tr>
</table></div>
<div class='option'><p>
<a name="xRangePad"></a><b>xRangePad</b>
<a class="link" href="#xRangePad">#</a>
</p><p>
Add the specified amount of extra space (in pixels) around the X-axis value range to ensure points at the edges remain visible.
</p><p>
<i>Type: float</i><br />
<i>Default: 0</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
<tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
</table></div>
<div class='option'><p>
<a name="yRangePad"></a><b>yRangePad</b>
<a class="link" href="#yRangePad">#</a>
</p><p>
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.
</p><p>
<i>Type: float</i><br />
<i>Default: null</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
<tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
</table></div>
<a name="CSV_20parsing"></a><h3>CSV parsing</h3>
<div class='option'><p>
<a name="customBars"></a><b>customBars</b>
<a class="link" href="#customBars">#</a>
</p><p>
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.
</p><p>
<i>Type: boolean</i><br />
<i>Default: false</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><a href="gallery/#g/range-selector">range-selector</a>; <a href="gallery/#g/stock">stock</a>; <a href="gallery/#g/temperature-sf-ny">temperature-sf-ny</a></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/custom-bars.html">custom-bars</a>; <a href="tests/missing-data.html">missing-data</a>; <a href="tests/range-selector.html">range-selector</a>; <a href="tests/resizable.html">resizable</a>; <a href="tests/steps.html">steps</a>; <a href="tests/stock.html">stock</a>; <a href="tests/temperature-sf-ny.html">temperature-sf-ny</a>; <a href="tests/zero-series.html">zero-series</a></td></tr>
</table></div>
<div class='option'><p>
<a name="delimiter"></a><b>delimiter</b>
<a class="link" href="#delimiter">#</a>
</p><p>
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.
</p><p>
<i>Type: string</i><br />
<i>Default: ,</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
<tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
</table></div>
<div class='option'><p>
<a name="errorBars"></a><b>errorBars</b>
<a class="link" href="#errorBars">#</a>
</p><p>
Does the data contain standard deviations? Setting this to true alters the input format (see above).
</p><p>
<i>Type: boolean</i><br />
<i>Default: false</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><font color="#9999FF" title="inactive">callbacks</font>; <a href="gallery/#g/interaction">interaction</a>; <a href="gallery/#g/link-interaction">link-interaction</a>; <a href="gallery/#g/resizable">resizable</a>; <a href="gallery/#g/resize">resize</a>; <a href="gallery/#g/synchronize">synchronize</a></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/callback.html">callback</a>; <a href="tests/charting-combinations.html">charting-combinations</a>; <a href="tests/crosshair.html">crosshair</a>; <a href="tests/custom-bars.html">custom-bars</a>; <a href="tests/customLabel.html">customLabel</a>; <a href="tests/customLabelCss3.html">customLabelCss3</a>; <a href="tests/draw-points.html">draw-points</a>; <a href="tests/fractions.html">fractions</a>; <a href="tests/grid_dot.html">grid_dot</a>; <a href="tests/interaction.html">interaction</a>; <a href="tests/legend-values.html">legend-values</a>; <a href="tests/linear-regression-fractions.html">linear-regression-fractions</a>; <a href="tests/link-interaction.html">link-interaction</a>; <a href="tests/missing-data.html">missing-data</a>; <a href="tests/no-visibility.html">no-visibility</a>; <a href="tests/numeric-gviz.html">numeric-gviz</a><b class="extlink" title="WARNING: accesses external resources (Google jsapi)">⚠</b>; <a href="tests/old-yrange-behavior.html">old-yrange-behavior</a>; <a href="tests/perf.html">perf</a>; <a href="tests/plotters.html">plotters</a>; <a href="tests/resize.html">resize</a>; <a href="tests/steps.html">steps</a>; <a href="tests/synchronize.html">synchronize</a>; <a href="tests/underlay-callback.html">underlay-callback</a>; <a href="tests/visibility.html">visibility</a>; <a href="tests/zoom.html">zoom</a></td></tr>
</table></div>
<div class='option'><p>
<a name="fractions"></a><b>fractions</b>
<a class="link" href="#fractions">#</a>
</p><p>
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).
</p><p>
<i>Type: boolean</i><br />
<i>Default: false</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/fractions.html">fractions</a>; <a href="tests/linear-regression-fractions.html">linear-regression-fractions</a></td></tr>
</table></div>
<div class='option'><p>
<a name="xValueParser"></a><b>xValueParser</b>
<a class="link" href="#xValueParser">#</a>
</p><p>
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.
</p><p>
<i>Type: function(str) -> number</i><br />
<i>Default: parseFloat() or Date.parse()*</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
<tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
</table></div>
<a name="Callbacks"></a><h3>Callbacks</h3>
<div class='option'><p>
<a name="clickCallback"></a><b>clickCallback</b>
<a class="link" href="#clickCallback">#</a>
</p><p>
A function to call when the canvas is clicked.
</p><p>
<i>Type: function(e, x, points)</i><br />
</p><div class='parameters'><table>
<tr><th>e:</th><td>The event object for the click</td></tr>
<tr><th>x:</th><td>The x value that was clicked (for dates, this is milliseconds since epoch)</td></tr>
<tr><th>points:</th><td>The closest points along that date. See <a href='#point_properties'>Point properties</a> for details.</td></tr>
</table></div><p>
<i>Default: null</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><font color="#9999FF" title="inactive">callbacks</font>; <a href="gallery/#g/highlighted-series">highlighted-series</a></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/callback.html">callback</a></td></tr>
</table></div>
<div class='option'><p>
<a name="drawCallback"></a><b>drawCallback</b>
<a class="link" href="#drawCallback">#</a>
</p><p>
When set, this callback gets called every time the dygraph is drawn. This includes the initial draw, after zooming and repeatedly while panning.
</p><p>
<i>Type: function(dygraph, is_initial)</i><br />
</p><div class='parameters'><table>
<tr><th>dygraph:</th><td>The graph being drawn</td></tr>
<tr><th>is_initial:</th><td>True if this is the initial draw, false for subsequent draws.</td></tr>
</table></div><p>
<i>Default: null</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><a href="gallery/#g/annotations">annotations</a>; <font color="#9999FF" title="inactive">callbacks</font></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/annotation.html">annotation</a>; <a href="tests/callback.html">callback</a>; <a href="tests/is-zoomed.html">is-zoomed</a>; <a href="tests/linear-regression-addseries.html">linear-regression-addseries</a>; <a href="tests/zoom.html">zoom</a></td></tr>
</table></div>
<div class='option'><p>
<a name="highlightCallback"></a><b>highlightCallback</b>
<a class="link" href="#highlightCallback">#</a>
</p><p>
When set, this callback gets called every time a new point is highlighted.
</p><p>
<i>Type: function(event, x, points, row, seriesName)</i><br />
</p><div class='parameters'><table>
<tr><th>event:</th><td>the JavaScript mousemove event</td></tr>
<tr><th>x:</th><td>the x-coordinate of the highlighted points</td></tr>
<tr><th>points:</th><td>an array of highlighted points: <code>[ {name: 'series', yval: y-value}, … ]</code></td></tr>
<tr><th>row:</th><td>integer index of the highlighted row in the data table, starting from 0</td></tr>
<tr><th>seriesName:</th><td>name of the highlighted series, only present if highlightSeriesOpts is set.</td></tr>
</table></div><p>
<i>Default: null</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><font color="#9999FF" title="inactive">callbacks</font></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/callback.html">callback</a></td></tr>
</table></div>
<div class='option'><p>
<a name="pointClickCallback"></a><b>pointClickCallback</b>
<a class="link" href="#pointClickCallback">#</a>
</p><p>
A function to call when a data point is clicked. and the point that was clicked.
</p><p>
<i>Type: function(e, point)</i><br />
</p><div class='parameters'><table>
<tr><th>e:</th><td>the event object for the click</td></tr>
<tr><th>point:</th><td>the point that was clicked See <a href='#point_properties'>Point properties</a> for details</td></tr>
</table></div><p>
<i>Default: null</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><a href="gallery/#g/annotations">annotations</a>; <font color="#9999FF" title="inactive">callbacks</font></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/annotation.html">annotation</a>; <a href="tests/callback.html">callback</a></td></tr>
</table></div>
<div class='option'><p>
<a name="underlayCallback"></a><b>underlayCallback</b>
<a class="link" href="#underlayCallback">#</a>
</p><p>
When set, this callback gets called before the chart is drawn. It details on how to use this.
</p><p>
<i>Type: function(context, area, dygraph)</i><br />
</p><div class='parameters'><table>
<tr><th>context:</th><td>the canvas drawing context on which to draw</td></tr>
<tr><th>area:</th><td>An object with {x,y,w,h} properties describing the drawing area.</td></tr>
<tr><th>dygraph:</th><td>the reference graph</td></tr>
</table></div><p>
<i>Default: null</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><a href="gallery/#g/highlighted-region">highlighted-region</a>; <a href="gallery/#g/highlighted-weekends">highlighted-weekends</a>; <a href="gallery/#g/interaction">interaction</a>; <a href="gallery/#g/linear-regression">linear-regression</a></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/highlighted-region.html">highlighted-region</a>; <a href="tests/interaction.html">interaction</a>; <a href="tests/linear-regression.html">linear-regression</a>; <a href="tests/linear-regression-fractions.html">linear-regression-fractions</a>; <a href="tests/underlay-callback.html">underlay-callback</a></td></tr>
</table></div>
<div class='option'><p>
<a name="unhighlightCallback"></a><b>unhighlightCallback</b>
<a class="link" href="#unhighlightCallback">#</a>
</p><p>
When set, this callback gets called every time the user stops highlighting any point by mousing out of the graph.
</p><p>
<i>Type: function(event)</i><br />
</p><div class='parameters'><table>
<tr><th>event:</th><td>the mouse event</td></tr>
</table></div><p>
<i>Default: null</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><font color="#9999FF" title="inactive">callbacks</font></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/callback.html">callback</a></td></tr>
</table></div>
<div class='option'><p>
<a name="zoomCallback"></a><b>zoomCallback</b>
<a class="link" href="#zoomCallback">#</a>
</p><p>
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).
</p><p>
<i>Type: function(minDate, maxDate, yRanges)</i><br />
</p><div class='parameters'><table>
<tr><th>minDate:</th><td>milliseconds since epoch</td></tr>
<tr><th>maxDate:</th><td>milliseconds since epoch.</td></tr>
<tr><th>yRanges:</th><td>is an array of [bottom, top] pairs, one for each y-axis.</td></tr>
</table></div><p>
<i>Default: null</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><font color="#9999FF" title="inactive">callbacks</font></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/callback.html">callback</a>; <a href="tests/zoom.html">zoom</a></td></tr>
</table></div>
<a name="Chart_20labels"></a><h3>Chart labels</h3>
<div class='option'><p>
<a name="axisLabelWidth"></a><b>axisLabelWidth</b>
<a class="link" href="#axisLabelWidth">#</a>
</p><p>
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.
</p><p>
<i>Type: integer</i><br />
<i>Default: 50 (y-axis), 60 (x-axis)</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><font color="#9999FF" title="inactive">two-axes</font></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/customLabel.html">customLabel</a>; <a href="tests/customLabelCss3.html">customLabelCss3</a>; <a href="tests/multi-scale.html">multi-scale</a>; <a href="tests/two-axes.html">two-axes</a>; <a href="tests/two-axes-vr.html">two-axes-vr</a>; <a href="tests/value-axis-formatters.html">value-axis-formatters</a>; <a href="tests/x-axis-formatter.html">x-axis-formatter</a></td></tr>
</table></div>
<div class='option'><p>
<a name="title"></a><b>title</b>
<a class="link" href="#title">#</a>
</p><p>
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.
</p><p>
<i>Type: string</i><br />
<i>Default: null</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><font color="#9999FF" title="inactive">border</font>; <font color="#9999FF" title="inactive">demo</font>; <font color="#9999FF" title="inactive">gallery</font>; <a href="gallery/#g/range-selector">range-selector</a>; <a href="gallery/#g/styled-chart-labels">styled-chart-labels</a>; <a href="gallery/#g/temperature-sf-ny">temperature-sf-ny</a></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/border.html">border</a>; <a href="tests/demo.html">demo</a>; <a href="tests/label_v.html">label_v</a>; <a href="tests/legend-formatter.html">legend-formatter</a>; <a href="tests/multi-scale.html">multi-scale</a>; <a href="tests/old-yrange-behavior.html">old-yrange-behavior</a>; <a href="tests/plotters.html">plotters</a>; <a href="tests/plugins.html">plugins</a>; <a href="tests/range-selector.html">range-selector</a>; <a href="tests/resizable.html">resizable</a>; <a href="tests/rtl.html">rtl</a>; <a href="tests/styled-chart-labels.html">styled-chart-labels</a>; <a href="tests/temperature-sf-ny.html">temperature-sf-ny</a></td></tr>
</table></div>
<div class='option'><p>
<a name="titleHeight"></a><b>titleHeight</b>
<a class="link" href="#titleHeight">#</a>
</p><p>
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.
</p><p>
<i>Type: integer</i><br />
<i>Default: 18</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><a href="gallery/#g/styled-chart-labels">styled-chart-labels</a></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/styled-chart-labels.html">styled-chart-labels</a></td></tr>
</table></div>
<div class='option'><p>
<a name="xLabelHeight"></a><b>xLabelHeight</b>
<a class="link" href="#xLabelHeight">#</a>
</p><p>
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.
</p><p>
<i>Type: integer</i><br />
<i>Default: 18</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
<tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
</table></div>
<div class='option'><p>
<a name="xlabel"></a><b>xlabel</b>
<a class="link" href="#xlabel">#</a>
</p><p>
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.
</p><p>
<i>Type: string</i><br />
<i>Default: null</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><font color="#9999FF" title="inactive">border</font>; <font color="#9999FF" title="inactive">demo</font>; <a href="gallery/#g/styled-chart-labels">styled-chart-labels</a></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/border.html">border</a>; <a href="tests/demo.html">demo</a>; <a href="tests/legend-formatter.html">legend-formatter</a>; <a href="tests/multi-scale.html">multi-scale</a>; <a href="tests/plugins.html">plugins</a>; <a href="tests/rtl.html">rtl</a>; <a href="tests/styled-chart-labels.html">styled-chart-labels</a></td></tr>
</table></div>
<div class='option'><p>
<a name="y2label"></a><b>y2label</b>
<a class="link" href="#y2label">#</a>
</p><p>
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 <a href='tests/two-axes.html'>this test</a> 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.
</p><p>
<i>Type: string</i><br />
<i>Default: null</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><font color="#9999FF" title="inactive">two-axes</font></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/two-axes.html">two-axes</a>; <a href="tests/two-axes-vr.html">two-axes-vr</a></td></tr>
</table></div>
<div class='option'><p>
<a name="yLabelWidth"></a><b>yLabelWidth</b>
<a class="link" href="#yLabelWidth">#</a>
</p><p>
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.
</p><p>
<i>Type: integer</i><br />
<i>Default: 18</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
<tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
</table></div>
<div class='option'><p>
<a name="ylabel"></a><b>ylabel</b>
<a class="link" href="#ylabel">#</a>
</p><p>
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 <tt>axisLabelWidth</tt> 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.
</p><p>
<i>Type: string</i><br />
<i>Default: null</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><font color="#9999FF" title="inactive">border</font>; <font color="#9999FF" title="inactive">demo</font>; <a href="gallery/#g/range-selector">range-selector</a>; <a href="gallery/#g/styled-chart-labels">styled-chart-labels</a>; <a href="gallery/#g/temperature-sf-ny">temperature-sf-ny</a>; <font color="#9999FF" title="inactive">two-axes</font></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/border.html">border</a>; <a href="tests/demo.html">demo</a>; <a href="tests/legend-formatter.html">legend-formatter</a>; <a href="tests/multi-scale.html">multi-scale</a>; <a href="tests/plugins.html">plugins</a>; <a href="tests/range-selector.html">range-selector</a>; <a href="tests/resizable.html">resizable</a>; <a href="tests/rtl.html">rtl</a>; <a href="tests/styled-chart-labels.html">styled-chart-labels</a>; <a href="tests/temperature-sf-ny.html">temperature-sf-ny</a>; <a href="tests/two-axes.html">two-axes</a>; <a href="tests/two-axes-vr.html">two-axes-vr</a></td></tr>
</table></div>
<a name="Configuration"></a><h3>Configuration</h3>
<div class='option'><p>
<a name="axes"></a><b>axes</b>
<a class="link" href="#axes">#</a>
</p><p>
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 <a href='per-axis.html'>per-series and per-axis options</a>.
</p><p>
<i>Type: Object</i><br />
<i>Default: null</i>
</p><table class="gallerylinks">
<tr><th>Gallery Samples:</th><td><a href="gallery/#g/drawing">drawing</a>; <font color="#9999FF" title="inactive">two-axes</font></td></tr>
<tr><th>Other Examples:</th><td><a href="tests/customLabel.html">customLabel</a>; <a href="tests/customLabelCss3.html">customLabelCss3</a>; <a href=