Programatically disable series on nvd3 Horizontal Multi-Bar Chart

Question

The issue is that I have a lot of series on my chart and, on load, I would like only 3 selected.

Is there a way to 'disable' ( hide ) a series on nvd3 Horizontal Multi-Bar Chart? ( I'm looking for the click series behavior but programatically )

I have tried to send JSON with 'visible': false, but it not works.

var data=[{"key": "Series 1",
           "visible": false, 
           "values": [{"value": 10000.0, "label": ...

Following @shabeer90 instructions tested with:

           "disabled": true,

In this case series is disabled but don't allow to switch to enable clicking series circle.

Answer 1

To the best of my knowledge, you cannot do this directly with NVD3 (at least not without modifying the source). However, you can trigger this programatically by simulating the click on the legend element:

d3.select("g.nv-legendWrap").selectAll("g.nv-series")
        .each(function(d) {
            this.dispatchEvent(new Event("click"));
        });

Assuming that your data has an attribute visible that determines whether the series should be shown or not, you can filter based on that:

d3.select("g.nv-legendWrap").selectAll("g.nv-series")
        .filter(function(d) { return d.visible == false; })
        .each(function(d) {
            this.dispatchEvent(new Event("click"));
        });

If you're using a transition to create the graph, remember to call this code when the transition has finished. Complete demo here.