tests/customLabel.html

   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>
  16     <style type="text/css">
  17       /*
  18       NOTE: dygraphs does set some properties on the built-in legend, e.g.
  19       background-color and left. If you wish to override these, you can add
  20       "!important" to your CSS styles, as below.
  21
  22       The full list of styles for which this is necessary are listed in
  23       plugins/legend.js. They are:
  24       o position
  25       o font-size
  26       o z-index
  27       o width
  28       o top
  29       o left
  30       o background
  31       o line-height
  32       o text-align
  33       o overflow
  34       */
  35       #div_g14 .dygraph-legend {
  36         width: 100px;
  37         background-color: transparent !important;
  38         left: 40px !important;
  39       }
  40     </style>
  41   </head>
  42   <body>
  43     <p>Labels are transparent and repositioned:</p>
  44     <div id="div_g14" style="width:600px; height:300px;"></div>
  45
  46     <script type="text/javascript">
  47       g14 = new Dygraph(
  48             document.getElementById("div_g14"),
  49             NoisyData, {
  50               rollPeriod: 14,
  51               errorBars: true,
  52               labelsSeparateLines: true,
  53               yAxisLabelWidth: 20
  54             }
  55           );
  56     </script>
  57   </body>
  58 </html>