{"id":7544,"date":"2015-07-26T05:12:28","date_gmt":"2015-07-26T05:12:28","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2015\/07\/26\/how-to-set-height-and-width-of-nvd3-chart-open-source-projects-novus-nvd3\/"},"modified":"2015-07-26T05:12:28","modified_gmt":"2015-07-26T05:12:28","slug":"how-to-set-height-and-width-of-nvd3-chart-open-source-projects-novus-nvd3","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2015\/07\/26\/how-to-set-height-and-width-of-nvd3-chart-open-source-projects-novus-nvd3\/","title":{"rendered":"how to set height and width of nvd3 chart-open source projects novus\/nvd3"},"content":{"rendered":"<p><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/d8306a17efc82ce9bdce331d2c2ebb47?s=128&amp;d=identicon&amp;r=PG\" \/> <strong>shabeer90<\/strong><\/p>\n<p>Yes it is possible, like you have specified the width &amp; height of the chart, you have to use the <code>d3.select<\/code> and set its width &amp; height attribute.<\/p>\n<p>Changes to the code are below and there is a version of the code here<\/p>\n<pre><code>function visualizeData(data) {\n    nv.addGraph(function() {\n        var width = 600, height = 400;\n        chart = nv.models.multiBarChart().x(function(d) {\n            return d.x;\n        }).y(function(d) {\n            return d.y;\n        }).color(['#aec7e8', '#7b94b5', '#486192']).stacked(true)\n        \/\/.margin({top:150,right:150,bottom:150,left:150})\n        .width(width).height(height);\n\n        chart.multibar.hideable(false);\n\n        chart.xAxis.showMaxMin(true).tickFormat(d3.format(',f'));\n\n        chart.yAxis.tickFormat(d3.format(',.1f'));\n\n        d3.select('#chart svg').datum(data).transition().duration(500).call(chart).style({ 'width': width, 'height': height });\n\n        nv.utils.windowResize(chart.update);\n\n        return chart;\n    });\n}\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>shabeer90 Yes it is possible, like you have specified the width &amp; height of the chart, you have to use the d3.select and set its width &amp; 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 = [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7544","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7544","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=7544"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7544\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=7544"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=7544"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=7544"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}