.annotation {
font-size: 12px !important;
}
+ .dygraph-legend {
+ width: 300px;
+ }
</style>
<h2>dygraphs Annotations</h2>
showRoller: true,
customBars: true,
labelsKMB: true,
- labelsDivWidth: 300
}
);
"2008-05-09,80\n"
);
- g.setAnnotations([
- {
- series: "Temperature",
- x: "2008-05-08",
- shortText: "L",
- text: "Coldest Day"
- }
- ]);
+ g.ready(function() {
+ g.setAnnotations([
+ {
+ series: "Temperature",
+ x: "2008-05-08",
+ shortText: "L",
+ text: "Coldest Day"
+ }
+ ]);
+ });
</script>
</pre>
</div>
"2008-05-08,70\n" +
"2008-05-09,80\n"
);
- g.setAnnotations([
- {
- series: "Temperature",
- x: "2008-05-08",
- shortText: "L",
- text: "Coldest Day"
- }
- ]);
+ g.ready(function() {
+ g.setAnnotations([
+ {
+ series: "Temperature",
+ x: "2008-05-08",
+ shortText: "L",
+ text: "Coldest Day"
+ }
+ ]);
+ });
</script>
</div>
</div>
<tr><td><code>height</code></td><td>Height (in pixels) of the annotation flag or icon.</td></tr>
<tr><td><code>cssClass</code></td><td>CSS class to use for styling the annotation.</td></tr>
<tr><td><code>tickHeight</code></td><td>Height of the tick mark (in pixels) connecting the point to its flag or icon.</td></tr>
+<tr><td><code>tickWidth</code></td><td>Width of the tick mark connecting the point to its flag or icon.</td></tr>
+<tr><td><code>tickColor</code></td><td>Color of the tick mark connecting the point to its flag or icon.</td></tr>
<tr><td><code>attachAtBottom</code></td><td>If true, attach annotations to the x-axis, rather than to actual points.</td></tr>
<tr><td><code>clickHandler</code></td> <td>See Handlers, below</td></tr>
<tr><td><code>mouseOverHandler</code></td><td>See Handlers, below</td></tr>