[dygraphs.git] / tests / customLabel.html

<!DOCTYPE html>
<html>
  <head>
    <title>Label styles</title>
    <!--
    For production (minified) code, use:
    <script type="text/javascript" src="dygraph-combined.js"></script>
    -->
    <script type="text/javascript" src="../dygraph-dev.js"></script>

    <script type="text/javascript" src="data.js"></script>
    <style type="text/css">
      /*
      NOTE: dygraphs does set some properties on the built-in legend, e.g.
      background-color and left. If you wish to override these, you can add
      "!important" to your CSS styles, as below.

      The full list of styles for which this is necessary are listed in
      plugins/legend.js. They are:
      o position
      o font-size
      o z-index
      o width
      o top
      o left
      o background
      o line-height
      o text-align
      o overflow
      */
      #div_g14 .dygraph-legend {
        width: 100px;
        background-color: transparent !important;
        left: 40px !important;
      }
    </style>
  </head>
  <body>
    <p>Labels are transparent and repositioned:</p>
    <div id="div_g14" style="width:600px; height:300px;"></div>

    <script type="text/javascript">
      g14 = new Dygraph(
            document.getElementById("div_g14"),
            NoisyData, {
              rollPeriod: 14,
              errorBars: true,
              labelsSeparateLines: true,
              yAxisLabelWidth: 20
            }
          );
    </script>
  </body>
</html>
Commit	Line	Data
54425b14	1	<!DOCTYPE html>
8e4a6af3 DV	2	<html>
	3	<head>
	4	<title>Label styles</title>
7e5ddc94 DV	5	<!--
	6	For production (minified) code, use:
	7	<script type="text/javascript" src="dygraph-combined.js"></script>
	8	-->
	9	<script type="text/javascript" src="../dygraph-dev.js"></script>
	10
8e4a6af3	11	<script type="text/javascript" src="data.js"></script>
3f6b0b18 DV	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>
8e4a6af3 DV	37	</head>
	38	<body>
	39	<p>Labels are transparent and repositioned:</p>
d16579a0	40	<div id="div_g14" style="width:600px; height:300px;"></div>
8e4a6af3 DV	41
8e4a6af3 DV	42	<script type="text/javascript">
285a6bda	43	g14 = new Dygraph(
d16579a0	44	document.getElementById("div_g14"),
285a6bda	45	NoisyData, {
8e4a6af3 DV	46	rollPeriod: 14,
8e4a6af3 DV	47	errorBars: true,
285a6bda	48	labelsSeparateLines: true,
34fedff8	49	yAxisLabelWidth: 20
8e4a6af3 DV	50	}
	51	);
	52	</script>
	53	</body>
	54	</html>