Kendo UI Chart does not occupying all div width

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

    };