在<div>内部创建的图形似乎比<div>本身大，并且重叠</div> </div>

Question

我正在使用Canvas.js创建图表，我将其放置在<div>内部，并在底部两侧重叠。我尝试在初始版本中创建另一个<div>但无济于事。

以下是相关的html：

<div class="box" id="gdpbox">
        <script type = 'text/javascript'>
        var gdpChart = new CanvasJS.Chart("gdpbox", {
        title: {
            text: "Gross Domestic Product"
        },
        data: [{
            type: "line",
            dataPoints: [

                //I took out about 500 data points, these are just for reference

                { x: new Date(2013,07,01), y: 15779.9}, 
                { x: new Date(2013,10,01), y: 15916.2}, 
                { x: new Date(2014,01,01), y: 15831.7}, 
                { x: new Date(2014,04,01), y: 15985.7},

            ]
        }]
    });
    gdpChart.render();
    gdpChart = {};    
        </script>
        </div>

这是框中的CSS：

.box{
    /*
    height:40%;
    width:35%;
    */
}

和gdpbox：

#gdpbox{    
    border: solid #60C3B1;
    position:absolute; 
    margin: 5% 13% auto;
}

以下是图表目前的样子：

应该放在青色盒子里。

希望这足以说明我做错了什么。如果需要，我可以提供更多细节。

我意识到默认图形大小是500px，这就是导致它重叠的原因。但现在我无法弄清楚如何在我的盒子里面放置图形，因为盒子没有设置尺寸。