Cannot resize graph

[Marc]

I am having trouble make a chart wider. My html & JS is below:

<div class="demo-section k-content wide" style="width: 100%">
<div id="indepthGraph"></div>
</div>

$("#indepthGraph").kendoChart({

title: {
text: "Graph Shit"
}

});

 

However, when I check developer tools elements tab, I see that my both my div's have disappeared, to be replaced by this <svg> tag. This is fine, however, on your examples http://demos.telerik.com/kendo-ui/bar-charts/multiple-axes - developer tool shows the two divs still there, with the <svg> tag inside the child div.

Thanks

Marc

[Eduardo Serra]

Hello Marc,

The disappearance of the HTML div elements shouldn't be caused by the Kendo UI Chart. I have copied your code into a Kendo UI Dojo to double check and they can be seen where they should in the developer tools of your browser; you can take a look at it here.

In order to offer you the best support possible, please share with us the complete code you're working with for this chart and a screenshot of the relevant section from the browser developer tools.

Thank you.

Regards,
Eduardo Serra
Telerik by Progress

[Marc]

Hi Eduardo,

Attached is the print screen from Chrome dev tools.

My code is the following:

Html (this is inside an AngularJS component, which is placed inside a Kendo Window component)

<div class="demo-section k-content wide" style="width: 100%">
<div id="indepthGraph"></div>
</div>

JS (inside the AngularJS component controller, inside a watch, which watches the data which is used for the datasource)

if (graph == null) {
graph = $("#indepthGraph").kendoChart({
legend: {
position: "top"
},
series: [
{
field: "averagePriceAmount",
name: "Average Price Amount",
type: "line",
axis: "averagePriceAmountAxis"
},
{
field: "unitsEstimate",
name: "Units Estimate",
type: "column",
axis: "unitsAxis"
},
{
field: "salesEstimate",
name: "Sales Estimate",
type: "column",
axis: "unitsAxis"
}
],
categoryAxis: {
field: "offerPeriodName",
labels: {
rotation: -90
},
majorGridLines: {
visible: true
}
},
valueAxis: [
{
name: "unitsAxis",
title: {text: "Units"}
}, {
name: "averagePriceAmountAxis",
title: {text: "Average Price Amount"}
}
]
});

if (ipCookie("foresight_theme")) {
$("#indepthGraph").data("kendoChart").setOptions(
{
theme: ipCookie("foresight_theme")
}
);
}

$("#indepthGraph").data("kendoChart").setDataSource(dataSource);

 

[Eduardo Serra]

Hello Marc,

From the code you shared, it is not possible to determine what's causing this issue. In order to be of more help for you, please share with us a runnable sample that reproduces the issue; you can share it through plunker and can use any of the samples here as a base.

Thank you.

Regards,
Eduardo Serra
Telerik by Progress