CODEWITHSUNDEEP
javascriptd3.jsnvd3.js
grimmus
grimmus

Reputation: 513

nvd3 multiBarChart - legend click events

I have a stacked multiBarChart with a legend.

When you disable all items via the legend then they all get enabled again. I would like to prevent this from happening and only enable them if a user clicks on an item.

I have been looking through the chart source (link below) but cannot locate where all the items get enabled again. I was thinking that maybe i could override the legendClick dispatch function but it seems this is not getting registered in my own JS (fiddle below)

controls.dispatch.on('legendClick', function(d,i) {
    //Some logic to keep all items disabled here
}

https://jsfiddle.net/s2vemzht/26/

https://github.com/novus/nvd3/blob/master/src/models/multiBarChart.js

How can i control what is enabled/disabled on legend click ?

UPDATE: 03/01/2017

I discovered an area in the code nv.d3.js file that sets all series back to enabled. How could I override this behaviour for a particular instance of the chart instead of changing the default behaviour in the source ?

//the default behavior of NVD3 legends is, if every single series
// is disabled, turn all series' back on.
data.forEach(function(series) { series.disabled = false});

https://github.com/novus/nvd3/blob/f81cd38015ecb4c3a11a161e37a62761276b87ac/build/nv.d3.js#L6433

Upvotes: 2

Views: 989

Answers (1)

beaver
beaver

Reputation: 17647

The correct handler for legendClick event has to be written this way:

chart.legend.dispatch.on('legendClick', function(d,i) {
    var dt = d3.select('#chart svg').datum();   // <-- all data
    console.log("legendClick", sel_data, idx_data, dt);

    // here you can do what you need
});

Fiddle updated: https://jsfiddle.net/beaver71/2dxthaL2/

Upvotes: 3

Related Questions