Kendo UI Chart Does Not Take Full Width Div

Question

I am using Kendo UI Dataviz to develop my application, but I am having trouble rendering a chart. When a chart is a visualization tool, it did not occupy the entire width of the div , as shown below.

My JS code is:

  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 is:

  <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 a chart that spans the entire width of a div . Can someone help me please?

Answer 1

use strings

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