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?

score 35 · Accepted Answer · edited May 28 '14 at 14:21

35

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

edited May 28 '14 at 14:21

David Sherret

82,097
24
165
160

answered May 10 '13 at 07:40

shabeer90

5,051
3
44
64

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. – lostdorje May 10 '13 at 10:24
4

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. – Michael Jun 22 '13 at 19:39
nvd3 is complex – SuperUberDuper Feb 16 '17 at 19:34

score 0 · Answer 2 · answered Sep 12 '17 at 13:34

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.

how to set height and width of nvd3 chart

2 Answers2

Linked