Use "legend" option with "follow" value. Hide legend on deselect.
[dygraphs.git] / tests / customLabelFollow.html
CommitLineData
250bb62b
PS
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
5 <title>Label styles</title>
6 <!--[if IE]>
7 <script type="text/javascript" src="../excanvas.js"></script>
8 <![endif]-->
9 <!--
10 For production (minified) code, use:
11 <script type="text/javascript" src="dygraph-combined.js"></script>
12 -->
13 <script type="text/javascript" src="../dygraph-dev.js"></script>
14
15 <script type="text/javascript" src="data.js"></script>
11ce506e
PS
16 <style type="text/css">
17 .dygraph-legend {
18 background-color: rgba(200, 200, 255, 0.75) !important;
19 padding: 4px;
20 border: 1px solid #000;
21 border-radius: 10px;
22 box-shadow: 4px 4px 4px #888;
23 pointer-events: none;
24 }
25 </style>
250bb62b
PS
26 </head>
27 <body>
28 <p>Legend follows highlighted points:</p>
29 <div id="div_g14" style="width:600px; height:300px;"></div>
30
31 <script type="text/javascript">
32 g14 = new Dygraph(
33 document.getElementById("div_g14"),
34 NoisyData, {
35 rollPeriod: 14,
36 errorBars: true,
37 labelsDivWidth: 100,
250bb62b 38 labelsSeparateLines: true,
a22cc809 39 legend: "follow",
250bb62b
PS
40 yAxisLabelWidth: 20
41 }
42 );
43 </script>
44 </body>
45</html>