[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
	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="../dygraph-dev.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	yAxisLabelWidth: 20
	50	}
	51	);
	52	</script>
	53	</body>
	54	</html>