[dygraphs.git] / tests / customLabel.html

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