chart when minimized and maximized overlapping on each other

[Sampathkumar]

Hello All,

I have attached my html code and output generated by this html code(Image.jpeg).
My requirement is the charts should be resized when the window resizes and it should come down in one straight line should not overlap on each other.

Kindly help me how can i achieve the requirement.It would be helpful/thankful if you can guide at earliest.

I would be very much thankful if anybody can create the charts with dummy data and display should be same as the .jpeg file which i attached in the zip file.

Current status of the html file is resizing is happening but it is overlapped on each other.
Thanks & Regards,
Sampath

[Sampathkumar]

Hello All,

I have attached my html code and output generated by this html code(Image.jpeg).
My requirement is the charts should be resized when the window resizes and it should come down in one straight line should not overlap on each other.
Kindly help me how can i achieve the requirement.It would be helpful/thankful if you can guide at earliest.

I would be very much thankful if anybody can create the charts with dummy data and display should be same as the .jpeg file which i attached in the zip file.The charts should not overlap on each other it should come one below the other.

One more question how can we create the chart height and width using bootstrap i:e (div class="col-lg-12 col-sm-11" )

Current status of the html file is resizing is happening but it is overlapped on each other.

Thanks & Regards,
Sampath

[Sampathkumar]

Hello All,

I have attached my html code and output generated by this html code(Image.jpeg).
My requirement is the charts should be resized when the window resizes and it should come down in one straight line should not overlap on each other.
Kindly help me how can i achieve the requirement.It would be helpful/thankful if you can guide at earliest.
I would be very much thankful if anybody can create the charts with dummy data and display should be same as the .jpeg file which i attached in the zip file.The charts should not overlap on each other it should come one below the other.
One more question how can we create the chart height and width using bootstrap i:e (div class="col-lg-12 col-sm-11" )

Current status of the html file is resizing is happening but it is overlapped on each other.

Thanks & Regards,
Sampath

[Sampathkumar]

Hello All,

I have attached my html code and output generated by this html code(Image.jpeg).
My requirement is the charts should be resized when the window resizes and it should come down in one straight line should not overlap on each other.
Kindly help me how can i achieve the requirement.It would be helpful/thankful if you can guide at earliest.
I would be very much thankful if anybody can create the charts with dummy data and display should be same as the .jpeg file which i attached in the zip file.The charts should not overlap on each other it should come one below the other.
One more question how can we create the chart height and width using bootstrap i:e (div class="col-lg-12 col-sm-11" )

Current status of the html file is resizing is happening but it is overlapped on each other.

Thanks & Regards,
Sampath

[Stamo Gochev]

Hi,

I suppose the overlapping of the charts (or their container elements) is caused by custom CSS rules. However, it is hard to tell what might be the actual cause using the provided snippets, so can you modify the following Dojo example, so that it shows the problem you are facing:

https://dojo.telerik.com/EhIpESIC/2

The chart definition is rather simple as it should not be connected with the original issue. Wrapping the "div" element with the container:

<div class="roundbox" id="CallTimingsOrg" style="width: 100%;height:475px;border: solid 5px steelblue; float:right; margin:10px;">

and including the styles for the "roundbox" class should help in replicating the problem on my side. In addition, the chart is created using JavaScript code, so that the sample can be inspected by both of us more easily in comparison to the result from the MVC wrappers. Please include the CSS files and definitions you are using, so that I can investigate the problem in more detail.

Regarding your question about the width and height of the chart - the chart is rendered according to the dimensions of its element, which can be configured with HtmlAttributes:

@(Html.Kendo().Chart()
    .Name("chart")
    .HtmlAttributes(new { style = "height: 400px; width: 500px;" })
)

Regards,
Stamo Gochev
Progress Telerik