4 <link rel=
"stylesheet" href=
"../dist/dygraph.css">
5 <title>Old y-axis range behavior
</title>
7 <script type=
"text/javascript" src=
"../dist/dygraph.js"></script>
8 <script src=
"data.js"></script>
11 <h2>Old y-axis range behavior
</h2>
12 <p>In dygraphs
1.x, if you set a
<code>valueRange
</code> for the y-axis, zoomed in and then double-clicked to zoom out, then the chart would zoom out to the
<code>valueRange
</code> that you specified.
</p>
13 <p>Starting with dygraphs
2, double-clicking will zoom out to the full range of the chart's data. This makes the x- and y-axes behave identically.
</p>
14 <p>This demo shows you how to get the old behavior in dygraphs
2 using a plugin. View source to see how.
</p>
16 <div id=
"demodiv" style=
"width: 800px; height: 300px;"></div>
17 <div id=
"demodiv2" style=
"width: 800px; height: 300px;"></div>
19 <script type=
"text/javascript">
20 const doubleClickZoomOutPlugin = {
21 activate: function(g) {
22 // Save the initial y-axis range for later.
23 const initialValueRange = g.getOption('valueRange');
26 e.dygraph.updateOptions({
27 dateWindow: null, // zoom all the way out
28 valueRange: initialValueRange // zoom to a specific y-axis range.
30 e.preventDefault(); // prevent the default zoom out action.
36 var gCustom = new Dygraph(
37 document.getElementById(
"demodiv"),
41 title: 'Custom y-axis range on zoom out',
45 doubleClickZoomOutPlugin
51 var gDefault = new Dygraph(
52 document.getElementById(
"demodiv2"),
56 title: 'Default y-axis range on zoom out',