how to set height and width of nvd3 chart

Question

I'm trying to set the width and height of a nvd3 multi bar chart programmatically using

chart.width(600); chart.height(400); 

See the example here:

http://jsfiddle.net/hPgyq/20/

As you can see this really messes up the chart. I know I can do this is CSS with:

#chart svg {   width: 600px;   height: 400px; } 

but I thought this was also possible using the width() and height() functions on the chart. Am I doing something wrong here or am I mis-using the two functions?

Answer 1

Yes it is possible, like you have specified the width & height of the chart, you have to use the d3.select and set its width & height attribute.

Changes to the code are below and there is a version of the code here

function visualizeData(data) {     nv.addGraph(function() {         var width = 600, height = 400;         chart = nv.models.multiBarChart().x(function(d) {             return d.x;         }).y(function(d) {             return d.y;         }).color(['#aec7e8', '#7b94b5', '#486192']).stacked(true)         //.margin({top:150,right:150,bottom:150,left:150})         .width(width).height(height);          chart.multibar.hideable(false);          chart.xAxis.showMaxMin(true).tickFormat(d3.format(',f'));          chart.yAxis.tickFormat(d3.format(',.1f'));          d3.select('#chart svg').datum(data).transition().duration(500).call(chart).style({ 'width': width, 'height': height });          nv.utils.windowResize(chart.update);          return chart;     }); }