How to set size and/or resize a kendo chart ?

2 Answers 9087 Views
Charts
Thierry
Top achievements
Rank 1
Thierry asked on 03 Feb 2012, 11:05 AM
Hello,
I tryed to set the size of the chart through the parent div, but it seems that there is no result.. Size doesn't follow my values.
Is there a correct way to do that ?
Thanks in advance

PS : excuse me for my bad english..

2 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 06 Feb 2012, 02:02 PM
Hello Thierry,

The size of the Chart can be set initially either in the configuration or by specifying the size on the parent element. For example:
$("#chart").kendoChart({
    chartArea: {
        width: 200,
        height: 200
    },
    ....
If you wish to change the size dynamically, you should also repaint the Chart by using the refresh or redraw methods after the change.


All the best,
Daniel
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Thierry
Top achievements
Rank 1
commented on 06 Feb 2012, 02:24 PM

Thank you Daniel.
last week, i'd finally use the styles for the div, and it works. My precedent try was with the width and height attributes on the div, which are not valid for a div.. I learn ;-)
I will use your solution, this is more clean.
Alexander
Top achievements
Rank 1
commented on 27 Nov 2012, 02:31 PM

Hello, is it possible to do the same with ASP.NET MVC Kendo UI control?
Alexander
Top achievements
Rank 1
commented on 27 Nov 2012, 02:59 PM

Hello, is it possible to do the same with ASP.NET MVC Kendo UI control?
Alexander
Top achievements
Rank 1
commented on 27 Nov 2012, 03:13 PM

Found it.
It can be done with css styles.

    <style>
        .k-chart {
            height280px;
            width390px;
        }
    </style>
Laura
Top achievements
Rank 1
commented on 17 Jan 2013, 08:15 PM

Is it possible to set the width of the chart as a %?

I'm trying to display three charts in a row to fill the screen no matter what size the window is. 

Any suggestions?

Thanks,

Laura
0
Daniel
Telerik team
answered on 22 Jan 2013, 03:40 PM
Hello Laura,

It is possible to set the width in percentages on the parent or on the wrapper element but the Chart does not resize automatically. You could use the window resize event and redraw the charts using the redraw method.

Regards,
Daniel
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Ming
Top achievements
Rank 1
commented on 18 Mar 2015, 10:37 PM

Hi, when I use the chartarea to define the size of the box, the legend of the chart doesn't show fully (only half). Do you encounter the same issue? Thanks.
Daniel
Telerik team
commented on 23 Mar 2015, 10:58 AM

Hello Ming,

The entire legend will not be shown if the size set with the configuration is not sufficient. If the size is sufficient be the legend is incorrectly positioned when using the chartArea configuration then please provide a runnable sample so I can investigate further.

Regards,
Daniel
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
TISAL
Top achievements
Rank 1
commented on 07 May 2015, 12:25 PM

Thanks Alexander!
Tags
Charts
Asked by
Thierry
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Share this question
or