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?

Terminate

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;
    });
}

Lornalorne

Thanks, I see that your modifications do work. But can you please explain why the width/height needs to be specified in 2 separate places? It seems redundant and cumbersome. I love the NV3 work, but this seems like an undesirable aspect of the API. I'm sure there's a good reason I'm not understanding. Could you please educate me here? In dc.js for example, you set the width/height in one place only and dc.js takes care of the rest for you. – Terminate

I believe the calls to width and height are setting the width and height properties of the chart, whereas the calls to attr with the width and height properties are setting the width and height of the svg the chart is being drawn onto. – Beak

nvd3 is complex – Reeder

Answer 2

For the AngularJs version (angular-nvd3), I had to add the height either in chart options and as an attribute:

chart.html

<nvd3 options='vm.chartOptions' data='vm.chartData' height="250" config="vm.chartConfig">
    </nvd3>

chart.controller.js

vm.chartOptions = {
    chart : {
        height : 250,
        type : "pieChart",
        donut : true,
        showLegend : false,
        //The rest of the configuration
};

As it is told in the comments, first seems to control the height of the inner svg and the second does the global chart height.

Gobelin