UNPKG

138 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Dygraphs — options reference</title>
7
8 <link rel="stylesheet" type="text/css" href=".jslibs/bootstrap.min.css" />
9 <link rel="stylesheet" type="text/css" href="dist/dygraph.css" />
10 <link rel="stylesheet" type="text/css" href="common/vextlnk.css" />
11 <link rel="stylesheet" type="text/css" href="site.css" />
12
13 <script type="text/javascript" src=".jslibs/jquery.min.js"></script>
14 <script type="text/javascript" src=".jslibs/bootstrap.min.js"></script>
15 <script type="text/javascript" src="dist/dygraph.js"></script>
16 </head>
17 <body>
18 <nav id="header" class="navbar navbar-default navbar-fixed-top">
19 <div class="container-fluid">
20 <div class="navbar-header">
21 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-responsive-collapse" aria-expanded="false">
22 <span class="sr-only">Toggle navigation</span>
23 <span class="icon-bar"></span>
24 <span class="icon-bar"></span>
25 <span class="icon-bar"></span>
26 </button>
27 <a class="navbar-brand" href="/">dygraphs</a>
28 </div><!-- /navbar-header -->
29 <div class="collapse navbar-collapse" id="navbar-responsive-collapse">
30
31 <!-- TODO(danvk): fill in relevant links here -->
32 <ul class="nav navbar-nav">
33 <li class="dropdown">
34 <a class="dropdown-toggle" id="drop3" role="button" data-toggle="dropdown" href="#">Documentation<b class="caret"></b></a>
35 <ul id="menu0" class="dropdown-menu" role="menu" aria-labelledby="drop3">
36 <li role="presentation"><a role="menuitem" tabindex="-1" href="tutorial.html">Tutorial</a></li>
37 <li role="presentation"><a role="menuitem" tabindex="-1" href="options.html">Options Reference</a></li>
38 <li role="presentation"><a role="menuitem" tabindex="-1" href="jsdoc/symbols/Dygraph.html">API Reference</a></li>
39 <li role="presentation"><a role="menuitem" tabindex="-1" href="data.html">Data Format</a></li>
40 <li role="presentation"><a role="menuitem" tabindex="-1" href="annotations.html">Annotations</a></li>
41 <li role="presentation"><a role="menuitem" tabindex="-1" href="css.html">CSS Reference</a></li>
42 <li role="presentation"><a role="menuitem" tabindex="-1" href="versions.html">Version History</a></li>
43 <li role="separator" class="divider"></li>
44 <li role="presentation"><a role="menuitem" tabindex="-1" href="ie.html">Notes on Internet Explorer</a></li>
45 </ul>
46 </li>
47 <li class="dropdown">
48 <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Examples<b class="caret"></b></a>
49 <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
50 <li role="presentation"><a role="menuitem" tabindex="-1" href="gallery/">Demo Gallery</a></li>
51 <li role="presentation"><a role="menuitem" tabindex="-1" href="users.html">List of Users</a></li>
52 <li role="separator" class="divider"></li>
53 <li role="presentation"><a role="menuitem" tabindex="-1" href="tests/">Test Cases</a></li>
54 <li role="separator" class="divider"></li>
55 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://dygraphs.com/fiddle/">Play</a></li>
56 </ul>
57 </li>
58 <li><a class="xnavbar-link" href="download.html">Download</a></li>
59 <li class="dropdown">
60 <a class="dropdown-toggle" id="drop7" role="button" data-toggle="dropdown" href="#">Community <b class="caret"></b></a>
61 <ul id="menu4" class="dropdown-menu" role="menu" aria-labelledby="drop7">
62 <li role="presentation"><a role="menuitem" tabindex="-1" href="http://blog.dygraphs.com/">Blog</a></li>
63 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://stackoverflow.com/questions/ask?tags=dygraphs+javascript">Ask a Question</a></li>
64 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://stackoverflow.com/questions/tagged/dygraphs">Stack Overflow</a></li>
65 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://groups.google.com/g/dygraphs-users">Mailing List</a></li>
66 </ul>
67 </li>
68 <li class="dropdown">
69 <a class="dropdown-toggle" id="drop6" role="button" data-toggle="dropdown" href="#">Contribute <b class="caret"></b></a>
70 <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop6">
71 <li role="presentation"><a role="menuitem" tabindex="-1" href="changes.html">Contributors Guide</a></li>
72 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://github.com/danvk/dygraphs">Source (Github)</a></li>
73 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://github.com/danvk/dygraphs/issues">Issue Tracker</a></li>
74 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://github.com/danvk/dygraphs/issues/new">Report a Bug</a></li>
75 </ul>
76 </li>
77 </ul><!-- /navbar-nav -->
78
79 </div><!-- /navbar-responsive-collapse -->
80 </div><!-- container-fluid -->
81 </nav>
82
83 <div class="container" id="main">
84 <div class="row">
85 <div class="col-lg-12">
86<!--
87 DO NOT EDIT THIS FILE!
88
89 This file is generated by generate-documentation.py.
90-->
91
92<link rel="stylesheet" type="text/css" href="options.css" />
93
94<div class="col-lg-3">
95<div class="dygraphs-side-nav affix-top" data-spy="affix" data-offset-top="0">
96<ul class='nav'>
97 <li><a href="#usage">Usage</a>
98 <li><a href="#Annotations">Annotations</a>
99 <li><a href="#Axis_20display">Axis display</a>
100 <li><a href="#CSV_20parsing">CSV parsing</a>
101 <li><a href="#Callbacks">Callbacks</a>
102 <li><a href="#Chart_20labels">Chart labels</a>
103 <li><a href="#Configuration">Configuration</a>
104 <li><a href="#Data">Data</a>
105 <li><a href="#Data_20Line_20display">Data Line display</a>
106 <li><a href="#Data_20Series_20Colors">Data Series Colors</a>
107 <li><a href="#Debugging">Debugging</a>
108 <li><a href="#Deprecated">Deprecated</a>
109 <li><a href="#Error_20Bars">Error Bars</a>
110 <li><a href="#Grid">Grid</a>
111 <li><a href="#Interactive_20Elements">Interactive Elements</a>
112 <li><a href="#Legend">Legend</a>
113 <li><a href="#Overall_20display">Overall display</a>
114 <li><a href="#Range_20Selector">Range Selector</a>
115 <li><a href="#Rolling_20Averages">Rolling Averages</a>
116 <li><a href="#Series">Series</a>
117 <li><a href="#Value_20display_2Fformatting">Value display/formatting</a>
118</ul></div></div>
119
120<div id='content' class='col-lg-9'>
121<h2>Options Reference</h2>
122<p>Dygraphs tries to do a good job of displaying your data
123 without any further configuration. But inevitably,
124 you’re going to want to tinker. Dygraphs provides a rich set of options
125 for configuring its display and behaviour.</p>
126
127<a name="usage"></a><h3>Usage</h3>
128<p>You specify options in the third parameter to the dygraphs constructor:</p>
129<pre>g = new Dygraph(div,
130 data,
131 {
132 option1: value1,
133 option2: value2,
134 ...
135 });
136</pre>
137
138<p>After you've created a Dygraph, you can change an option by calling the
139 <code>updateOptions</code> method:</p>
140<pre>g.updateOptions({
141 new_option1: value1,
142 new_option2: value2
143 });
144</pre>
145
146<p>Some options can be set on a per-axis and per-series basis.
147 See the docs on <a href="per-axis.html">per-axis and per-series options</a>
148 to learn how to do this. The options which may be set in this way
149 are marked as such on this page.</p>
150
151<p>For options which are functions (e.g. callbacks and formatters),
152 the value of <code>this</code> is set to the Dygraph object.</p>
153
154<p><strong>Note:</strong> tests marked with ⚠ access external resources,
155 such as Google’s jsapi.</p>
156
157<p>And, without further ado, here's the complete list of options:</p>
158
159<a name="Annotations"></a><h3>Annotations</h3>
160
161 <div class='option'><p>
162 <a name="annotationClickHandler"></a><b>annotationClickHandler</b>
163 <a class="link" href="#annotationClickHandler">#</a>
164 </p><p>
165 If provided, this function is called whenever the user clicks on an annotation.
166 </p><p>
167 <i>Type: function(annotation, point, dygraph, event)</i><br />
168 </p><div class='parameters'><table>
169<tr><th>annotation:</th><td>the annotation left</td></tr>
170<tr><th>point:</th><td>the point associated with the annotation</td></tr>
171<tr><th>dygraph:</th><td>the reference graph</td></tr>
172<tr><th>event:</th><td>the mouse event</td></tr>
173 </table></div><p>
174 <i>Default: null</i>
175 </p><table class="gallerylinks">
176 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/annotations">annotations</a></td></tr>
177 <tr><th>Other Examples:</th><td><a href="tests/annotation.html">annotation</a></td></tr>
178 </table></div>
179
180 <div class='option'><p>
181 <a name="annotationDblClickHandler"></a><b>annotationDblClickHandler</b>
182 <a class="link" href="#annotationDblClickHandler">#</a>
183 </p><p>
184 If provided, this function is called whenever the user double-clicks on an annotation.
185 </p><p>
186 <i>Type: function(annotation, point, dygraph, event)</i><br />
187 </p><div class='parameters'><table>
188<tr><th>annotation:</th><td>the annotation left</td></tr>
189<tr><th>point:</th><td>the point associated with the annotation</td></tr>
190<tr><th>dygraph:</th><td>the reference graph</td></tr>
191<tr><th>event:</th><td>the mouse event</td></tr>
192 </table></div><p>
193 <i>Default: null</i>
194 </p><table class="gallerylinks">
195 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/annotations">annotations</a></td></tr>
196 <tr><th>Other Examples:</th><td><a href="tests/annotation.html">annotation</a></td></tr>
197 </table></div>
198
199 <div class='option'><p>
200 <a name="annotationMouseOutHandler"></a><b>annotationMouseOutHandler</b>
201 <a class="link" href="#annotationMouseOutHandler">#</a>
202 </p><p>
203 If provided, this function is called whenever the user mouses out of an annotation.
204 </p><p>
205 <i>Type: function(annotation, point, dygraph, event)</i><br />
206 </p><div class='parameters'><table>
207<tr><th>annotation:</th><td>the annotation left</td></tr>
208<tr><th>point:</th><td>the point associated with the annotation</td></tr>
209<tr><th>dygraph:</th><td>the reference graph</td></tr>
210<tr><th>event:</th><td>the mouse event</td></tr>
211 </table></div><p>
212 <i>Default: null</i>
213 </p><table class="gallerylinks">
214 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/annotations">annotations</a></td></tr>
215 <tr><th>Other Examples:</th><td><a href="tests/annotation.html">annotation</a></td></tr>
216 </table></div>
217
218 <div class='option'><p>
219 <a name="annotationMouseOverHandler"></a><b>annotationMouseOverHandler</b>
220 <a class="link" href="#annotationMouseOverHandler">#</a>
221 </p><p>
222 If provided, this function is called whenever the user mouses over an annotation.
223 </p><p>
224 <i>Type: function(annotation, point, dygraph, event)</i><br />
225 <i>Default: null</i>
226 </p><table class="gallerylinks">
227 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/annotations">annotations</a></td></tr>
228 <tr><th>Other Examples:</th><td><a href="tests/annotation.html">annotation</a></td></tr>
229 </table></div>
230
231 <div class='option'><p>
232 <a name="displayAnnotations"></a><b>displayAnnotations</b>
233 <a class="link" href="#displayAnnotations">#</a>
234 </p><p>
235 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.
236 </p><p>
237 <i>Type: boolean</i><br />
238 <i>Default: false</i>
239 </p><table class="gallerylinks">
240 <tr><th>Gallery Samples:</th><td><font color="#9999FF" title="inactive">annotations-gviz</font></td></tr>
241 <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>
242 </table></div>
243<a name="Axis_20display"></a><h3>Axis display</h3>
244
245 <div class='option'><p>
246 <a name="axis"></a><b>axis</b>
247 <a class="link" href="#axis">#</a>
248 </p><p>
249 Set to either 'y1' or 'y2' to assign a series to a y-axis (primary or secondary). Must be set per-series.
250 </p><p>
251 <i>Type: string</i><br />
252 <i>Default: (none)</i>
253 </p><table class="gallerylinks">
254 <tr><th>Gallery Samples:</th><td><font color="#9999FF" title="inactive">two-axes</font></td></tr>
255 <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>
256 </table></div>
257
258 <div class='option'><p>
259 <a name="axisLabelFontSize"></a><b>axisLabelFontSize</b>
260 <a class="link" href="#axisLabelFontSize">#</a>
261 </p><p>
262 Size of the font (in pixels) to use in the axis labels, both x- and y-axis.
263 </p><p>
264 <i>Type: integer</i><br />
265 <i>Default: 14</i>
266 </p><table class="gallerylinks">
267 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
268 <tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
269 </table></div>
270
271 <div class='option'><p>
272 <a name="axisLabelFormatter"></a><b>axisLabelFormatter</b>
273 <a class="link" href="#axisLabelFormatter">#</a>
274 </p><p>
275 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.
276 </p><p>
277 <i>Type: function(number_or_Date, granularity, opts, dygraph)</i><br />
278 </p><div class='parameters'><table>
279<tr><th>number_or_Date:</th><td>Either a number (for a numeric axis) or a Date object (for a date axis)</td></tr>
280<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>
281<tr><th>opts:</th><td>a function which provides access to various options on the dygraph, e.g. opts('labelsKMB').</td></tr>
282<tr><th>dygraph:</th><td>the referenced graph</td></tr>
283 </table></div><p>
284 <i>Default: Depends on the data type</i>
285 </p><table class="gallerylinks">
286 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
287 <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>
288 </table></div>
289
290 <div class='option'><p>
291 <a name="axisLabelWidth"></a><b>axisLabelWidth</b>
292 <a class="link" href="#axisLabelWidth">#</a>
293 </p><p>
294 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.
295 </p><p>
296 <i>Type: integer</i><br />
297 <i>Default: 50 (y-axis), 60 (x-axis)</i>
298 </p><table class="gallerylinks">
299 <tr><th>Gallery Samples:</th><td><font color="#9999FF" title="inactive">two-axes</font></td></tr>
300 <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>
301 </table></div>
302
303 <div class='option'><p>
304 <a name="axisLineColor"></a><b>axisLineColor</b>
305 <a class="link" href="#axisLineColor">#</a>
306 </p><p>
307 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)'.
308 </p><p>
309 <i>Type: string</i><br />
310 <i>Default: black</i>
311 </p><table class="gallerylinks">
312 <tr><th>Gallery Samples:</th><td><font color="#9999FF" title="inactive">demo</font></td></tr>
313 <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>
314 </table></div>
315
316 <div class='option'><p>
317 <a name="axisLineWidth"></a><b>axisLineWidth</b>
318 <a class="link" href="#axisLineWidth">#</a>
319 </p><p>
320 Thickness (in pixels) of the x- and y-axis lines.
321 </p><p>
322 <i>Type: float</i><br />
323 <i>Default: 0.3</i>
324 </p><table class="gallerylinks">
325 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
326 <tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
327 </table></div>
328
329 <div class='option'><p>
330 <a name="axisTickSize"></a><b>axisTickSize</b>
331 <a class="link" href="#axisTickSize">#</a>
332 </p><p>
333 The size of the line to display next to each tick mark on x- or y-axes.
334 </p><p>
335 <i>Type: number</i><br />
336 <i>Default: 3.0</i>
337 </p><table class="gallerylinks">
338 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
339 <tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
340 </table></div>
341
342 <div class='option'><p>
343 <a name="dateWindow"></a><b>dateWindow</b>
344 <a class="link" href="#dateWindow">#</a>
345 </p><p>
346 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.
347 </p><p>
348 <i>Type: Array of two numbers</i><br />
349 <i>Default: Full range of the input is shown</i>
350 </p><table class="gallerylinks">
351 <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>
352 <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>
353 </table></div>
354
355 <div class='option'><p>
356 <a name="drawAxesAtZero"></a><b>drawAxesAtZero</b>
357 <a class="link" href="#drawAxesAtZero">#</a>
358 </p><p>
359 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.
360 </p><p>
361 <i>Type: boolean</i><br />
362 <i>Default: false</i>
363 </p><table class="gallerylinks">
364 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/linear-regression">linear-regression</a></td></tr>
365 <tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
366 </table></div>
367
368 <div class='option'><p>
369 <a name="drawAxis"></a><b>drawAxis</b>
370 <a class="link" href="#drawAxis">#</a>
371 </p><p>
372 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.
373 </p><p>
374 <i>Type: boolean</i><br />
375 <i>Default: true for x and y, false for y2</i>
376 </p><table class="gallerylinks">
377 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/drawing">drawing</a></td></tr>
378 <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>
379 </table></div>
380
381 <div class='option'><p>
382 <a name="includeZero"></a><b>includeZero</b>
383 <a class="link" href="#includeZero">#</a>
384 </p><p>
385 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
386 </p><p>
387 <i>Type: boolean</i><br />
388 <i>Default: false</i>
389 </p><table class="gallerylinks">
390 <tr><th>Gallery Samples:</th><td><font color="#9999FF" title="inactive">no-range</font></td></tr>
391 <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>
392 </table></div>
393
394 <div class='option'><p>
395 <a name="independentTicks"></a><b>independentTicks</b>
396 <a class="link" href="#independentTicks">#</a>
397 </p><p>
398 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.
399 </p><p>
400 <i>Type: boolean</i><br />
401 <i>Default: true for y, false for y2</i>
402 </p><table class="gallerylinks">
403 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
404 <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>
405 </table></div>
406
407 <div class='option'><p>
408 <a name="labelsUTC"></a><b>labelsUTC</b>
409 <a class="link" href="#labelsUTC">#</a>
410 </p><p>
411 Show date/time labels according to UTC (instead of local time).
412 </p><p>
413 <i>Type: boolean</i><br />
414 <i>Default: false</i>
415 </p><table class="gallerylinks">
416 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
417 <tr><th>Other Examples:</th><td><a href="tests/drawing.html">drawing</a>; <a href="tests/labelsDateUTC.html">labelsDateUTC</a></td></tr>
418 </table></div>
419
420 <div class='option'><p>
421 <a name="logscale"></a><b>logscale</b>
422 <a class="link" href="#logscale">#</a>
423 </p><p>
424 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.
425
426 Not compatible with showZero. connectSeparatedPoints is ignored. This is ignored for date-based x-axes.
427 </p><p>
428 <i>Type: boolean</i><br />
429 <i>Default: false</i>
430 </p><table class="gallerylinks">
431 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/stock">stock</a></td></tr>
432 <tr><th>Other Examples:</th><td><a href="tests/logscale.html">logscale</a>; <a href="tests/stock.html">stock</a></td></tr>
433 </table></div>
434
435 <div class='option'><p>
436 <a name="panEdgeFraction"></a><b>panEdgeFraction</b>
437 <a class="link" href="#panEdgeFraction">#</a>
438 </p><p>
439 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.
440 </p><p>
441 <i>Type: float</i><br />
442 <i>Default: null</i>
443 </p><table class="gallerylinks">
444 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
445 <tr><th>Other Examples:</th><td><a href="tests/zoom.html">zoom</a></td></tr>
446 </table></div>
447
448 <div class='option'><p>
449 <a name="pixelsPerLabel"></a><b>pixelsPerLabel</b>
450 <a class="link" href="#pixelsPerLabel">#</a>
451 </p><p>
452 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.
453 </p><p>
454 <i>Type: integer</i><br />
455 <i>Default: 70 (x-axis) or 30 (y-axes)</i>
456 </p><table class="gallerylinks">
457 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
458 <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>
459 </table></div>
460
461 <div class='option'><p>
462 <a name="ticker"></a><b>ticker</b>
463 <a class="link" href="#ticker">#</a>
464 </p><p>
465 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.
466 </p><p>
467 <i>Type: function(min, max, pixels, opts, dygraph, vals) → [{v: …, label: …}, …]</i><br />
468 </p><div class='parameters'><table>
469<tr><th>min:</th><td></td></tr>
470<tr><th>max:</th><td></td></tr>
471<tr><th>pixels:</th><td></td></tr>
472<tr><th>opts:</th><td></td></tr>
473<tr><th>dygraph:</th><td>the reference graph</td></tr>
474<tr><th>vals:</th><td></td></tr>
475 </table></div><p>
476 <i>Default: Dygraph.dateTicker or Dygraph.numericTicks</i>
477 </p><table class="gallerylinks">
478 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
479 <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>
480 </table></div>
481
482 <div class='option'><p>
483 <a name="valueRange"></a><b>valueRange</b>
484 <a class="link" href="#valueRange">#</a>
485 </p><p>
486 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)
487 </p><p>
488 <i>Type: Array of two numbers</i><br />
489 <i>Default: Full range of the input is shown</i>
490 </p><table class="gallerylinks">
491 <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>
492 <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>
493 </table></div>
494
495 <div class='option'><p>
496 <a name="xAxisHeight"></a><b>xAxisHeight</b>
497 <a class="link" href="#xAxisHeight">#</a>
498 </p><p>
499 Height, in pixels, of the x-axis. If not set explicitly, this is computed based on axisLabelFontSize and axisTickSize.
500 </p><p>
501 <i>Type: integer</i><br />
502 <i>Default: (null)</i>
503 </p><table class="gallerylinks">
504 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
505 <tr><th>Other Examples:</th><td><a href="tests/range-selector.html">range-selector</a></td></tr>
506 </table></div>
507
508 <div class='option'><p>
509 <a name="xRangePad"></a><b>xRangePad</b>
510 <a class="link" href="#xRangePad">#</a>
511 </p><p>
512 Add the specified amount of extra space (in pixels) around the X-axis value range to ensure points at the edges remain visible.
513 </p><p>
514 <i>Type: float</i><br />
515 <i>Default: 0</i>
516 </p><table class="gallerylinks">
517 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
518 <tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
519 </table></div>
520
521 <div class='option'><p>
522 <a name="yRangePad"></a><b>yRangePad</b>
523 <a class="link" href="#yRangePad">#</a>
524 </p><p>
525 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.
526 </p><p>
527 <i>Type: float</i><br />
528 <i>Default: null</i>
529 </p><table class="gallerylinks">
530 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
531 <tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
532 </table></div>
533<a name="CSV_20parsing"></a><h3>CSV parsing</h3>
534
535 <div class='option'><p>
536 <a name="customBars"></a><b>customBars</b>
537 <a class="link" href="#customBars">#</a>
538 </p><p>
539 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.
540 </p><p>
541 <i>Type: boolean</i><br />
542 <i>Default: false</i>
543 </p><table class="gallerylinks">
544 <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>
545 <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>
546 </table></div>
547
548 <div class='option'><p>
549 <a name="delimiter"></a><b>delimiter</b>
550 <a class="link" href="#delimiter">#</a>
551 </p><p>
552 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.
553 </p><p>
554 <i>Type: string</i><br />
555 <i>Default: ,</i>
556 </p><table class="gallerylinks">
557 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
558 <tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
559 </table></div>
560
561 <div class='option'><p>
562 <a name="errorBars"></a><b>errorBars</b>
563 <a class="link" href="#errorBars">#</a>
564 </p><p>
565 Does the data contain standard deviations? Setting this to true alters the input format (see above).
566 </p><p>
567 <i>Type: boolean</i><br />
568 <i>Default: false</i>
569 </p><table class="gallerylinks">
570 <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>
571 <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>
572 </table></div>
573
574 <div class='option'><p>
575 <a name="fractions"></a><b>fractions</b>
576 <a class="link" href="#fractions">#</a>
577 </p><p>
578 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).
579 </p><p>
580 <i>Type: boolean</i><br />
581 <i>Default: false</i>
582 </p><table class="gallerylinks">
583 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
584 <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>
585 </table></div>
586
587 <div class='option'><p>
588 <a name="xValueParser"></a><b>xValueParser</b>
589 <a class="link" href="#xValueParser">#</a>
590 </p><p>
591 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.
592 </p><p>
593 <i>Type: function(str) -> number</i><br />
594 <i>Default: parseFloat() or Date.parse()*</i>
595 </p><table class="gallerylinks">
596 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
597 <tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
598 </table></div>
599<a name="Callbacks"></a><h3>Callbacks</h3>
600
601 <div class='option'><p>
602 <a name="clickCallback"></a><b>clickCallback</b>
603 <a class="link" href="#clickCallback">#</a>
604 </p><p>
605 A function to call when the canvas is clicked.
606 </p><p>
607 <i>Type: function(e, x, points)</i><br />
608 </p><div class='parameters'><table>
609<tr><th>e:</th><td>The event object for the click</td></tr>
610<tr><th>x:</th><td>The x value that was clicked (for dates, this is milliseconds since epoch)</td></tr>
611<tr><th>points:</th><td>The closest points along that date. See <a href='#point_properties'>Point properties</a> for details.</td></tr>
612 </table></div><p>
613 <i>Default: null</i>
614 </p><table class="gallerylinks">
615 <tr><th>Gallery Samples:</th><td><font color="#9999FF" title="inactive">callbacks</font>; <a href="gallery/#g/highlighted-series">highlighted-series</a></td></tr>
616 <tr><th>Other Examples:</th><td><a href="tests/callback.html">callback</a></td></tr>
617 </table></div>
618
619 <div class='option'><p>
620 <a name="drawCallback"></a><b>drawCallback</b>
621 <a class="link" href="#drawCallback">#</a>
622 </p><p>
623 When set, this callback gets called every time the dygraph is drawn. This includes the initial draw, after zooming and repeatedly while panning.
624 </p><p>
625 <i>Type: function(dygraph, is_initial)</i><br />
626 </p><div class='parameters'><table>
627<tr><th>dygraph:</th><td>The graph being drawn</td></tr>
628<tr><th>is_initial:</th><td>True if this is the initial draw, false for subsequent draws.</td></tr>
629 </table></div><p>
630 <i>Default: null</i>
631 </p><table class="gallerylinks">
632 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/annotations">annotations</a>; <font color="#9999FF" title="inactive">callbacks</font></td></tr>
633 <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>
634 </table></div>
635
636 <div class='option'><p>
637 <a name="highlightCallback"></a><b>highlightCallback</b>
638 <a class="link" href="#highlightCallback">#</a>
639 </p><p>
640 When set, this callback gets called every time a new point is highlighted.
641 </p><p>
642 <i>Type: function(event, x, points, row, seriesName)</i><br />
643 </p><div class='parameters'><table>
644<tr><th>event:</th><td>the JavaScript mousemove event</td></tr>
645<tr><th>x:</th><td>the x-coordinate of the highlighted points</td></tr>
646<tr><th>points:</th><td>an array of highlighted points: <code>[ {name: 'series', yval: y-value}, … ]</code></td></tr>
647<tr><th>row:</th><td>integer index of the highlighted row in the data table, starting from 0</td></tr>
648<tr><th>seriesName:</th><td>name of the highlighted series, only present if highlightSeriesOpts is set.</td></tr>
649 </table></div><p>
650 <i>Default: null</i>
651 </p><table class="gallerylinks">
652 <tr><th>Gallery Samples:</th><td><font color="#9999FF" title="inactive">callbacks</font></td></tr>
653 <tr><th>Other Examples:</th><td><a href="tests/callback.html">callback</a></td></tr>
654 </table></div>
655
656 <div class='option'><p>
657 <a name="pointClickCallback"></a><b>pointClickCallback</b>
658 <a class="link" href="#pointClickCallback">#</a>
659 </p><p>
660 A function to call when a data point is clicked. and the point that was clicked.
661 </p><p>
662 <i>Type: function(e, point)</i><br />
663 </p><div class='parameters'><table>
664<tr><th>e:</th><td>the event object for the click</td></tr>
665<tr><th>point:</th><td>the point that was clicked See <a href='#point_properties'>Point properties</a> for details</td></tr>
666 </table></div><p>
667 <i>Default: null</i>
668 </p><table class="gallerylinks">
669 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/annotations">annotations</a>; <font color="#9999FF" title="inactive">callbacks</font></td></tr>
670 <tr><th>Other Examples:</th><td><a href="tests/annotation.html">annotation</a>; <a href="tests/callback.html">callback</a></td></tr>
671 </table></div>
672
673 <div class='option'><p>
674 <a name="underlayCallback"></a><b>underlayCallback</b>
675 <a class="link" href="#underlayCallback">#</a>
676 </p><p>
677 When set, this callback gets called before the chart is drawn. It details on how to use this.
678 </p><p>
679 <i>Type: function(context, area, dygraph)</i><br />
680 </p><div class='parameters'><table>
681<tr><th>context:</th><td>the canvas drawing context on which to draw</td></tr>
682<tr><th>area:</th><td>An object with {x,y,w,h} properties describing the drawing area.</td></tr>
683<tr><th>dygraph:</th><td>the reference graph</td></tr>
684 </table></div><p>
685 <i>Default: null</i>
686 </p><table class="gallerylinks">
687 <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>
688 <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>
689 </table></div>
690
691 <div class='option'><p>
692 <a name="unhighlightCallback"></a><b>unhighlightCallback</b>
693 <a class="link" href="#unhighlightCallback">#</a>
694 </p><p>
695 When set, this callback gets called every time the user stops highlighting any point by mousing out of the graph.
696 </p><p>
697 <i>Type: function(event)</i><br />
698 </p><div class='parameters'><table>
699<tr><th>event:</th><td>the mouse event</td></tr>
700 </table></div><p>
701 <i>Default: null</i>
702 </p><table class="gallerylinks">
703 <tr><th>Gallery Samples:</th><td><font color="#9999FF" title="inactive">callbacks</font></td></tr>
704 <tr><th>Other Examples:</th><td><a href="tests/callback.html">callback</a></td></tr>
705 </table></div>
706
707 <div class='option'><p>
708 <a name="zoomCallback"></a><b>zoomCallback</b>
709 <a class="link" href="#zoomCallback">#</a>
710 </p><p>
711 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).
712 </p><p>
713 <i>Type: function(minDate, maxDate, yRanges)</i><br />
714 </p><div class='parameters'><table>
715<tr><th>minDate:</th><td>milliseconds since epoch</td></tr>
716<tr><th>maxDate:</th><td>milliseconds since epoch.</td></tr>
717<tr><th>yRanges:</th><td>is an array of [bottom, top] pairs, one for each y-axis.</td></tr>
718 </table></div><p>
719 <i>Default: null</i>
720 </p><table class="gallerylinks">
721 <tr><th>Gallery Samples:</th><td><font color="#9999FF" title="inactive">callbacks</font></td></tr>
722 <tr><th>Other Examples:</th><td><a href="tests/callback.html">callback</a>; <a href="tests/zoom.html">zoom</a></td></tr>
723 </table></div>
724<a name="Chart_20labels"></a><h3>Chart labels</h3>
725
726 <div class='option'><p>
727 <a name="axisLabelWidth"></a><b>axisLabelWidth</b>
728 <a class="link" href="#axisLabelWidth">#</a>
729 </p><p>
730 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.
731 </p><p>
732 <i>Type: integer</i><br />
733 <i>Default: 50 (y-axis), 60 (x-axis)</i>
734 </p><table class="gallerylinks">
735 <tr><th>Gallery Samples:</th><td><font color="#9999FF" title="inactive">two-axes</font></td></tr>
736 <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>
737 </table></div>
738
739 <div class='option'><p>
740 <a name="title"></a><b>title</b>
741 <a class="link" href="#title">#</a>
742 </p><p>
743 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.
744 </p><p>
745 <i>Type: string</i><br />
746 <i>Default: null</i>
747 </p><table class="gallerylinks">
748 <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>
749 <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>
750 </table></div>
751
752 <div class='option'><p>
753 <a name="titleHeight"></a><b>titleHeight</b>
754 <a class="link" href="#titleHeight">#</a>
755 </p><p>
756 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.
757 </p><p>
758 <i>Type: integer</i><br />
759 <i>Default: 18</i>
760 </p><table class="gallerylinks">
761 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/styled-chart-labels">styled-chart-labels</a></td></tr>
762 <tr><th>Other Examples:</th><td><a href="tests/styled-chart-labels.html">styled-chart-labels</a></td></tr>
763 </table></div>
764
765 <div class='option'><p>
766 <a name="xLabelHeight"></a><b>xLabelHeight</b>
767 <a class="link" href="#xLabelHeight">#</a>
768 </p><p>
769 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.
770 </p><p>
771 <i>Type: integer</i><br />
772 <i>Default: 18</i>
773 </p><table class="gallerylinks">
774 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
775 <tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
776 </table></div>
777
778 <div class='option'><p>
779 <a name="xlabel"></a><b>xlabel</b>
780 <a class="link" href="#xlabel">#</a>
781 </p><p>
782 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.
783 </p><p>
784 <i>Type: string</i><br />
785 <i>Default: null</i>
786 </p><table class="gallerylinks">
787 <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>
788 <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>
789 </table></div>
790
791 <div class='option'><p>
792 <a name="y2label"></a><b>y2label</b>
793 <a class="link" href="#y2label">#</a>
794 </p><p>
795 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.
796 </p><p>
797 <i>Type: string</i><br />
798 <i>Default: null</i>
799 </p><table class="gallerylinks">
800 <tr><th>Gallery Samples:</th><td><font color="#9999FF" title="inactive">two-axes</font></td></tr>
801 <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>
802 </table></div>
803
804 <div class='option'><p>
805 <a name="yLabelWidth"></a><b>yLabelWidth</b>
806 <a class="link" href="#yLabelWidth">#</a>
807 </p><p>
808 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.
809 </p><p>
810 <i>Type: integer</i><br />
811 <i>Default: 18</i>
812 </p><table class="gallerylinks">
813 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
814 <tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
815 </table></div>
816
817 <div class='option'><p>
818 <a name="ylabel"></a><b>ylabel</b>
819 <a class="link" href="#ylabel">#</a>
820 </p><p>
821 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.
822 </p><p>
823 <i>Type: string</i><br />
824 <i>Default: null</i>
825 </p><table class="gallerylinks">
826 <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>
827 <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>
828 </table></div>
829<a name="Configuration"></a><h3>Configuration</h3>
830
831 <div class='option'><p>
832 <a name="axes"></a><b>axes</b>
833 <a class="link" href="#axes">#</a>
834 </p><p>
835 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>.
836 </p><p>
837 <i>Type: Object</i><br />
838 <i>Default: null</i>
839 </p><table class="gallerylinks">
840 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/drawing">drawing</a>; <font color="#9999FF" title="inactive">two-axes</font></td></tr>
841 <tr><th>Other Examples:</th><td><a href="tests/customLabel.html">customLabel</a>; <a href="tests/customLabelCss3.html">customLabelCss3</a>; <a href="tests/drawing.html">drawing</a>; <a href="tests/grid_dot.html">grid_dot</a>; <a href="tests/hairlines.html">hairlines</a>; <a href="tests/label_v.html">label_v</a>; <a href="tests/labelsKMB.html">labelsKMB</a>; <a href="tests/logscale.html">logscale</a>; <a href="tests/multi-scale.html">multi-scale</a>; <a href="tests/plotters.html">plotters</a>; <a href="tests/range-selector.html">range-selector</a>; <a href="tests/spacing.html">spacing</a>; <a href="tests/two-axes.html">two-axes</a>; <a href="tests/two-axes-vr.html">two-axes-vr</a>; <a href="tests/unboxed-spark.html">unboxed-spark</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>
842 </table></div>
843
844 <div class='option'><p>
845 <a name="plugins"></a><b>plugins</b>
846 <a class="link" href="#plugins">#</a>
847 </p><p>
848 Defines per-graph plugins. Useful for per-graph customization
849 </p><p>
850 <i>Type: Array of plugins</i><br />
851 <i>Default: []</i>
852 </p><table class="gallerylinks">
853 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
854 <tr><th>Other Examples:</th><td><a href="tests/crosshair.html">crosshair</a>; <a href="tests/hairlines.html">hairlines</a>; <a href="tests/old-yrange-behavior.html">old-yrange-behavior</a>; <a href="tests/plugins.html">plugins</a>; <a href="tests/straw-broom.html">straw-broom</a></td></tr>
855 </table></div>
856<a name="Data"></a><h3>Data</h3>
857
858 <div class='option'><p>
859 <a name="dataHandler"></a><b>dataHandler</b>
860 <a class="link" href="#dataHandler">#</a>
861 </p><p>
862 Custom DataHandler. This is an advanced customisation. See <a href='datahandler-proposal.pdf'><tt>docs/datahandler-proposal.pdf</tt></a>.
863 </p><p>
864 <i>Type: Dygraph.DataHandler</i><br />
865 <i>Default: (depends on data)</i>
866 </p><table class="gallerylinks">
867 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
868 <tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
869 </table></div>
870
871 <div class='option'><p>
872 <a name="file"></a><b>file</b>
873 <a class="link" href="#file">#</a>
874 </p><p>
875 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 <a href='data.html'>Data Formats</a> page.
876 </p><p>
877 <i>Type: string (URL of CSV or CSV), GViz DataTable or 2D Array</i><br />
878 <i>Default: (set when constructed)</i>
879 </p><table class="gallerylinks">
880 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/drawing">drawing</a></td></tr>
881 <tr><th>Other Examples:</th><td><a href="tests/drawing.html">drawing</a>; <a href="tests/dygraph-many-points-benchmark.html">dygraph-many-points-benchmark</a>; <a href="tests/hairlines.html">hairlines</a></td></tr>
882 </table></div>
883<a name="Data_20Line_20display"></a><h3>Data Line display</h3>
884
885 <div class='option'><p>
886 <a name="connectSeparatedPoints"></a><b>connectSeparatedPoints</b>
887 <a class="link" href="#connectSeparatedPoints">#</a>
888 </p><p>
889 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.
890 </p><p>
891 <i>Type: boolean</i><br />
892 <i>Default: false</i>
893 </p><table class="gallerylinks">
894 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/independent-series">independent-series</a></td></tr>
895 <tr><th>Other Examples:</th><td><a href="tests/connect-separated.html">connect-separated</a>; <a href="tests/independent-series.html">independent-series</a>; <a href="tests/missing-data.html">missing-data</a></td></tr>
896 </table></div>
897
898 <div class='option'><p>
899 <a name="drawGapEdgePoints"></a><b>drawGapEdgePoints</b>
900 <a class="link" href="#drawGapEdgePoints">#</a>
901 </p><p>
902 Draw points at the edges of gaps in the data. This improves visibility of small data segments or other data irregularities.
903 </p><p>
904 <i>Type: boolean</i><br />
905 <i>Default: false</i>
906 </p><table class="gallerylinks">
907 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
908 <tr><th>Other Examples:</th><td><a href="tests/isolated-points.html">isolated-points</a></td></tr>
909 </table></div>
910
911 <div class='option'><p>
912 <a name="drawHighlightPointCallback"></a><b>drawHighlightPointCallback</b>
913 <a class="link" href="#drawHighlightPointCallback">#</a>
914 </p><p>
915 Draw a custom item when a point is highlighted. Default is a small dot matching the series color. This method should constrain drawing to within pointSize pixels from (cx, cy) Also see <a href='#drawPointCallback'>drawPointCallback</a>
916 </p><p>
917 <i>Type: function(g, seriesName, canvasContext, cx, cy, color, pointSize, idx)</i><br />
918 </p><div class='parameters'><table>
919<tr><th>g:</th><td>the reference graph</td></tr>
920<tr><th>seriesName:</th><td>the name of the series</td></tr>
921<tr><th>canvasContext:</th><td>the canvas to draw on</td></tr>
922<tr><th>cx:</th><td>center x coordinate</td></tr>
923<tr><th>cy:</th><td>center y coordinate</td></tr>
924<tr><th>color:</th><td>series color</td></tr>
925<tr><th>pointSize:</th><td>the radius of the image.</td></tr>
926<tr><th>idx:</th><td>the row-index of the point in the data.</td></tr>
927 </table></div><p>
928 <i>Default: null</i>
929 </p><table class="gallerylinks">
930 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
931 <tr><th>Other Examples:</th><td><a href="tests/custom-circles.html">custom-circles</a></td></tr>
932 </table></div>
933
934 <div class='option'><p>
935 <a name="drawPointCallback"></a><b>drawPointCallback</b>
936 <a class="link" href="#drawPointCallback">#</a>
937 </p><p>
938 Draw a custom item when drawPoints is enabled. Default is a small dot matching the series color. This method should constrain drawing to within pointSize pixels from (cx, cy). Also see <a href='#drawHighlightPointCallback'>drawHighlightPointCallback</a>
939 </p><p>
940 <i>Type: function(g, seriesName, canvasContext, cx, cy, color, pointSize, idx)</i><br />
941 </p><div class='parameters'><table>
942<tr><th>g:</th><td>the reference graph</td></tr>
943<tr><th>seriesName:</th><td>the name of the series</td></tr>
944<tr><th>canvasContext:</th><td>the canvas to draw on</td></tr>
945<tr><th>cx:</th><td>center x coordinate</td></tr>
946<tr><th>cy:</th><td>center y coordinate</td></tr>
947<tr><th>color:</th><td>series color</td></tr>
948<tr><th>pointSize:</th><td>the radius of the image.</td></tr>
949<tr><th>idx:</th><td>the row-index of the point in the data.</td></tr>
950 </table></div><p>
951 <i>Default: null</i>
952 </p><table class="gallerylinks">
953 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
954 <tr><th>Other Examples:</th><td><a href="tests/custom-circles.html">custom-circles</a></td></tr>
955 </table></div>
956
957 <div class='option'><p>
958 <a name="drawPoints"></a><b>drawPoints</b>
959 <a class="link" href="#drawPoints">#</a>
960 </p><p>
961 Draw a small dot at each point, in addition to a line going through the point. This makes the individual data points easier to see, but can increase visual clutter in the chart. The small dot can be replaced with a custom rendering by supplying a <a href='#drawPointCallback'>drawPointCallback</a>.
962 </p><p>
963 <i>Type: boolean</i><br />
964 <i>Default: false</i>
965 </p><table class="gallerylinks">
966 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/dynamic-update">dynamic-update</a>; <a href="gallery/#g/independent-series">independent-series</a>; <a href="gallery/#g/interaction">interaction</a>; <a href="gallery/#g/linear-regression">linear-regression</a>; <a href="gallery/#g/per-series">per-series</a></td></tr>
967 <tr><th>Other Examples:</th><td><a href="tests/custom-circles.html">custom-circles</a>; <a href="tests/draw-points.html">draw-points</a>; <a href="tests/dynamic-update.html">dynamic-update</a>; <a href="tests/independent-series.html">independent-series</a>; <a href="tests/interaction.html">interaction</a>; <a href="tests/linear-regression.html">linear-regression</a>; <a href="tests/linear-regression-addseries.html">linear-regression-addseries</a>; <a href="tests/linear-regression-fractions.html">linear-regression-fractions</a>; <a href="tests/per-series.html">per-series</a>; <a href="tests/smooth-plots.html">smooth-plots</a></td></tr>
968 </table></div>
969
970 <div class='option'><p>
971 <a name="fillGraph"></a><b>fillGraph</b>
972 <a class="link" href="#fillGraph">#</a>
973 </p><p>
974 Should the area underneath the graph be filled? This option is not compatible with <tt>customBars</tt> nor <tt>errorBars</tt>. This may be set on a <a href='per-axis.html'>per-series</a> basis.
975 </p><p>
976 <i>Type: boolean</i><br />
977 <i>Default: false</i>
978 </p><table class="gallerylinks">
979 <tr><th>Gallery Samples:</th><td><font color="#9999FF" title="inactive">two-axes</font></td></tr>
980 <tr><th>Other Examples:</th><td><a href="tests/charting-combinations.html">charting-combinations</a>; <a href="tests/fillGraph.html">fillGraph</a>; <a href="tests/fillGraph-alpha.html">fillGraph-alpha</a>; <a href="tests/range-selector.html">range-selector</a>; <a href="tests/steps.html">steps</a>; <a href="tests/two-axes.html">two-axes</a></td></tr>
981 </table></div>
982
983 <div class='option'><p>
984 <a name="plotter"></a><b>plotter</b>
985 <a class="link" href="#plotter">#</a>
986 </p><p>
987 A function (or array of functions) which plot each data series on the chart. TODO(danvk): more details! May be set per-series.
988 </p><p>
989 <i>Type: array or function</i><br />
990 <i>Default: [DygraphCanvasRenderer.Plotters.fillPlotter, DygraphCanvasRenderer.Plotters.errorPlotter, DygraphCanvasRenderer.Plotters.linePlotter]</i>
991 </p><table class="gallerylinks">
992 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
993 <tr><th>Other Examples:</th><td><a href="tests/plotters.html">plotters</a>; <a href="tests/smooth-plots.html">smooth-plots</a></td></tr>
994 </table></div>
995
996 <div class='option'><p>
997 <a name="pointSize"></a><b>pointSize</b>
998 <a class="link" href="#pointSize">#</a>
999 </p><p>
1000 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.
1001 </p><p>
1002 <i>Type: integer</i><br />
1003 <i>Default: 1</i>
1004 </p><table class="gallerylinks">
1005 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/per-series">per-series</a></td></tr>
1006 <tr><th>Other Examples:</th><td><a href="tests/custom-circles.html">custom-circles</a>; <a href="tests/independent-series.html">independent-series</a>; <a href="tests/isolated-points.html">isolated-points</a>; <a href="tests/linear-regression-fractions.html">linear-regression-fractions</a>; <a href="tests/per-series.html">per-series</a>; <a href="tests/smooth-plots.html">smooth-plots</a></td></tr>
1007 </table></div>
1008
1009 <div class='option'><p>
1010 <a name="stackedGraph"></a><b>stackedGraph</b>
1011 <a class="link" href="#stackedGraph">#</a>
1012 </p><p>
1013 If set, stack series on top of one another rather than drawing them independently. The first series specified in the input data will wind up on top of the chart and the last will be on bottom. NaN values are drawn as white areas without a line on top, see stackedGraphNaNFill for details.
1014 </p><p>
1015 <i>Type: boolean</i><br />
1016 <i>Default: false</i>
1017 </p><table class="gallerylinks">
1018 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/highlighted-series">highlighted-series</a></td></tr>
1019 <tr><th>Other Examples:</th><td><a href="tests/range-selector.html">range-selector</a>; <a href="tests/series-highlight.html">series-highlight</a>; <a href="tests/stacked.html">stacked</a>; <a href="tests/steps.html">steps</a></td></tr>
1020 </table></div>
1021
1022 <div class='option'><p>
1023 <a name="stackedGraphNaNFill"></a><b>stackedGraphNaNFill</b>
1024 <a class="link" href="#stackedGraphNaNFill">#</a>
1025 </p><p>
1026 Controls handling of NaN values inside a stacked graph. NaN values are interpolated/extended for stacking purposes, but the actual point value remains NaN in the legend display. Valid option values are "all" (interpolate internally, repeat leftmost and rightmost value as needed), "inside" (interpolate internally only, use zero outside leftmost and rightmost value), and "none" (treat NaN as zero everywhere).
1027 </p><p>
1028 <i>Type: string</i><br />
1029 <i>Default: all</i>
1030 </p><table class="gallerylinks">
1031 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1032 <tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
1033 </table></div>
1034
1035 <div class='option'><p>
1036 <a name="stepPlot"></a><b>stepPlot</b>
1037 <a class="link" href="#stepPlot">#</a>
1038 </p><p>
1039 When set, display the graph as a step plot instead of a line plot. This option may either be set for the whole graph or for single series.
1040 </p><p>
1041 <i>Type: boolean</i><br />
1042 <i>Default: false</i>
1043 </p><table class="gallerylinks">
1044 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1045 <tr><th>Other Examples:</th><td><a href="tests/charting-combinations.html">charting-combinations</a>; <a href="tests/range-selector.html">range-selector</a>; <a href="tests/steps.html">steps</a></td></tr>
1046 </table></div>
1047
1048 <div class='option'><p>
1049 <a name="strokeBorderColor"></a><b>strokeBorderColor</b>
1050 <a class="link" href="#strokeBorderColor">#</a>
1051 </p><p>
1052 Color for the line border used if strokeBorderWidth is set.
1053 </p><p>
1054 <i>Type: string</i><br />
1055 <i>Default: white</i>
1056 </p><table class="gallerylinks">
1057 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1058 <tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
1059 </table></div>
1060
1061 <div class='option'><p>
1062 <a name="strokeBorderWidth"></a><b>strokeBorderWidth</b>
1063 <a class="link" href="#strokeBorderWidth">#</a>
1064 </p><p>
1065 Draw a border around graph lines to make crossing lines more easily distinguishable. Useful for graphs with many lines.
1066 </p><p>
1067 <i>Type: float</i><br />
1068 <i>Default: null</i>
1069 </p><table class="gallerylinks">
1070 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/highlighted-series">highlighted-series</a></td></tr>
1071 <tr><th>Other Examples:</th><td><a href="tests/custom-circles.html">custom-circles</a>; <a href="tests/series-highlight.html">series-highlight</a></td></tr>
1072 </table></div>
1073
1074 <div class='option'><p>
1075 <a name="strokePattern"></a><b>strokePattern</b>
1076 <a class="link" href="#strokePattern">#</a>
1077 </p><p>
1078 A custom pattern array where the even index is a draw and odd is a space in pixels. If null then it draws a solid line. The array should have a even length as any odd lengthed array could be expressed as a smaller even length array. This is used to create dashed lines.
1079 </p><p>
1080 <i>Type: Array of integers</i><br />
1081 <i>Default: null</i>
1082 </p><table class="gallerylinks">
1083 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1084 <tr><th>Other Examples:</th><td><a href="tests/charting-combinations.html">charting-combinations</a>; <a href="tests/per-series.html">per-series</a>; <a href="tests/plotters.html">plotters</a></td></tr>
1085 </table></div>
1086
1087 <div class='option'><p>
1088 <a name="strokeWidth"></a><b>strokeWidth</b>
1089 <a class="link" href="#strokeWidth">#</a>
1090 </p><p>
1091 The width of the lines connecting data points. This can be used to increase the contrast or some graphs.
1092 </p><p>
1093 <i>Type: float</i><br />
1094 <i>Default: 1.0</i>
1095 </p><table class="gallerylinks">
1096 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/drawing">drawing</a>; <a href="gallery/#g/highlighted-series">highlighted-series</a>; <a href="gallery/#g/linear-regression">linear-regression</a>; <a href="gallery/#g/per-series">per-series</a>; <a href="gallery/#g/styled-chart-labels">styled-chart-labels</a></td></tr>
1097 <tr><th>Other Examples:</th><td><a href="tests/custom-circles.html">custom-circles</a>; <a href="tests/drawing.html">drawing</a>; <a href="tests/grid_dot.html">grid_dot</a>; <a href="tests/layout-options.html">layout-options</a>; <a href="tests/legend-formatter.html">legend-formatter</a>; <a href="tests/linear-regression.html">linear-regression</a>; <a href="tests/linear-regression-addseries.html">linear-regression-addseries</a>; <a href="tests/linear-regression-fractions.html">linear-regression-fractions</a>; <a href="tests/per-series.html">per-series</a>; <a href="tests/plotters.html">plotters</a>; <a href="tests/series-highlight.html">series-highlight</a>; <a href="tests/smooth-plots.html">smooth-plots</a>; <a href="tests/styled-chart-labels.html">styled-chart-labels</a>; <a href="tests/unboxed-spark.html">unboxed-spark</a></td></tr>
1098 </table></div>
1099
1100 <div class='option'><p>
1101 <a name="visibility"></a><b>visibility</b>
1102 <a class="link" href="#visibility">#</a>
1103 </p><p>
1104 Which series should initially be visible? Once the Dygraph has been constructed, you can access and modify the visibility of each series using the <code>visibility</code> and <code>setVisibility</code> methods.
1105 </p><p>
1106 <i>Type: Array of booleans</i><br />
1107 <i>Default: [true, true, ...]</i>
1108 </p><table class="gallerylinks">
1109 <tr><th>Gallery Samples:</th><td><font color="#9999FF" title="inactive">color-visibility</font></td></tr>
1110 <tr><th>Other Examples:</th><td><a href="tests/color-visibility.html">color-visibility</a>; <a href="tests/no-visibility.html">no-visibility</a>; <a href="tests/visibility.html">visibility</a></td></tr>
1111 </table></div>
1112<a name="Data_20Series_20Colors"></a><h3>Data Series Colors</h3>
1113
1114 <div class='option'><p>
1115 <a name="color"></a><b>color</b>
1116 <a class="link" href="#color">#</a>
1117 </p><p>
1118 A per-series color definition. Used in conjunction with, and overrides, the colors option.
1119 </p><p>
1120 <i>Type: string</i><br />
1121 <i>Default: (see description)</i>
1122 </p><table class="gallerylinks">
1123 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/linear-regression">linear-regression</a>; <a href="gallery/#g/link-interaction">link-interaction</a>; <a href="gallery/#g/range-selector">range-selector</a></td></tr>
1124 <tr><th>Other Examples:</th><td><a href="tests/customLabel.html">customLabel</a>; <a href="tests/customLabelCss3.html">customLabelCss3</a>; <a href="tests/independent-series.html">independent-series</a>; <a href="tests/legend-values.html">legend-values</a>; <a href="tests/link-interaction.html">link-interaction</a>; <a href="tests/range-selector.html">range-selector</a>; <a href="tests/smooth-plots.html">smooth-plots</a></td></tr>
1125 </table></div>
1126
1127 <div class='option'><p>
1128 <a name="colorSaturation"></a><b>colorSaturation</b>
1129 <a class="link" href="#colorSaturation">#</a>
1130 </p><p>
1131 If <strong>colors</strong> is not specified, saturation of the automatically-generated data series colors.
1132 </p><p>
1133 <i>Type: float (0.0 - 1.0)</i><br />
1134 <i>Default: 1.0</i>
1135 </p><table class="gallerylinks">
1136 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1137 <tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
1138 </table></div>
1139
1140 <div class='option'><p>
1141 <a name="colorValue"></a><b>colorValue</b>
1142 <a class="link" href="#colorValue">#</a>
1143 </p><p>
1144 If colors is not specified, value of the data series colors, as in hue/saturation/value. (0.0-1.0, default 0.5)
1145 </p><p>
1146 <i>Type: float (0.0 - 1.0)</i><br />
1147 <i>Default: 1.0</i>
1148 </p><table class="gallerylinks">
1149 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/range-selector">range-selector</a></td></tr>
1150 <tr><th>Other Examples:</th><td><a href="tests/range-selector.html">range-selector</a></td></tr>
1151 </table></div>
1152
1153 <div class='option'><p>
1154 <a name="colors"></a><b>colors</b>
1155 <a class="link" href="#colors">#</a>
1156 </p><p>
1157 List of colors for the data series. These can be of the form "#AABBCC" or "rgb(255,100,200)" or "yellow", etc. If not specified, equally-spaced points around a color wheel are used. Overridden by the “color” option.
1158 </p><p>
1159 <i>Type: Array of strings</i><br />
1160 <i>Default: (see description)</i>
1161 </p><table class="gallerylinks">
1162 <tr><th>Gallery Samples:</th><td><font color="#9999FF" title="inactive">color-cycle</font>; <font color="#9999FF" title="inactive">color-visibility</font>; <font color="#9999FF" title="inactive">demo</font></td></tr>
1163 <tr><th>Other Examples:</th><td><a href="tests/century-scale.html">century-scale</a>; <a href="tests/color-cycle.html">color-cycle</a>; <a href="tests/color-visibility.html">color-visibility</a>; <a href="tests/demo.html">demo</a>; <a href="tests/legend-formatter.html">legend-formatter</a>; <a href="tests/plugins.html">plugins</a>; <a href="tests/reverse-y-axis.html">reverse-y-axis</a>; <a href="tests/rtl.html">rtl</a></td></tr>
1164 </table></div>
1165
1166 <div class='option'><p>
1167 <a name="fillAlpha"></a><b>fillAlpha</b>
1168 <a class="link" href="#fillAlpha">#</a>
1169 </p><p>
1170 Custom or sigma-based high/low bands for each series are drawn in the same colour as the series, but with partial transparency. This sets the transparency. A value of 0.0 means that the bands will not be drawn, whereas a value of 1.0 means that the bands will be as dark as the line for the series itself. This can be used to produce chart lines whose thickness varies at each point.
1171 </p><p>
1172 <i>Type: float (0.0 - 1.0)</i><br />
1173 <i>Default: 0.15</i>
1174 </p><table class="gallerylinks">
1175 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/range-selector">range-selector</a></td></tr>
1176 <tr><th>Other Examples:</th><td><a href="tests/fillGraph-alpha.html">fillGraph-alpha</a>; <a href="tests/range-selector.html">range-selector</a></td></tr>
1177 </table></div>
1178<a name="Debugging"></a><h3>Debugging</h3>
1179
1180 <div class='option'><p>
1181 <a name="timingName"></a><b>timingName</b>
1182 <a class="link" href="#timingName">#</a>
1183 </p><p>
1184 Set this option to log timing information. The value of the option will be logged along with the timimg, so that you can distinguish multiple dygraphs on the same page.
1185 </p><p>
1186 <i>Type: string</i><br />
1187 <i>Default: null</i>
1188 </p><table class="gallerylinks">
1189 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1190 <tr><th>Other Examples:</th><td><a href="tests/dygraph-many-points-benchmark.html">dygraph-many-points-benchmark</a></td></tr>
1191 </table></div>
1192<a name="Deprecated"></a><h3>Deprecated</h3>
1193
1194 <div class='option'><p>
1195 <a name="timingName"></a><b>timingName</b>
1196 <a class="link" href="#timingName">#</a>
1197 </p><p>
1198 Set this option to log timing information. The value of the option will be logged along with the timimg, so that you can distinguish multiple dygraphs on the same page.
1199 </p><p>
1200 <i>Type: string</i><br />
1201 <i>Default: null</i>
1202 </p><table class="gallerylinks">
1203 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1204 <tr><th>Other Examples:</th><td><a href="tests/dygraph-many-points-benchmark.html">dygraph-many-points-benchmark</a></td></tr>
1205 </table></div>
1206<a name="Error_20Bars"></a><h3>Error Bars</h3>
1207<p>These are actually high/low bands, not error bars; the misnomer is historic.</p>
1208
1209 <div class='option'><p>
1210 <a name="customBars"></a><b>customBars</b>
1211 <a class="link" href="#customBars">#</a>
1212 </p><p>
1213 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.
1214 </p><p>
1215 <i>Type: boolean</i><br />
1216 <i>Default: false</i>
1217 </p><table class="gallerylinks">
1218 <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>
1219 <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>
1220 </table></div>
1221
1222 <div class='option'><p>
1223 <a name="errorBars"></a><b>errorBars</b>
1224 <a class="link" href="#errorBars">#</a>
1225 </p><p>
1226 Does the data contain standard deviations? Setting this to true alters the input format (see above).
1227 </p><p>
1228 <i>Type: boolean</i><br />
1229 <i>Default: false</i>
1230 </p><table class="gallerylinks">
1231 <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>
1232 <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>
1233 </table></div>
1234
1235 <div class='option'><p>
1236 <a name="fillAlpha"></a><b>fillAlpha</b>
1237 <a class="link" href="#fillAlpha">#</a>
1238 </p><p>
1239 Custom or sigma-based high/low bands for each series are drawn in the same colour as the series, but with partial transparency. This sets the transparency. A value of 0.0 means that the bands will not be drawn, whereas a value of 1.0 means that the bands will be as dark as the line for the series itself. This can be used to produce chart lines whose thickness varies at each point.
1240 </p><p>
1241 <i>Type: float (0.0 - 1.0)</i><br />
1242 <i>Default: 0.15</i>
1243 </p><table class="gallerylinks">
1244 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/range-selector">range-selector</a></td></tr>
1245 <tr><th>Other Examples:</th><td><a href="tests/fillGraph-alpha.html">fillGraph-alpha</a>; <a href="tests/range-selector.html">range-selector</a></td></tr>
1246 </table></div>
1247
1248 <div class='option'><p>
1249 <a name="fractions"></a><b>fractions</b>
1250 <a class="link" href="#fractions">#</a>
1251 </p><p>
1252 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).
1253 </p><p>
1254 <i>Type: boolean</i><br />
1255 <i>Default: false</i>
1256 </p><table class="gallerylinks">
1257 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1258 <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>
1259 </table></div>
1260
1261 <div class='option'><p>
1262 <a name="rollPeriod"></a><b>rollPeriod</b>
1263 <a class="link" href="#rollPeriod">#</a>
1264 </p><p>
1265 Number of days over which to average data. Discussed extensively above.
1266 </p><p>
1267 <i>Type: integer &gt;= 1</i><br />
1268 <i>Default: 1</i>
1269 </p><table class="gallerylinks">
1270 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/annotations">annotations</a>; <font color="#9999FF" title="inactive">callbacks</font>; <a href="gallery/#g/link-interaction">link-interaction</a>; <a href="gallery/#g/range-selector">range-selector</a>; <a href="gallery/#g/resizable">resizable</a>; <a href="gallery/#g/resize">resize</a>; <a href="gallery/#g/styled-chart-labels">styled-chart-labels</a>; <a href="gallery/#g/synchronize">synchronize</a>; <a href="gallery/#g/temperature-sf-ny">temperature-sf-ny</a></td></tr>
1271 <tr><th>Other Examples:</th><td><a href="tests/annotation.html">annotation</a>; <a href="tests/callback.html">callback</a>; <a href="tests/century-scale.html">century-scale</a>; <a href="tests/crosshair.html">crosshair</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/dygraph-many-points-benchmark.html">dygraph-many-points-benchmark</a>; <a href="tests/grid_dot.html">grid_dot</a>; <a href="tests/legend-values.html">legend-values</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/perf.html">perf</a>; <a href="tests/range-selector.html">range-selector</a>; <a href="tests/resizable.html">resizable</a>; <a href="tests/resize.html">resize</a>; <a href="tests/reverse-y-axis.html">reverse-y-axis</a>; <a href="tests/spacing.html">spacing</a>; <a href="tests/styled-chart-labels.html">styled-chart-labels</a>; <a href="tests/synchronize.html">synchronize</a>; <a href="tests/temperature-sf-ny.html">temperature-sf-ny</a>; <a href="tests/unboxed-spark.html">unboxed-spark</a>; <a href="tests/underlay-callback.html">underlay-callback</a>; <a href="tests/visibility.html">visibility</a></td></tr>
1272 </table></div>
1273
1274 <div class='option'><p>
1275 <a name="sigma"></a><b>sigma</b>
1276 <a class="link" href="#sigma">#</a>
1277 </p><p>
1278 When errorBars is set, shade this many standard deviations above/below each point.
1279 </p><p>
1280 <i>Type: float</i><br />
1281 <i>Default: 2.0</i>
1282 </p><table class="gallerylinks">
1283 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1284 <tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
1285 </table></div>
1286
1287 <div class='option'><p>
1288 <a name="wilsonInterval"></a><b>wilsonInterval</b>
1289 <a class="link" href="#wilsonInterval">#</a>
1290 </p><p>
1291 Use in conjunction with the "fractions" option. Instead of plotting +/- N standard deviations, dygraphs will compute a Wilson confidence interval and plot that. This has more reasonable behavior for ratios close to 0 or 1.
1292 </p><p>
1293 <i>Type: boolean</i><br />
1294 <i>Default: true</i>
1295 </p><table class="gallerylinks">
1296 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1297 <tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
1298 </table></div>
1299<a name="Grid"></a><h3>Grid</h3>
1300
1301 <div class='option'><p>
1302 <a name="drawGrid"></a><b>drawGrid</b>
1303 <a class="link" href="#drawGrid">#</a>
1304 </p><p>
1305 Whether to display gridlines in the chart. This may be set on a per-axis basis to define the visibility of each axis’ grid separately.
1306 </p><p>
1307 <i>Type: boolean</i><br />
1308 <i>Default: true for x and y, false for y2</i>
1309 </p><table class="gallerylinks">
1310 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/drawing">drawing</a></td></tr>
1311 <tr><th>Other Examples:</th><td><a href="tests/drawing.html">drawing</a>; <a href="tests/grid_dot.html">grid_dot</a>; <a href="tests/plotters.html">plotters</a>; <a href="tests/two-axes.html">two-axes</a>; <a href="tests/unboxed-spark.html">unboxed-spark</a></td></tr>
1312 </table></div>
1313
1314 <div class='option'><p>
1315 <a name="gridLineColor"></a><b>gridLineColor</b>
1316 <a class="link" href="#gridLineColor">#</a>
1317 </p><p>
1318 The color of the gridlines. This may be set on a per-axis basis to define each axis’ grid separately.
1319 </p><p>
1320 <i>Type: red, blue</i><br />
1321 <i>Default: rgb(128,128,128)</i>
1322 </p><table class="gallerylinks">
1323 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/drawing">drawing</a></td></tr>
1324 <tr><th>Other Examples:</th><td><a href="tests/drawing.html">drawing</a>; <a href="tests/grid_dot.html">grid_dot</a>; <a href="tests/smooth-plots.html">smooth-plots</a></td></tr>
1325 </table></div>
1326
1327 <div class='option'><p>
1328 <a name="gridLinePattern"></a><b>gridLinePattern</b>
1329 <a class="link" href="#gridLinePattern">#</a>
1330 </p><p>
1331 A custom pattern array where the even index is a draw and odd is a space in pixels. If null then it draws a solid line. The array should have a even length as any odd lengthed array could be expressed as a smaller even length array. This is used to create dashed gridlines.
1332 </p><p>
1333 <i>Type: Array of integers</i><br />
1334 <i>Default: null</i>
1335 </p><table class="gallerylinks">
1336 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1337 <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>
1338 </table></div>
1339
1340 <div class='option'><p>
1341 <a name="gridLineWidth"></a><b>gridLineWidth</b>
1342 <a class="link" href="#gridLineWidth">#</a>
1343 </p><p>
1344 Thickness (in pixels) of the gridlines drawn under the chart. The vertical/horizontal gridlines can be turned off entirely by using the drawGrid option. This may be set on a per-axis basis to define each axis’ grid separately.
1345 </p><p>
1346 <i>Type: float</i><br />
1347 <i>Default: 0.3</i>
1348 </p><table class="gallerylinks">
1349 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1350 <tr><th>Other Examples:</th><td><a href="tests/grid_dot.html">grid_dot</a></td></tr>
1351 </table></div>
1352
1353 <div class='option'><p>
1354 <a name="independentTicks"></a><b>independentTicks</b>
1355 <a class="link" href="#independentTicks">#</a>
1356 </p><p>
1357 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.
1358 </p><p>
1359 <i>Type: boolean</i><br />
1360 <i>Default: true for y, false for y2</i>
1361 </p><table class="gallerylinks">
1362 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1363 <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>
1364 </table></div>
1365
1366 <div class='option'><p>
1367 <a name="pixelsPerLabel"></a><b>pixelsPerLabel</b>
1368 <a class="link" href="#pixelsPerLabel">#</a>
1369 </p><p>
1370 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.
1371 </p><p>
1372 <i>Type: integer</i><br />
1373 <i>Default: 70 (x-axis) or 30 (y-axes)</i>
1374 </p><table class="gallerylinks">
1375 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1376 <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>
1377 </table></div>
1378<a name="Interactive_20Elements"></a><h3>Interactive Elements</h3>
1379
1380 <div class='option'><p>
1381 <a name="animatedZooms"></a><b>animatedZooms</b>
1382 <a class="link" href="#animatedZooms">#</a>
1383 </p><p>
1384 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.
1385 </p><p>
1386 <i>Type: boolean</i><br />
1387 <i>Default: false</i>
1388 </p><table class="gallerylinks">
1389 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/highlighted-region">highlighted-region</a>; <a href="gallery/#g/link-interaction">link-interaction</a></td></tr>
1390 <tr><th>Other Examples:</th><td><a href="tests/dense-fill.html">dense-fill</a>; <a href="tests/highlighted-region.html">highlighted-region</a>; <a href="tests/label_v.html">label_v</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></td></tr>
1391 </table></div>
1392
1393 <div class='option'><p>
1394 <a name="hideOverlayOnMouseOut"></a><b>hideOverlayOnMouseOut</b>
1395 <a class="link" href="#hideOverlayOnMouseOut">#</a>
1396 </p><p>
1397 Whether to hide the legend when the mouse leaves the chart area.
1398 </p><p>
1399 <i>Type: boolean</i><br />
1400 <i>Default: true</i>
1401 </p><table class="gallerylinks">
1402 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1403 <tr><th>Other Examples:</th><td><a href="tests/gviz-selection.html">gviz-selection</a><b class="extlink" title="WARNING: accesses external resources (Google jsapi)">⚠</b></td></tr>
1404 </table></div>
1405
1406 <div class='option'><p>
1407 <a name="highlightCircleSize"></a><b>highlightCircleSize</b>
1408 <a class="link" href="#highlightCircleSize">#</a>
1409 </p><p>
1410 The size in pixels of the dot drawn over highlighted points.
1411 </p><p>
1412 <i>Type: integer</i><br />
1413 <i>Default: 3</i>
1414 </p><table class="gallerylinks">
1415 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/highlighted-series">highlighted-series</a>; <a href="gallery/#g/per-series">per-series</a></td></tr>
1416 <tr><th>Other Examples:</th><td><a href="tests/custom-circles.html">custom-circles</a>; <a href="tests/dygraph-many-points-benchmark.html">dygraph-many-points-benchmark</a>; <a href="tests/grid_dot.html">grid_dot</a>; <a href="tests/independent-series.html">independent-series</a>; <a href="tests/per-series.html">per-series</a>; <a href="tests/series-highlight.html">series-highlight</a>; <a href="tests/unboxed-spark.html">unboxed-spark</a></td></tr>
1417 </table></div>
1418
1419 <div class='option'><p>
1420 <a name="highlightSeriesBackgroundAlpha"></a><b>highlightSeriesBackgroundAlpha</b>
1421 <a class="link" href="#highlightSeriesBackgroundAlpha">#</a>
1422 </p><p>
1423 Fade the background while highlighting series. 1=fully visible background (disable fading), 0=hiddden background (show highlighted series only).
1424 </p><p>
1425 <i>Type: float</i><br />
1426 <i>Default: 0.5</i>
1427 </p><table class="gallerylinks">
1428 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1429 <tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
1430 </table></div>
1431
1432 <div class='option'><p>
1433 <a name="highlightSeriesBackgroundColor"></a><b>highlightSeriesBackgroundColor</b>
1434 <a class="link" href="#highlightSeriesBackgroundColor">#</a>
1435 </p><p>
1436 Sets the background color used to fade out the series in conjunction with “highlightSeriesBackgroundAlpha”.
1437 </p><p>
1438 <i>Type: string</i><br />
1439 <i>Default: rgb(255, 255, 255)</i>
1440 </p><table class="gallerylinks">
1441 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1442 <tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
1443 </table></div>
1444
1445 <div class='option'><p>
1446 <a name="highlightSeriesOpts"></a><b>highlightSeriesOpts</b>
1447 <a class="link" href="#highlightSeriesOpts">#</a>
1448 </p><p>
1449 When set, the options from this object are applied to the timeseries closest to the mouse pointer for interactive highlighting. See also “highlightCallback”. Example: highlightSeriesOpts: { strokeWidth: 3 }.
1450 </p><p>
1451 <i>Type: Object</i><br />
1452 <i>Default: null</i>
1453 </p><table class="gallerylinks">
1454 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/highlighted-series">highlighted-series</a></td></tr>
1455 <tr><th>Other Examples:</th><td><a href="tests/custom-circles.html">custom-circles</a>; <a href="tests/legend-formatter.html">legend-formatter</a>; <a href="tests/series-highlight.html">series-highlight</a></td></tr>
1456 </table></div>
1457
1458 <div class='option'><p>
1459 <a name="interactionModel"></a><b>interactionModel</b>
1460 <a class="link" href="#interactionModel">#</a>
1461 </p><p>
1462 TODO(konigsberg): document this
1463 </p><p>
1464 <i>Type: Object</i><br />
1465 <i>Default: ...</i>
1466 </p><table class="gallerylinks">
1467 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/drawing">drawing</a>; <a href="gallery/#g/interaction">interaction</a></td></tr>
1468 <tr><th>Other Examples:</th><td><a href="tests/drawing.html">drawing</a>; <a href="tests/interaction.html">interaction</a></td></tr>
1469 </table></div>
1470
1471 <div class='option'><p>
1472 <a name="panEdgeFraction"></a><b>panEdgeFraction</b>
1473 <a class="link" href="#panEdgeFraction">#</a>
1474 </p><p>
1475 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.
1476 </p><p>
1477 <i>Type: float</i><br />
1478 <i>Default: null</i>
1479 </p><table class="gallerylinks">
1480 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1481 <tr><th>Other Examples:</th><td><a href="tests/zoom.html">zoom</a></td></tr>
1482 </table></div>
1483
1484 <div class='option'><p>
1485 <a name="pointClickCallback"></a><b>pointClickCallback</b>
1486 <a class="link" href="#pointClickCallback">#</a>
1487 </p><p>
1488 A function to call when a data point is clicked. and the point that was clicked.
1489 </p><p>
1490 <i>Type: function(e, point)</i><br />
1491 </p><div class='parameters'><table>
1492<tr><th>e:</th><td>the event object for the click</td></tr>
1493<tr><th>point:</th><td>the point that was clicked See <a href='#point_properties'>Point properties</a> for details</td></tr>
1494 </table></div><p>
1495 <i>Default: null</i>
1496 </p><table class="gallerylinks">
1497 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/annotations">annotations</a>; <font color="#9999FF" title="inactive">callbacks</font></td></tr>
1498 <tr><th>Other Examples:</th><td><a href="tests/annotation.html">annotation</a>; <a href="tests/callback.html">callback</a></td></tr>
1499 </table></div>
1500
1501 <div class='option'><p>
1502 <a name="showLabelsOnHighlight"></a><b>showLabelsOnHighlight</b>
1503 <a class="link" href="#showLabelsOnHighlight">#</a>
1504 </p><p>
1505 Whether to show the legend upon mouseover.
1506 </p><p>
1507 <i>Type: boolean</i><br />
1508 <i>Default: true</i>
1509 </p><table class="gallerylinks">
1510 <tr><th>Gallery Samples:</th><td><font color="#9999FF" title="inactive">callbacks</font></td></tr>
1511 <tr><th>Other Examples:</th><td><a href="tests/callback.html">callback</a></td></tr>
1512 </table></div>
1513
1514 <div class='option'><p>
1515 <a name="showRoller"></a><b>showRoller</b>
1516 <a class="link" href="#showRoller">#</a>
1517 </p><p>
1518 If the rolling average period text box should be shown.
1519 </p><p>
1520 <i>Type: boolean</i><br />
1521 <i>Default: false</i>
1522 </p><table class="gallerylinks">
1523 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/annotations">annotations</a>; <font color="#9999FF" title="inactive">callbacks</font>; <a href="gallery/#g/dynamic-update">dynamic-update</a>; <a href="gallery/#g/range-selector">range-selector</a>; <a href="gallery/#g/temperature-sf-ny">temperature-sf-ny</a></td></tr>
1524 <tr><th>Other Examples:</th><td><a href="tests/annotation.html">annotation</a>; <a href="tests/callback.html">callback</a>; <a href="tests/crosshair.html">crosshair</a>; <a href="tests/dynamic-update.html">dynamic-update</a>; <a href="tests/fractions.html">fractions</a>; <a href="tests/isolated-points.html">isolated-points</a>; <a href="tests/missing-data.html">missing-data</a>; <a href="tests/numeric-gviz.html">numeric-gviz</a><b class="extlink" title="WARNING: accesses external resources (Google jsapi)">⚠</b>; <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/temperature-sf-ny.html">temperature-sf-ny</a>; <a href="tests/underlay-callback.html">underlay-callback</a></td></tr>
1525 </table></div>
1526<a name="Legend"></a><h3>Legend</h3>
1527
1528 <div class='option'><p>
1529 <a name="hideOverlayOnMouseOut"></a><b>hideOverlayOnMouseOut</b>
1530 <a class="link" href="#hideOverlayOnMouseOut">#</a>
1531 </p><p>
1532 Whether to hide the legend when the mouse leaves the chart area.
1533 </p><p>
1534 <i>Type: boolean</i><br />
1535 <i>Default: true</i>
1536 </p><table class="gallerylinks">
1537 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1538 <tr><th>Other Examples:</th><td><a href="tests/gviz-selection.html">gviz-selection</a><b class="extlink" title="WARNING: accesses external resources (Google jsapi)">⚠</b></td></tr>
1539 </table></div>
1540
1541 <div class='option'><p>
1542 <a name="labels"></a><b>labels</b>
1543 <a class="link" href="#labels">#</a>
1544 </p><p>
1545 A distinct name for each data series, including the independent (X) series. For CSV files and DataTable objects, this is determined by context. For raw data, this must be specified. If it is not, default values are supplied and a warning is logged. Make sure no two names are the same!
1546 </p><p>
1547 <i>Type: Array of strings</i><br />
1548 <i>Default: ["X", "Y1", "Y2", ...]*</i>
1549 </p><table class="gallerylinks">
1550 <tr><th>Gallery Samples:</th><td><font color="#9999FF" title="inactive">annotations-native</font>; <a href="gallery/#g/drawing">drawing</a>; <font color="#9999FF" title="inactive">dygraph-simple</font>; <a href="gallery/#g/dynamic-update">dynamic-update</a>; <a href="gallery/#g/highlighted-region">highlighted-region</a>; <a href="gallery/#g/highlighted-series">highlighted-series</a>; <a href="gallery/#g/highlighted-weekends">highlighted-weekends</a>; <a href="gallery/#g/independent-series">independent-series</a>; <a href="gallery/#g/linear-regression">linear-regression</a>; <a href="gallery/#g/link-interaction">link-interaction</a>; <font color="#9999FF" title="inactive">negative</font>; <font color="#9999FF" title="inactive">two-axes</font></td></tr>
1551 <tr><th>Other Examples:</th><td><a href="tests/annotation-native.html">annotation-native</a>; <a href="tests/connect-separated.html">connect-separated</a>; <a href="tests/custom-bars.html">custom-bars</a>; <a href="tests/dateWindow.html">dateWindow</a>; <a href="tests/daylight-savings.html">daylight-savings</a>; <a href="tests/dense-fill.html">dense-fill</a>; <a href="tests/drawing.html">drawing</a>; <a href="tests/dygraph.html">dygraph</a>; <a href="tests/dygraph-many-points-benchmark.html">dygraph-many-points-benchmark</a>; <a href="tests/dynamic-update.html">dynamic-update</a>; <a href="tests/grid_dot.html">grid_dot</a>; <a href="tests/hairlines.html">hairlines</a>; <a href="tests/highlighted-region.html">highlighted-region</a>; <a href="tests/independent-series.html">independent-series</a>; <a href="tests/isolated-points.html">isolated-points</a>; <a href="tests/label-div.html">label-div</a>; <a href="tests/label_v.html">label_v</a>; <a href="tests/labelsDateMilliseconds.html">labelsDateMilliseconds</a>; <a href="tests/labelsDateUTC.html">labelsDateUTC</a>; <a href="tests/labelsKMB.html">labelsKMB</a>; <a href="tests/linear-regression.html">linear-regression</a>; <a href="tests/linear-regression-addseries.html">linear-regression-addseries</a>; <a href="tests/link-interaction.html">link-interaction</a>; <a href="tests/missing-data.html">missing-data</a>; <a href="tests/multi-scale.html">multi-scale</a>; <a href="tests/native-format.html">native-format</a>; <a href="tests/negative.html">negative</a>; <a href="tests/perf.html">perf</a>; <a href="tests/plotter.html">plotter</a>; <a href="tests/plotters.html">plotters</a>; <a href="tests/range-selector.html">range-selector</a>; <a href="tests/series-highlight.html">series-highlight</a>; <a href="tests/small-range-zero.html">small-range-zero</a>; <a href="tests/smooth-plots.html">smooth-plots</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>
1552 </table></div>
1553
1554 <div class='option'><p>
1555 <a name="labelsDiv"></a><b>labelsDiv</b>
1556 <a class="link" href="#labelsDiv">#</a>
1557 </p><p>
1558 Show data labels in an external div, rather than on the graph. This value can either be a div element or a div id.
1559 </p><p>
1560 <i>Type: DOM element or string</i><br />
1561 <i>Default: null</i>
1562 </p><table class="gallerylinks">
1563 <tr><th>Gallery Samples:</th><td><font color="#9999FF" title="inactive">demo</font></td></tr>
1564 <tr><th>Other Examples:</th><td><a href="tests/century-scale.html">century-scale</a>; <a href="tests/demo.html">demo</a>; <a href="tests/hairlines.html">hairlines</a>; <a href="tests/label-div.html">label-div</a>; <a href="tests/legend-formatter.html">legend-formatter</a>; <a href="tests/plugins.html">plugins</a>; <a href="tests/reverse-y-axis.html">reverse-y-axis</a>; <a href="tests/rtl.html">rtl</a>; <a href="tests/unboxed-spark.html">unboxed-spark</a></td></tr>
1565 </table></div>
1566
1567 <div class='option'><p>
1568 <a name="labelsSeparateLines"></a><b>labelsSeparateLines</b>
1569 <a class="link" href="#labelsSeparateLines">#</a>
1570 </p><p>
1571 Put <code>&lt;br/&gt;</code> between lines in the label string. Often used in conjunction with <strong>labelsDiv</strong>.
1572 </p><p>
1573 <i>Type: boolean</i><br />
1574 <i>Default: false</i>
1575 </p><table class="gallerylinks">
1576 <tr><th>Gallery Samples:</th><td><font color="#9999FF" title="inactive">demo</font></td></tr>
1577 <tr><th>Other Examples:</th><td><a href="tests/century-scale.html">century-scale</a>; <a href="tests/customLabel.html">customLabel</a>; <a href="tests/customLabelCss3.html">customLabelCss3</a>; <a href="tests/demo.html">demo</a>; <a href="tests/hairlines.html">hairlines</a>; <a href="tests/legend-values.html">legend-values</a>; <a href="tests/plugins.html">plugins</a>; <a href="tests/reverse-y-axis.html">reverse-y-axis</a>; <a href="tests/rtl.html">rtl</a></td></tr>
1578 </table></div>
1579
1580 <div class='option'><p>
1581 <a name="labelsShowZeroValues"></a><b>labelsShowZeroValues</b>
1582 <a class="link" href="#labelsShowZeroValues">#</a>
1583 </p><p>
1584 Show zero value labels in the labelsDiv.
1585 </p><p>
1586 <i>Type: boolean</i><br />
1587 <i>Default: true</i>
1588 </p><table class="gallerylinks">
1589 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1590 <tr><th>Other Examples:</th><td><a href="tests/label-div.html">label-div</a></td></tr>
1591 </table></div>
1592
1593 <div class='option'><p>
1594 <a name="legend"></a><b>legend</b>
1595 <a class="link" href="#legend">#</a>
1596 </p><p>
1597 When to display the legend. By default, it only appears when a user mouses over the chart. Set it to "always" to always display a legend of some sort, "never" to hide it. When set to "follow", legend follows highlighted points.
1598 </p><p>
1599 <i>Type: string</i><br />
1600 <i>Default: onmouseover</i>
1601 </p><table class="gallerylinks">
1602 <tr><th>Gallery Samples:</th><td><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></td></tr>
1603 <tr><th>Other Examples:</th><td><a href="tests/css-positioning.html">css-positioning</a>; <a href="tests/demo.html">demo</a>; <a href="tests/hairlines.html">hairlines</a>; <a href="tests/label_v.html">label_v</a>; <a href="tests/legend-formatter.html">legend-formatter</a>; <a href="tests/legend-values.html">legend-values</a>; <a href="tests/multi-scale.html">multi-scale</a>; <a href="tests/old-yrange-behavior.html">old-yrange-behavior</a>; <a href="tests/per-series.html">per-series</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/rtl.html">rtl</a>; <a href="tests/smooth-plots.html">smooth-plots</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/unboxed-spark.html">unboxed-spark</a></td></tr>
1604 </table></div>
1605
1606 <div class='option'><p>
1607 <a name="legendFollowOffsetX"></a><b>legendFollowOffsetX</b>
1608 <a class="link" href="#legendFollowOffsetX">#</a>
1609 </p><p>
1610 Number of pixels to use as horizontal offset from the point for a “floating” legend ("follow" mode). This should be positive (to the right) because the legend flips over to the left side if it’s too wide.
1611 </p><p>
1612 <i>Type: integer</i><br />
1613 <i>Default: 50</i>
1614 </p><table class="gallerylinks">
1615 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1616 <tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
1617 </table></div>
1618
1619 <div class='option'><p>
1620 <a name="legendFollowOffsetY"></a><b>legendFollowOffsetY</b>
1621 <a class="link" href="#legendFollowOffsetY">#</a>
1622 </p><p>
1623 Number of pixels to use as vertical offset from the point for a “floating” legend ("follow" mode).
1624 </p><p>
1625 <i>Type: integer</i><br />
1626 <i>Default: -50</i>
1627 </p><table class="gallerylinks">
1628 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1629 <tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
1630 </table></div>
1631
1632 <div class='option'><p>
1633 <a name="legendFormatter"></a><b>legendFormatter</b>
1634 <a class="link" href="#legendFormatter">#</a>
1635 </p><p>
1636 Set this to supply a custom formatter for the legend. See <a href="legend-formatter.md"><tt>docs/legend-formatter.md</tt></a> (<a href="https://github.com/danvk/dygraphs/blob/master/docs/legend-formatter.md">online</a>) and the <a href="tests/legend-formatter.html">legendFormatter demo</a> for usage.
1637 </p><p>
1638 <i>Type: function(data): string or DocumentFragment node</i><br />
1639 <i>Default: null</i>
1640 </p><table class="gallerylinks">
1641 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1642 <tr><th>Other Examples:</th><td><a href="tests/legend-formatter.html">legend-formatter</a></td></tr>
1643 </table></div>
1644
1645 <div class='option'><p>
1646 <a name="showLabelsOnHighlight"></a><b>showLabelsOnHighlight</b>
1647 <a class="link" href="#showLabelsOnHighlight">#</a>
1648 </p><p>
1649 Whether to show the legend upon mouseover.
1650 </p><p>
1651 <i>Type: boolean</i><br />
1652 <i>Default: true</i>
1653 </p><table class="gallerylinks">
1654 <tr><th>Gallery Samples:</th><td><font color="#9999FF" title="inactive">callbacks</font></td></tr>
1655 <tr><th>Other Examples:</th><td><a href="tests/callback.html">callback</a></td></tr>
1656 </table></div>
1657
1658 <div class='option'><p>
1659 <a name="valueFormatter"></a><b>valueFormatter</b>
1660 <a class="link" href="#valueFormatter">#</a>
1661 </p><p>
1662 Function to provide a custom display format for the values displayed on mouseover. This does not affect the values that appear on tick marks next to the axes. To format those, see axisLabelFormatter. This is usually set on a <a href='per-axis.html'>per-axis</a> basis. .
1663 </p><p>
1664 <i>Type: function(num_or_millis, opts, seriesName, dygraph, row, col)</i><br />
1665 </p><div class='parameters'><table>
1666<tr><th>num_or_millis:</th><td>The value to be formatted. This is always a number. For date axes, it’s millis since epoch. You can call new Date(millis) to get a Date object.</td></tr>
1667<tr><th>opts:</th><td>This is a function you can call to access various options (e.g. opts('labelsKMB')). It returns per-axis values for the option when available.</td></tr>
1668<tr><th>seriesName:</th><td>The name of the series from which the point came, e.g. 'X', 'Y', 'A', etc.</td></tr>
1669<tr><th>dygraph:</th><td>The dygraph object for which the formatting is being done</td></tr>
1670<tr><th>row:</th><td>The row of the data from which this point comes. g.getValue(row, 0) will return the x-value for this point.</td></tr>
1671<tr><th>col:</th><td>The column of the data from which this point comes. g.getValue(row, col) will return the original y-value for this point. This can be used to get the full confidence interval for the point, or access un-rolled values for the point.</td></tr>
1672 </table></div><p>
1673 <i>Default: Depends on the type of your data.</i>
1674 </p><table class="gallerylinks">
1675 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1676 <tr><th>Other Examples:</th><td><a href="tests/hairlines.html">hairlines</a>; <a href="tests/labelsKMB.html">labelsKMB</a>; <a href="tests/multi-scale.html">multi-scale</a>; <a href="tests/value-axis-formatters.html">value-axis-formatters</a></td></tr>
1677 </table></div>
1678<a name="Overall_20display"></a><h3>Overall display</h3>
1679
1680 <div class='option'><p>
1681 <a name="animateBackgroundFade"></a><b>animateBackgroundFade</b>
1682 <a class="link" href="#animateBackgroundFade">#</a>
1683 </p><p>
1684 Activate an animation effect for a gradual fade.
1685 </p><p>
1686 <i>Type: boolean</i><br />
1687 <i>Default: true</i>
1688 </p><table class="gallerylinks">
1689 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1690 <tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
1691 </table></div>
1692
1693 <div class='option'><p>
1694 <a name="height"></a><b>height</b>
1695 <a class="link" href="#height">#</a>
1696 </p><p>
1697 Height, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored.
1698 </p><p>
1699 <i>Type: integer</i><br />
1700 <i>Default: 320</i>
1701 </p><table class="gallerylinks">
1702 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/annotations">annotations</a>; <font color="#9999FF" title="inactive">annotations-gviz</font>; <font color="#9999FF" title="inactive">border</font>; <font color="#9999FF" title="inactive">callbacks</font>; <font color="#9999FF" title="inactive">color-cycle</font>; <font color="#9999FF" title="inactive">color-visibility</font>; <font color="#9999FF" title="inactive">demo</font>; <a href="gallery/#g/drawing">drawing</a>; <a href="gallery/#g/dynamic-update">dynamic-update</a>; <a href="gallery/#g/highlighted-region">highlighted-region</a>; <a href="gallery/#g/highlighted-series">highlighted-series</a>; <a href="gallery/#g/highlighted-weekends">highlighted-weekends</a>; <a href="gallery/#g/independent-series">independent-series</a>; <a href="gallery/#g/interaction">interaction</a>; <a href="gallery/#g/linear-regression">linear-regression</a>; <a href="gallery/#g/link-interaction">link-interaction</a>; <font color="#9999FF" title="inactive">negative</font>; <font color="#9999FF" title="inactive">no-range</font>; <a href="gallery/#g/plotter">plotter</a>; <a href="gallery/#g/range-selector">range-selector</a>; <a href="gallery/#g/stock">stock</a>; <a href="gallery/#g/styled-chart-labels">styled-chart-labels</a>; <a href="gallery/#g/synchronize">synchronize</a>; <a href="gallery/#g/temperature-sf-ny">temperature-sf-ny</a>; <font color="#9999FF" title="inactive">two-axes</font></td></tr>
1703 <tr><th>Other Examples:</th><td><a href="tests/annotation.html">annotation</a>; <a href="tests/century-scale.html">century-scale</a>; <a href="tests/charting-combinations.html">charting-combinations</a>; <a href="tests/color-cycle.html">color-cycle</a>; <a href="tests/color-visibility.html">color-visibility</a>; <a href="tests/demo.html">demo</a>; <a href="tests/dense-fill.html">dense-fill</a>; <a href="tests/drawing.html">drawing</a>; <a href="tests/hairlines.html">hairlines</a>; <a href="tests/iframe.html">iframe</a>; <a href="tests/legend-formatter.html">legend-formatter</a>; <a href="tests/link-interaction.html">link-interaction</a>; <a href="tests/multi-scale.html">multi-scale</a>; <a href="tests/no-range.html">no-range</a>; <a href="tests/plotters.html">plotters</a>; <a href="tests/plugins.html">plugins</a>; <a href="tests/reverse-y-axis.html">reverse-y-axis</a>; <a href="tests/rtl.html">rtl</a>; <a href="tests/series-highlight.html">series-highlight</a>; <a href="tests/small-range-zero.html">small-range-zero</a>; <a href="tests/smooth-plots.html">smooth-plots</a>; <a href="tests/straw-broom.html">straw-broom</a>; <a href="tests/styled-chart-labels.html">styled-chart-labels</a>; <a href="tests/synchronize.html">synchronize</a>; <a href="tests/value-axis-formatters.html">value-axis-formatters</a></td></tr>
1704 </table></div>
1705
1706 <div class='option'><p>
1707 <a name="pixelRatio"></a><b>pixelRatio</b>
1708 <a class="link" href="#pixelRatio">#</a>
1709 </p><p>
1710 Overrides the pixel ratio scaling factor for the canvas’ 2d context. Ordinarily, this is set to the devicePixelRatio / (context.backingStoreRatio || 1), so on mobile devices, where the devicePixelRatio can be somewhere around 3, performance can be improved by overriding this value to something less precise, like 1, at the expense of resolution.
1711 </p><p>
1712 <i>Type: float</i><br />
1713 <i>Default: (devicePixelRatio / context.backingStoreRatio)</i>
1714 </p><table class="gallerylinks">
1715 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1716 <tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
1717 </table></div>
1718
1719 <div class='option'><p>
1720 <a name="resizable"></a><b>resizable</b>
1721 <a class="link" href="#resizable">#</a>
1722 </p><p>
1723 Whether to add a ResizeObserver to the container div ("passive") and additionally make it resizable ("horizontal", "vertical", "both"). In any case, if the container div has CSS "overflow:visible;" it will be changed to "overflow:hidden;" to make CSS resizing possible. Note that this is distinct from resizing the graph when the window size changes, which is always active; this feature adds user-resizable “handles” to the container div.
1724 </p><p>
1725 <i>Type: string</i><br />
1726 <i>Default: no</i>
1727 </p><table class="gallerylinks">
1728 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/resizable">resizable</a></td></tr>
1729 <tr><th>Other Examples:</th><td><a href="tests/resizable.html">resizable</a>; <a href="tests/resize.html">resize</a></td></tr>
1730 </table></div>
1731
1732 <div class='option'><p>
1733 <a name="rightGap"></a><b>rightGap</b>
1734 <a class="link" href="#rightGap">#</a>
1735 </p><p>
1736 Number of pixels to leave blank at the right edge of the Dygraph. This makes it easier to highlight the right-most data point.
1737 </p><p>
1738 <i>Type: integer</i><br />
1739 <i>Default: 5</i>
1740 </p><table class="gallerylinks">
1741 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1742 <tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
1743 </table></div>
1744
1745 <div class='option'><p>
1746 <a name="width"></a><b>width</b>
1747 <a class="link" href="#width">#</a>
1748 </p><p>
1749 Width, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored.
1750 </p><p>
1751 <i>Type: integer</i><br />
1752 <i>Default: 480</i>
1753 </p><table class="gallerylinks">
1754 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/annotations">annotations</a>; <font color="#9999FF" title="inactive">annotations-gviz</font>; <font color="#9999FF" title="inactive">border</font>; <font color="#9999FF" title="inactive">callbacks</font>; <font color="#9999FF" title="inactive">color-cycle</font>; <font color="#9999FF" title="inactive">color-visibility</font>; <font color="#9999FF" title="inactive">demo</font>; <a href="gallery/#g/drawing">drawing</a>; <a href="gallery/#g/dynamic-update">dynamic-update</a>; <a href="gallery/#g/highlighted-region">highlighted-region</a>; <a href="gallery/#g/highlighted-series">highlighted-series</a>; <a href="gallery/#g/highlighted-weekends">highlighted-weekends</a>; <a href="gallery/#g/independent-series">independent-series</a>; <a href="gallery/#g/interaction">interaction</a>; <a href="gallery/#g/linear-regression">linear-regression</a>; <a href="gallery/#g/link-interaction">link-interaction</a>; <font color="#9999FF" title="inactive">negative</font>; <font color="#9999FF" title="inactive">no-range</font>; <a href="gallery/#g/plotter">plotter</a>; <a href="gallery/#g/range-selector">range-selector</a>; <a href="gallery/#g/stock">stock</a>; <a href="gallery/#g/styled-chart-labels">styled-chart-labels</a>; <a href="gallery/#g/synchronize">synchronize</a>; <a href="gallery/#g/temperature-sf-ny">temperature-sf-ny</a>; <font color="#9999FF" title="inactive">two-axes</font></td></tr>
1755 <tr><th>Other Examples:</th><td><a href="tests/annotation.html">annotation</a>; <a href="tests/century-scale.html">century-scale</a>; <a href="tests/charting-combinations.html">charting-combinations</a>; <a href="tests/color-cycle.html">color-cycle</a>; <a href="tests/color-visibility.html">color-visibility</a>; <a href="tests/customLabel.html">customLabel</a>; <a href="tests/customLabelCss3.html">customLabelCss3</a>; <a href="tests/daylight-savings.html">daylight-savings</a>; <a href="tests/demo.html">demo</a>; <a href="tests/dense-fill.html">dense-fill</a>; <a href="tests/drawing.html">drawing</a>; <a href="tests/hairlines.html">hairlines</a>; <a href="tests/iframe.html">iframe</a>; <a href="tests/independent-series.html">independent-series</a>; <a href="tests/legend-formatter.html">legend-formatter</a>; <a href="tests/legend-values.html">legend-values</a>; <a href="tests/linear-regression.html">linear-regression</a>; <a href="tests/linear-regression-addseries.html">linear-regression-addseries</a>; <a href="tests/linear-regression-fractions.html">linear-regression-fractions</a>; <a href="tests/link-interaction.html">link-interaction</a>; <a href="tests/multi-scale.html">multi-scale</a>; <a href="tests/no-range.html">no-range</a>; <a href="tests/plotters.html">plotters</a>; <a href="tests/plugins.html">plugins</a>; <a href="tests/reverse-y-axis.html">reverse-y-axis</a>; <a href="tests/rtl.html">rtl</a>; <a href="tests/series-highlight.html">series-highlight</a>; <a href="tests/small-range-zero.html">small-range-zero</a>; <a href="tests/smooth-plots.html">smooth-plots</a>; <a href="tests/straw-broom.html">straw-broom</a>; <a href="tests/styled-chart-labels.html">styled-chart-labels</a>; <a href="tests/synchronize.html">synchronize</a>; <a href="tests/value-axis-formatters.html">value-axis-formatters</a></td></tr>
1756 </table></div>
1757<a name="Range_20Selector"></a><h3>Range Selector</h3>
1758
1759 <div class='option'><p>
1760 <a name="rangeSelectorAlpha"></a><b>rangeSelectorAlpha</b>
1761 <a class="link" href="#rangeSelectorAlpha">#</a>
1762 </p><p>
1763 The transparency of the veil that is drawn over the unselected portions of the range selector mini plot. A value of 0 represents full transparency and the unselected portions of the mini plot will appear as normal. A value of 1 represents full opacity and the unselected portions of the mini plot will be hidden.
1764 </p><p>
1765 <i>Type: float (0.0 - 1.0)</i><br />
1766 <i>Default: 0.6</i>
1767 </p><table class="gallerylinks">
1768 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1769 <tr><th>Other Examples:</th><td><a href="tests/range-selector.html">range-selector</a></td></tr>
1770 </table></div>
1771
1772 <div class='option'><p>
1773 <a name="rangeSelectorBackgroundLineWidth"></a><b>rangeSelectorBackgroundLineWidth</b>
1774 <a class="link" href="#rangeSelectorBackgroundLineWidth">#</a>
1775 </p><p>
1776 The width of the lines below and on both sides of the range selector mini plot.
1777 </p><p>
1778 <i>Type: float</i><br />
1779 <i>Default: 1</i>
1780 </p><table class="gallerylinks">
1781 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1782 <tr><th>Other Examples:</th><td><a href="tests/range-selector.html">range-selector</a></td></tr>
1783 </table></div>
1784
1785 <div class='option'><p>
1786 <a name="rangeSelectorBackgroundStrokeColor"></a><b>rangeSelectorBackgroundStrokeColor</b>
1787 <a class="link" href="#rangeSelectorBackgroundStrokeColor">#</a>
1788 </p><p>
1789 The color of the lines below and on both sides of the range selector mini plot. This can be of the form "#AABBCC" or "rgb(255,100,200)" or "yellow".
1790 </p><p>
1791 <i>Type: string</i><br />
1792 <i>Default: gray</i>
1793 </p><table class="gallerylinks">
1794 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1795 <tr><th>Other Examples:</th><td><a href="tests/range-selector.html">range-selector</a></td></tr>
1796 </table></div>
1797
1798 <div class='option'><p>
1799 <a name="rangeSelectorForegroundLineWidth"></a><b>rangeSelectorForegroundLineWidth</b>
1800 <a class="link" href="#rangeSelectorForegroundLineWidth">#</a>
1801 </p><p>
1802 The width the lines in the interactive layer of the range selector.
1803 </p><p>
1804 <i>Type: float</i><br />
1805 <i>Default: 1</i>
1806 </p><table class="gallerylinks">
1807 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1808 <tr><th>Other Examples:</th><td><a href="tests/range-selector.html">range-selector</a></td></tr>
1809 </table></div>
1810
1811 <div class='option'><p>
1812 <a name="rangeSelectorForegroundStrokeColor"></a><b>rangeSelectorForegroundStrokeColor</b>
1813 <a class="link" href="#rangeSelectorForegroundStrokeColor">#</a>
1814 </p><p>
1815 The color of the lines in the interactive layer of the range selector. This can be of the form "#AABBCC" or "rgb(255,100,200)" or "yellow".
1816 </p><p>
1817 <i>Type: string</i><br />
1818 <i>Default: black</i>
1819 </p><table class="gallerylinks">
1820 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1821 <tr><th>Other Examples:</th><td><a href="tests/range-selector.html">range-selector</a></td></tr>
1822 </table></div>
1823
1824 <div class='option'><p>
1825 <a name="rangeSelectorHeight"></a><b>rangeSelectorHeight</b>
1826 <a class="link" href="#rangeSelectorHeight">#</a>
1827 </p><p>
1828 Height, in pixels, of the range selector widget. This option can only be specified at Dygraph creation time.
1829 </p><p>
1830 <i>Type: integer</i><br />
1831 <i>Default: 40</i>
1832 </p><table class="gallerylinks">
1833 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/range-selector">range-selector</a></td></tr>
1834 <tr><th>Other Examples:</th><td><a href="tests/range-selector.html">range-selector</a></td></tr>
1835 </table></div>
1836
1837 <div class='option'><p>
1838 <a name="rangeSelectorPlotFillColor"></a><b>rangeSelectorPlotFillColor</b>
1839 <a class="link" href="#rangeSelectorPlotFillColor">#</a>
1840 </p><p>
1841 The range selector mini plot fill color. This can be of the form "#AABBCC" or "rgb(255,100,200)" or "yellow". You can also specify null or "" to turn off fill.
1842 </p><p>
1843 <i>Type: string</i><br />
1844 <i>Default: #A7B1C4</i>
1845 </p><table class="gallerylinks">
1846 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/range-selector">range-selector</a></td></tr>
1847 <tr><th>Other Examples:</th><td><a href="tests/range-selector.html">range-selector</a></td></tr>
1848 </table></div>
1849
1850 <div class='option'><p>
1851 <a name="rangeSelectorPlotFillGradientColor"></a><b>rangeSelectorPlotFillGradientColor</b>
1852 <a class="link" href="#rangeSelectorPlotFillGradientColor">#</a>
1853 </p><p>
1854 The top color for the range selector mini plot fill color gradient. This can be of the form "#AABBCC" or "rgb(255,100,200)" or "rgba(255,100,200,42)" or "yellow". You can also specify null or "" to disable the gradient and fill with one single color.
1855 </p><p>
1856 <i>Type: string</i><br />
1857 <i>Default: white</i>
1858 </p><table class="gallerylinks">
1859 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/range-selector">range-selector</a></td></tr>
1860 <tr><th>Other Examples:</th><td><a href="tests/range-selector.html">range-selector</a></td></tr>
1861 </table></div>
1862
1863 <div class='option'><p>
1864 <a name="rangeSelectorPlotLineWidth"></a><b>rangeSelectorPlotLineWidth</b>
1865 <a class="link" href="#rangeSelectorPlotLineWidth">#</a>
1866 </p><p>
1867 The width of the range selector mini plot line.
1868 </p><p>
1869 <i>Type: float</i><br />
1870 <i>Default: 1.5</i>
1871 </p><table class="gallerylinks">
1872 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1873 <tr><th>Other Examples:</th><td><a href="tests/range-selector.html">range-selector</a></td></tr>
1874 </table></div>
1875
1876 <div class='option'><p>
1877 <a name="rangeSelectorPlotStrokeColor"></a><b>rangeSelectorPlotStrokeColor</b>
1878 <a class="link" href="#rangeSelectorPlotStrokeColor">#</a>
1879 </p><p>
1880 The range selector mini plot stroke color. This can be of the form "#AABBCC" or "rgb(255,100,200)" or "yellow". You can also specify null or "" to turn off stroke.
1881 </p><p>
1882 <i>Type: string</i><br />
1883 <i>Default: #808FAB</i>
1884 </p><table class="gallerylinks">
1885 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/range-selector">range-selector</a></td></tr>
1886 <tr><th>Other Examples:</th><td><a href="tests/range-selector.html">range-selector</a></td></tr>
1887 </table></div>
1888
1889 <div class='option'><p>
1890 <a name="rangeSelectorVeilColour"></a><b>rangeSelectorVeilColour</b>
1891 <a class="link" href="#rangeSelectorVeilColour">#</a>
1892 </p><p>
1893 The fillStyle for the veil of the range selector (e.g. "rgba(240, 240, 240, 0.6)"); if set, the rangeSelectorAlpha option is ignored.
1894 </p><p>
1895 <i>Type: string</i><br />
1896 <i>Default: null</i>
1897 </p><table class="gallerylinks">
1898 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1899 <tr><th>Other Examples:</th><td><a href="tests/range-selector.html">range-selector</a></td></tr>
1900 </table></div>
1901
1902 <div class='option'><p>
1903 <a name="showInRangeSelector"></a><b>showInRangeSelector</b>
1904 <a class="link" href="#showInRangeSelector">#</a>
1905 </p><p>
1906 Mark this series for inclusion in the range selector. The mini plot curve will be an average of all such series. If this is not specified for any series, the default behavior is to average all the visible series. Setting it for one series will result in that series being charted alone in the range selector. Once it’s set for a single series, it needs to be set for all series which should be included (regardless of visibility).
1907 </p><p>
1908 <i>Type: boolean</i><br />
1909 <i>Default: null</i>
1910 </p><table class="gallerylinks">
1911 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1912 <tr><th>Other Examples:</th><td><a href="tests/range-selector.html">range-selector</a></td></tr>
1913 </table></div>
1914
1915 <div class='option'><p>
1916 <a name="showRangeSelector"></a><b>showRangeSelector</b>
1917 <a class="link" href="#showRangeSelector">#</a>
1918 </p><p>
1919 Show or hide the range selector widget.
1920 </p><p>
1921 <i>Type: boolean</i><br />
1922 <i>Default: false</i>
1923 </p><table class="gallerylinks">
1924 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/range-selector">range-selector</a></td></tr>
1925 <tr><th>Other Examples:</th><td><a href="tests/iframe.html">iframe</a>; <a href="tests/range-selector.html">range-selector</a></td></tr>
1926 </table></div>
1927<a name="Rolling_20Averages"></a><h3>Rolling Averages</h3>
1928
1929 <div class='option'><p>
1930 <a name="rollPeriod"></a><b>rollPeriod</b>
1931 <a class="link" href="#rollPeriod">#</a>
1932 </p><p>
1933 Number of days over which to average data. Discussed extensively above.
1934 </p><p>
1935 <i>Type: integer &gt;= 1</i><br />
1936 <i>Default: 1</i>
1937 </p><table class="gallerylinks">
1938 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/annotations">annotations</a>; <font color="#9999FF" title="inactive">callbacks</font>; <a href="gallery/#g/link-interaction">link-interaction</a>; <a href="gallery/#g/range-selector">range-selector</a>; <a href="gallery/#g/resizable">resizable</a>; <a href="gallery/#g/resize">resize</a>; <a href="gallery/#g/styled-chart-labels">styled-chart-labels</a>; <a href="gallery/#g/synchronize">synchronize</a>; <a href="gallery/#g/temperature-sf-ny">temperature-sf-ny</a></td></tr>
1939 <tr><th>Other Examples:</th><td><a href="tests/annotation.html">annotation</a>; <a href="tests/callback.html">callback</a>; <a href="tests/century-scale.html">century-scale</a>; <a href="tests/crosshair.html">crosshair</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/dygraph-many-points-benchmark.html">dygraph-many-points-benchmark</a>; <a href="tests/grid_dot.html">grid_dot</a>; <a href="tests/legend-values.html">legend-values</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/perf.html">perf</a>; <a href="tests/range-selector.html">range-selector</a>; <a href="tests/resizable.html">resizable</a>; <a href="tests/resize.html">resize</a>; <a href="tests/reverse-y-axis.html">reverse-y-axis</a>; <a href="tests/spacing.html">spacing</a>; <a href="tests/styled-chart-labels.html">styled-chart-labels</a>; <a href="tests/synchronize.html">synchronize</a>; <a href="tests/temperature-sf-ny.html">temperature-sf-ny</a>; <a href="tests/unboxed-spark.html">unboxed-spark</a>; <a href="tests/underlay-callback.html">underlay-callback</a>; <a href="tests/visibility.html">visibility</a></td></tr>
1940 </table></div>
1941
1942 <div class='option'><p>
1943 <a name="showRoller"></a><b>showRoller</b>
1944 <a class="link" href="#showRoller">#</a>
1945 </p><p>
1946 If the rolling average period text box should be shown.
1947 </p><p>
1948 <i>Type: boolean</i><br />
1949 <i>Default: false</i>
1950 </p><table class="gallerylinks">
1951 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/annotations">annotations</a>; <font color="#9999FF" title="inactive">callbacks</font>; <a href="gallery/#g/dynamic-update">dynamic-update</a>; <a href="gallery/#g/range-selector">range-selector</a>; <a href="gallery/#g/temperature-sf-ny">temperature-sf-ny</a></td></tr>
1952 <tr><th>Other Examples:</th><td><a href="tests/annotation.html">annotation</a>; <a href="tests/callback.html">callback</a>; <a href="tests/crosshair.html">crosshair</a>; <a href="tests/dynamic-update.html">dynamic-update</a>; <a href="tests/fractions.html">fractions</a>; <a href="tests/isolated-points.html">isolated-points</a>; <a href="tests/missing-data.html">missing-data</a>; <a href="tests/numeric-gviz.html">numeric-gviz</a><b class="extlink" title="WARNING: accesses external resources (Google jsapi)">⚠</b>; <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/temperature-sf-ny.html">temperature-sf-ny</a>; <a href="tests/underlay-callback.html">underlay-callback</a></td></tr>
1953 </table></div>
1954<a name="Series"></a><h3>Series</h3>
1955
1956 <div class='option'><p>
1957 <a name="series"></a><b>series</b>
1958 <a class="link" href="#series">#</a>
1959 </p><p>
1960 Defines per-series options. Its keys match the y-axis label names, and the values are dictionaries themselves that contain options specific to that series.
1961 </p><p>
1962 <i>Type: Object</i><br />
1963 <i>Default: null</i>
1964 </p><table class="gallerylinks">
1965 <tr><th>Gallery Samples:</th><td><a href="gallery/#g/annotations">annotations</a>; <font color="#9999FF" title="inactive">annotations-native</font>; <a href="gallery/#g/independent-series">independent-series</a>; <a href="gallery/#g/per-series">per-series</a></td></tr>
1966 <tr><th>Other Examples:</th><td><a href="tests/annotation.html">annotation</a>; <a href="tests/annotation-native.html">annotation-native</a>; <a href="tests/connect-separated.html">connect-separated</a>; <a href="tests/custom-circles.html">custom-circles</a>; <a href="tests/dygraph-many-points-benchmark.html">dygraph-many-points-benchmark</a>; <a href="tests/fillGraph.html">fillGraph</a>; <a href="tests/fillGraph-alpha.html">fillGraph-alpha</a>; <a href="tests/grid_dot.html">grid_dot</a>; <a href="tests/hairlines.html">hairlines</a>; <a href="tests/isolated-points.html">isolated-points</a>; <a href="tests/per-series.html">per-series</a>; <a href="tests/plotters.html">plotters</a>; <a href="tests/range-selector.html">range-selector</a>; <a href="tests/smooth-plots.html">smooth-plots</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>
1967 </table></div>
1968<a name="Value_20display_2Fformatting"></a><h3>Value display/formatting</h3>
1969
1970 <div class='option'><p>
1971 <a name="digitsAfterDecimal"></a><b>digitsAfterDecimal</b>
1972 <a class="link" href="#digitsAfterDecimal">#</a>
1973 </p><p>
1974 Unless it’s run in scientific mode (see the <code>sigFigs</code> option), dygraphs displays numbers with <code>digitsAfterDecimal</code> digits after the decimal point. Trailing zeros are not displayed, so with a value of 2 you’ll get '0', '0.1', '0.12', '123.45' but not '123.456' (it will be rounded to '123.46'). Numbers with absolute value less than 0.1^digitsAfterDecimal (i.e. those which would show up as '0.00') will be displayed in scientific notation.
1975 </p><p>
1976 <i>Type: integer</i><br />
1977 <i>Default: 2</i>
1978 </p><table class="gallerylinks">
1979 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
1980 <tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
1981 </table></div>
1982
1983 <div class='option'><p>
1984 <a name="labelsKMB"></a><b>labelsKMB</b>
1985 <a class="link" href="#labelsKMB">#</a>
1986 </p><p>
1987 Show k/M/B for thousands/millions/billions on y-axis.
1988 </p><p>
1989 <i>Type: boolean</i><br />
1990 <i>Default: false</i>
1991 </p><table class="gallerylinks">
1992 <tr><th>Gallery Samples:</th><td><font color="#9999FF" title="inactive">annotations-gviz</font>; <font color="#9999FF" title="inactive">demo</font>; <font color="#9999FF" title="inactive">no-range</font>; <font color="#9999FF" title="inactive">two-axes</font></td></tr>
1993 <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>; <a href="tests/century-scale.html">century-scale</a>; <a href="tests/css-positioning.html">css-positioning</a>; <a href="tests/demo.html">demo</a>; <a href="tests/grid_dot.html">grid_dot</a>; <a href="tests/labelsKMB.html">labelsKMB</a>; <a href="tests/legend-formatter.html">legend-formatter</a>; <a href="tests/no-range.html">no-range</a>; <a href="tests/plugins.html">plugins</a>; <a href="tests/reverse-y-axis.html">reverse-y-axis</a>; <a href="tests/rtl.html">rtl</a>; <a href="tests/two-axes.html">two-axes</a>; <a href="tests/two-axes-vr.html">two-axes-vr</a></td></tr>
1994 </table></div>
1995
1996 <div class='option'><p>
1997 <a name="labelsKMG2"></a><b>labelsKMG2</b>
1998 <a class="link" href="#labelsKMG2">#</a>
1999 </p><p>
2000 Show Ki/Mi/Gi for powers of 1024 on y-axis. If used together with <code>labelsKMB</code> (deprecated), K/M/G are used instead.
2001 </p><p>
2002 <i>Type: boolean</i><br />
2003 <i>Default: false</i>
2004 </p><table class="gallerylinks">
2005 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
2006 <tr><th>Other Examples:</th><td><a href="tests/labelsKMB.html">labelsKMB</a></td></tr>
2007 </table></div>
2008
2009 <div class='option'><p>
2010 <a name="labelsUTC"></a><b>labelsUTC</b>
2011 <a class="link" href="#labelsUTC">#</a>
2012 </p><p>
2013 Show date/time labels according to UTC (instead of local time).
2014 </p><p>
2015 <i>Type: boolean</i><br />
2016 <i>Default: false</i>
2017 </p><table class="gallerylinks">
2018 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
2019 <tr><th>Other Examples:</th><td><a href="tests/drawing.html">drawing</a>; <a href="tests/labelsDateUTC.html">labelsDateUTC</a></td></tr>
2020 </table></div>
2021
2022 <div class='option'><p>
2023 <a name="maxNumberWidth"></a><b>maxNumberWidth</b>
2024 <a class="link" href="#maxNumberWidth">#</a>
2025 </p><p>
2026 When displaying numbers in normal (not scientific) mode, large numbers will be displayed with many trailing zeros (e.g. 100000000 instead of 1e9). This can lead to unwieldy y-axis labels. If there are more than <code>maxNumberWidth</code> digits to the left of the decimal in a number, dygraphs will switch to scientific notation, even when not operating in scientific mode. If you’d like to see all those digits, set this to something large, like 20 or 30.
2027 </p><p>
2028 <i>Type: integer</i><br />
2029 <i>Default: 6</i>
2030 </p><table class="gallerylinks">
2031 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
2032 <tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
2033 </table></div>
2034
2035 <div class='option'><p>
2036 <a name="sigFigs"></a><b>sigFigs</b>
2037 <a class="link" href="#sigFigs">#</a>
2038 </p><p>
2039 By default, dygraphs displays numbers with a fixed number of digits after the decimal point. If you’d prefer to have a fixed number of significant figures, set this option to that number of sig figs. A value of 2, for instance, would cause 1 to be display as 1.0 and 1234 to be displayed as 1.23e+3.
2040 </p><p>
2041 <i>Type: integer</i><br />
2042 <i>Default: null</i>
2043 </p><table class="gallerylinks">
2044 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
2045 <tr><th>Other Examples:</th><td><font color=red>NONE</font></td></tr>
2046 </table></div>
2047
2048 <div class='option'><p>
2049 <a name="valueFormatter"></a><b>valueFormatter</b>
2050 <a class="link" href="#valueFormatter">#</a>
2051 </p><p>
2052 Function to provide a custom display format for the values displayed on mouseover. This does not affect the values that appear on tick marks next to the axes. To format those, see axisLabelFormatter. This is usually set on a <a href='per-axis.html'>per-axis</a> basis. .
2053 </p><p>
2054 <i>Type: function(num_or_millis, opts, seriesName, dygraph, row, col)</i><br />
2055 </p><div class='parameters'><table>
2056<tr><th>num_or_millis:</th><td>The value to be formatted. This is always a number. For date axes, it’s millis since epoch. You can call new Date(millis) to get a Date object.</td></tr>
2057<tr><th>opts:</th><td>This is a function you can call to access various options (e.g. opts('labelsKMB')). It returns per-axis values for the option when available.</td></tr>
2058<tr><th>seriesName:</th><td>The name of the series from which the point came, e.g. 'X', 'Y', 'A', etc.</td></tr>
2059<tr><th>dygraph:</th><td>The dygraph object for which the formatting is being done</td></tr>
2060<tr><th>row:</th><td>The row of the data from which this point comes. g.getValue(row, 0) will return the x-value for this point.</td></tr>
2061<tr><th>col:</th><td>The column of the data from which this point comes. g.getValue(row, col) will return the original y-value for this point. This can be used to get the full confidence interval for the point, or access un-rolled values for the point.</td></tr>
2062 </table></div><p>
2063 <i>Default: Depends on the type of your data.</i>
2064 </p><table class="gallerylinks">
2065 <tr><th>Gallery Samples:</th><td><font color=red>NONE</font></td></tr>
2066 <tr><th>Other Examples:</th><td><a href="tests/hairlines.html">hairlines</a>; <a href="tests/labelsKMB.html">labelsKMB</a>; <a href="tests/multi-scale.html">multi-scale</a>; <a href="tests/value-axis-formatters.html">value-axis-formatters</a></td></tr>
2067 </table></div>
2068
2069<a name="point_properties"></a><h3>Point Properties</h3>
2070Some callbacks take a point argument. Its properties are:<br />
2071<ul>
2072<li>xval/yval: The data coordinates of the point (with dates/times as millis since epoch)</li>
2073<li>canvasx/canvasy: The canvas coordinates at which the point is drawn.</li>
2074<li>name: The name of the data series to which the point belongs</li>
2075<li>idx: The row number of the point in the data set</li>
2076</ul>
2077</div> <!-- #content -->
2078
2079 </div> <!-- .col-lg-12 -->
2080 </div> <!-- /div.row -->
2081</div> <!-- /div#main.container -->
2082
2083<!-- TODO(danvk): add a real footer -->
2084<!--@@@IFIMPRINT:<div class="container" style="border:1px solid green; margin-bottom:1ex;">@@@PLACE_IMPRINT_LINK_HERE_IF_NECESSARY@@@</div>:FIIMPRINT@@@-->
2085
2086 </body>
2087</html>