Reputation: 80
I would like to display a combination of the dygraph legend options "always" and "follow". The drawback of using "follow" is that there is no legend if there is no mouse over the graph. I want to display the default legend in a separate div if there is no mouse over, similar to legend "always" with a labelsDiv set. This would allow a user to take a screenshot of the graph without worrying about placing the mouse on the graph to identify the series.
Dygraph.js appears to only allow one legend.
My approach is to create a static legend using the names of the series, but I'm missing the color for each series. Is it possible to identify the color of each series of the dygraph?
EDIT: I've provided an example below, where "dygraphcolor1" would represent the color of each series.
//script
var serieslabels = [point1, point2, point3]
g = new Dygraph(document.getElementById(chart_title), data,
{labels: serieslabels,
legend: 'follow',
labelsSeparateLines: true,
labelsDiv: document.getElementById('chart_title_legend'), //remove since not allowed with legend = 'follow'
for (a=1; a < labels.length; a++){
//html via document.write
// this will make a list of each series label displayed in the same color as dygraph.
<p style ="color:dygraphcolor1"> serieslabels[a]</p>
}
Upvotes: 2
Views: 462
Reputation: 16955
Well it's more of a hack than I'd hoped, but the rough idea is to set legend: 'follow'
on mouseenter and legend: 'always'
on mouseleave. dygraphs doesn't expect you to change the legend display in this way, so you have to do a bit of cleanup afterwards:
div.addEventListener('mouseenter', () => {
g.updateOptions({legend: 'follow'});
});
div.addEventListener('mouseleave', () => {
g.updateOptions({legend: 'always'});
// A "follow" legend gets hidden on mouseleave, so make it visible again:
div.querySelector('.dygraph-legend').style.display='';
// This repositions it to the top/right of the chart:
g.plugins_[0].plugin.predraw({dygraph: g});
});
Here's a complete demo. For customizing the display of the legend, you may also be interested in the legendFormatter
callback.
Upvotes: 1