nvd3's x-axis broken due to one line change?

Question

In this live code link,

http://nvd3.org/livecode/index.html#codemirrorNav

if you add chart.yRange([0, 300]) for inverting the y-axis, the x-axis moves up and sticks to the top(near the legend).

Any possible fix?

PS: The problem is with most of the charts on that page but 'Cumulative line chart' is closest to my use case.

Answer 1

The position of the x axis is hardcoded to y.range()[0] in the NVD3 source, but you can adjust this after the chart has been drawn. In your particular case, add the following code after .call(chart):

d3.select('.nv-x.nv-axis')
  .attr('transform', 'translate(0,' + chart.yAxis.range()[1] + ')');