tests/customLabel.html

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