<!DOCTYPE html>
<html>
<head>
- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
+ <link rel="stylesheet" href="../css/dygraph.css">
<title>Label styles</title>
- <!--[if IE]>
- <script type="text/javascript" src="../excanvas.js"></script>
- <![endif]-->
<!--
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="../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>
NoisyData, {
rollPeriod: 14,
errorBars: true,
- labelsDivWidth: 100,
- labelsDivStyles: {
- 'backgroundColor': 'transparent',
- },
labelsSeparateLines: true,
- yAxisLabelWidth: 20
+ axes: {
+ y: {
+ axisLabelWidth: 20
+ }
+ }
}
);
</script>