This is a migrated thread and some comments may be shown as answers.

chart when minimized and maximized overlapping on each other

4 Answers 10 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Sampathkumar
Top achievements
Rank 1
Sampathkumar asked on 22 Jun 2018, 03:48 PM

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

4 Answers, 1 is accepted

Sort by
0
Sampathkumar
Top achievements
Rank 1
answered on 22 Jun 2018, 03:52 PM

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

0
Sampathkumar
Top achievements
Rank 1
answered on 22 Jun 2018, 03:53 PM

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

0
Sampathkumar
Top achievements
Rank 1
answered on 25 Jun 2018, 05:38 AM

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

0
Stamo Gochev
Telerik team
answered on 26 Jun 2018, 10:22 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Chart
Asked by
Sampathkumar
Top achievements
Rank 1
Answers by
Sampathkumar
Top achievements
Rank 1
Stamo Gochev
Telerik team
Share this question
or