Use CSS for tests, gallery and docs
[dygraphs.git] / 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>