tests/customLabel.html

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