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

Responsive Chart (Bootstrap)

1 Answer 195 Views
Chart
This is a migrated thread and some comments may be shown as answers.
KM
Top achievements
Rank 1
KM asked on 17 Aug 2017, 10:55 AM

Hi,

I am using Kendo RadialGauge inside Bootstrap response grid...

The issue is how do I resize the gauge when the browser resize?

Thank you.

<div class="col-md-6">
            <div class="panel panel-primary copyright-wrap" id="xxx">
                <div class="panel-heading">Sales Challenge
                    <button type="button" class="close" data-target="#salesChallenge" data-dismiss="alert"> <span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                </div>
                <div class="panel-body">
                    <div id="gauge-container">
                        @(Html.Kendo().RadialGauge()
                            .Name("gauge")
                            .Pointer(pointer => pointer.Value(65))
                            .Scale(scale => scale
                                .MinorUnit(5)
                                .StartAngle(-30)
                                .EndAngle(210)
                                .Max(180)
                            )
                        )

                    </div>                    
                </div>                
            </div>
        </div>

 

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 21 Aug 2017, 08:47 AM
Hello,

The desired result can be achieved on the window resize event by applying the new width and height values and using the resize method of the RadialGauge. Please have in mind that custom logic has to be used to determine the new width and height values based on the window size:

http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/radialgauge#methods-resize

I hope this is helpful.

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular 2 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
KM
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or