nvd3 - How to redraw axis on windows resize

2
votes

I've being trying to solve this for a while now, but with no luck.

I need to be able to resize my chart and update the scales (only X at the moment) on window resize.

I tried with nv.utils.windowResize and with window.on("resize", update); But none of the above works.

The function that generates my axis is called every time (console.log is reached) but dfor some reason the axis is not updating in the chart.

Any suggestion? this is my first attempt with D3 and NVD3 ever and it's a bit complicated.

Thanks for the patience and support, here's an example code (using angular js): http://codepen.io/NickHG/pen/rLWNea?editors=0010

1
angularjsd3.jsnvd3.js

1 Answers

0
votes

It seams like I managed to solve this.

It is not clear at all in the documentation, but this is what I did:

var width = window.innerWidth;
var xScale =  d3.time.scale().domain([date, date]).nice(d3.time.day).range([0, width])   

chart.xAxis.scale(xScale)
           .ticks(6)
           .tickFormat(d3.time.format("%H:%M"))  

nv.utils.windowResize(function() {
            width = window.innerWidth;
            chart.xAxis.range([0, width])
            chart.update()     
});