I have drawn a horizontal stacked bar chart using d3 js in a box frame on jsp page. But the stack bar chart is huge i.e. SVG content is so big that all the bars of the stacked bar chart does not fit in the box and I have to put auto overflow in the box element, so that when I scroll I can see the hidden bars.

So I have a problem over here. If the number of bars in stacked bar chart is so big that all does not fit in the box at one go then X- Axis is not visible and I have to scroll all the way down to see the values on X-Axis.

What I want to do is keep my X-Axis just above the bottom of the box frame all the time and hide the content on the stacked bar chart below X -Axis.

I can manage the position of X-Axis make it visible all the time(even on scroll). I need help in hiding the content of of the stacked bar chart below the X-Axis. This is how I changed the X-Axis position, although this wont help when scroll is performed.

svg.append('g') .attr('class', 'axis') .attr('transform', 'translate(0,' + (height - 15) + ')') .call(xAxis);

I cant give the actual code, but I have tried to create my requirement on jsfiddle.

This what I have: http://jsfiddle.net/tusharkale52/ztzcsms5/

You can see that the X-Axis is after all the bars

This is what I want: https://jsfiddle.net/tusharkale52/4qqec6hs/

X_Axis is in between and the bars and I want to hide everything below X-Axis(even Y-Axis line).

Your help is appreciated.