Kendo UI Chart does not occupying all div width - kendo-ui

Question

I am using Kendo UI Dataviz to develop my application, but I am getting a problem for render the chart. When the chart is renderer, it was not occupying all the div width, as shown below.
My JS code:
function creatChart() {
$("#chart").kendoChart({
dataSource : {
transport : {
read : {
url : "myUrl",
dataType : "json",
},
}
},
legend : {
position : "top"
},
series : [ {
type : "area",
field : "valor1",
color : "#73c100",
axis : "axes1"
}, {
type : "line",
field : "valor2",
color : "#007eff",
position : "right",
axis : "axes2"
} ],
valueAxes : [ {
name : "axes1",
color : "#73c100",
min : 0,
max : 150
}, {
name : "axes2",
color : "#007eff",
min : 0,
max : 150
} ],
categoryAxis : {
field : "data",
labels : {
template : "#=$(this).formatDate(value)#",
rotation: -35
}
},
tooltip : {
visible : true,
format : "{0}"
}
});
}
My HTML code:
<div id="tabs-1">
<div class="row-fluid" style="padding-top: 45px">
<div class="span2" style="padding-left: 15px; padding-top: 15px; padding-bottom: 15px">Selecione
o período:
</div>
<div class="span3">
<input type="text" class="dataInicio" readonly="readonly" style="margin-top: 15px;"/>
</div>
<div class="span1">
<label style="margin-top: 15px;">à</label>
</div>
<div class="span5">
<input type="text" class="dataFim" readonly="readonly" style="margin-top: 15px;"/>
<button class="btn submit" style="margin-top: 10px;">Buscar</button>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div id="chart"></div>
</div>
</div>
</div>
I need the chart occupy all the div width. Can anyone help me, please?

Answer 1

use the lines
chartArea: { margin: 0, padding: 0, height: (screen.height * 0.50), width: (screen.width * 0.35) },
plotArea: { margin: 0, padding: 0, height: (screen.height * 0.50), width: (screen.width * 0.35) },
find the code below
$("#chartNo1").kendoChart({
theme: $(document).data("kendoSkin") || "silver",
title: {
text: "Store Visits"
},
chartArea: { margin: 0, padding: 0, height: (screen.height * 0.50), width: (screen.width * 0.35) },
plotArea: { margin: 0, padding: 0, height: (screen.height * 0.50), width: (screen.width * 0.35) },
legend: {
visible: false
},
seriesDefaults: {
type: "bar"
},
series: [{
name: "Total Visits",
data: [56000, 63000, 74000, 91000, 117000, 138000]
}, {
name: "Unique visitors",
data: [52000, 34000, 23000, 48000, 67000, 83000]
}],
valueAxis: {
max: 140000,
line: {
visible: false
},
minorGridLines: {
visible: true
}
},
categoryAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
};

Answer 2

other way could be
chartArea: { margin: 0, padding: 0, height: (window.innerHeight * 0.50), width: (window.innerWidth * 0.50) },
plotArea: { margin: 0, padding: 0, height: (window.innerHeight * 0.50), width: (window.innerWidth * 0.50) },
change the percent to specific size