tests/customLabel.html

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