Multiple dygraph legends

user_11872187 0
Viewed 292

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>

}
dygraphs python
1 Answers

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.

user_3889510
Related