[dygraphs.git] / tests / customLabel.html

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