CODEWITHSUNDEEP
javascriptd3.jsnvd3.js
Batanichek
Batanichek

Reputation: 7871

nvd3 controls into 2 line

I have standart nvd3 multybarchart example with activate controls :

chart.showControls(true);

When screen width changed i get bad view of controls and legend , like : enter image description here

is there way to fix it?

For example transform controls to two lines like:

enter image description here

tried to do it with d3.select('.nv-controlsWrap').attr("transform","translate(...,...) rotate(...)");

but dont find way to achieve two line controls view.

thx

ps RU_SO original question.

Upvotes: 0

Views: 124

Answers (1)

Mark
Mark

Reputation: 108557

Should be as easy as:

d3.select('.nv-controlsWrap .nv-series:nth-child(2)')
  .attr('transform', 'translate(0, 25)');

Updated fiddle.

For "fix" it on draw:

function stackControls(){
  d3.select('.nv-controlsWrap .nv-series:nth-child(2)').attr('transform', 'translate(0, 25)');
}
nv.utils.windowResize(function(){
    chart.update();
    stackControls();
});    
d3.select('.nv-controlsWrap').on('click', stackControls);
d3.select('.nv-legendWrap').on('click', stackControls);    
stackControls();

Updated fiddle.

Upvotes: 1

Related Questions