CODEWITHSUNDEEP
javascriptcsschartsdygraphs
Plastic
Plastic

Reputation: 10318

dygraphs - Hide series from Legend

i'm trying to build a dynamic chart with 3 series using Dygraphs, the problem is that i'm not able to make the chart shows only one of them in legend. I have 3 series named "Prec", "Val" and "Now", everytime a user passes with cursor over the chart my goal is to show in the legend only value from "Val" serie.

My series data are given in "native" format, in other words it's an array of value with date in the first element:

va data = {
           [ X, Open, Val, Now],
           [ 2015-11-26, 1002, 1024, 1026],
           [ 2015-11-27, 1002, 1025, 1026],
           [ 2015-11-28, 1002, 1027, 1025],
            ...
          };

I checked in docs (http://dygraphs.com/options.html) without any luck. Any suggestion would be appreciated.

UPDATE: I tried to add a custom valueFormatter to the option object like this:

axes:{
    y:{
        valueFormatter: function (y, opts, seriesName){
            if (seriesName == "Open" || seriesName == "Now") return "";
            else return y;
        }
    }
}

but it just hide the value, not the serie's Name so now my chart's legend shows: 

2015-11-26 Open: Val:1024 Now:

Upvotes: 3

Views: 1836

Answers (1)

Plastic
Plastic

Reputation: 10318

The solution is to add an attribute to the Dygraphs option object to activate the highlight feature, even empty if you want to use default settings:

highlightSeriesOpts: {}

it adds 'highlight' class to the serie's legend spans when you hover it.

then you have to add these rows to your CSS

.dygraph-legend > span { display: none; }
.dygraph-legend > span.highlight { display: inline; }

in this way only the highlighted series will be visible in the legend.

source: Dygraphs docs

Upvotes: 3

Related Questions