There are standard examples of nvd3 stacked bar with the addition of controls.

chart.showControls(true);

When the screen size is changed, the controls intersect with the legend: enter image description here

Is it possible to arrange control in two lines enter image description here

I tried to play with

d3.select('.nv-controlsWrap').attr("transform","translate(...,...) rotate(...)");

but they only move the legend as a whole and not turn it into two lines.

Update

The solution proposed by @Mark on EN_SO :

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

new fiddle

But when using the legend (click on Stream0 for example), it returns to its original position. enter image description here

Is it possible, like using a legend, to preserve the position of controls?

    1 answer 1

    Answer offered by @Mark to EN_SO

    In order for the transformation of controls to occur every time after rebuilding the graph, we create a transformation function:

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

    And add it to all elements:

     nv.utils.windowResize(function(){ chart.update(); stackControls(); }); d3.select('.nv-controlsWrap').on('click', stackControls); d3.select('.nv-legendWrap').on('click', stackControls); stackControls();

    fiddle