Dojo charts create chart with different dimensions

Question

I created a div with height 240px and add a chart to it. It creates the chart svg with more height of 280px. My code is:

domConstruct.create("div", { id : "chart", style : 
        " width: 400px; height: 240px;  margin: 20px ; " }, 
        dom.byId("header"), "after");

And

var chart=new Chart("chart");
chart.addPlot("default", {type: Lines});
chart.setTheme(Claro);
chart.addAxis("x");
chart.addAxis("y", { vertical : true});
chart.addSeries("Series A",[1,2,3,4,5,6]);
chart.render();

and then the generated html would be like

<svg overflow="hidden" width="440" height="280">

inside the div id=chart

Because of this, the next chart i created, overlaps this chart.

Edit The important thing here I wanted to achieve is a gap between the charts and not a solution to prevent them from overlapping. Removing the margin would do it but as I said i want some space. Padding also creates the same problem.

Please see the demo @jsFiddle

Answer 1

You have to take into consideration the margin height also.Your code should like this if you want to fit it into the div

domConstruct.create("div", { id : "chart", style : 
            " width: 360px; height: 200px;  margin: 10px ; " }