+<!DOCTYPE html>
<html>
<head>
<title>Label styles</title>
- <!--[if IE]>
- <script type="text/javascript" src="excanvas.js"></script>
- <![endif]-->
- <script type="text/javascript" src="../dygraph-combined.js"></script>
- <script type="text/javascript" src="../dygraph-canvas.js"></script>
- <script type="text/javascript" src="../dygraph.js"></script>
+ <!--
+ 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="g14" style="width:600px; height:300px;"></div>
+ <div id="div_g14" style="width:600px; height:300px;"></div>
<script type="text/javascript">
g14 = new Dygraph(
- document.getElementById("g14"),
+ document.getElementById("div_g14"),
NoisyData, {
rollPeriod: 14,
errorBars: true,
- labelsDivWidth: 100,
- labelsDivStyles: {
- 'background-color': 'transparent',
- 'top': '210px'
- },
labelsSeparateLines: true,
- yAxisLabelWidth: 10
+ axes: {
+ y: {
+ axisLabelWidth: 20
+ }
+ }
}
);
</script>