Radial Gauge Height (jQuery)

3 Answers 37 Views

LinearGauge

Christopher asked on 03 Jul 2025, 01:24 AM

How do you set and change the height?

$('#gauge').kendoRadialGauge({
    pointer: { value: 0, },
    scale: {
        min: 0,
        max: 100,
        minorUnit: 5,
        startAngle: -30,
        endAngle: 210,
        gaugeArea: { height: 310, },
        ranges: [
            { from: 0, to: 20, color: "#bbf2df" },
            { from: 21, to: 49, color: "#ffc700" },
            { from: 50, to: 1000, color: "#fc4a4a" }
        ]
    }
});

Still has the default height of 200px. Calling resize() after changing the css attribute also doesn't change the height.

$('#gauge').css({ height: '300px' }).data("kendoRadialGauge").resize(true);

Can you not make the gauges smaller than 200px?

3 Answers, 1 is accepted

answered on 07 Jul 2025, 11:34 AM

What version are you using? I am using 2023.3.1114.

This is my code and the result:

$('#occgauge').kendoRadialGauge({
    pointer: { value: 0, },
    scale: {
        min: 0,
        max: 100,
        minorUnit: 5,
        startAngle: -30,
        endAngle: 210,
        gaugeArea: {
            height: 310,
            width: 300
        },
        ranges: [
            { from: 0, to: 20, color: "#bbf2df" },
            { from: 21, to: 49, color: "#ffc700" },
            { from: 50, to: 1000, color: "#fc4a4a" }
        ]
    }
});

Even in the code you posted of mine, this is the size when you inspect the object:

Christopher

commented on 10 Jul 2025, 01:36 PM

The initial height is ignored; in your code and in mine.

I was able to get it to resize; neither resize or redraw changed it, but if I called the code a second time after loading the data then it adjusted to the correct size.

Martin

commented on 15 Jul 2025, 10:13 AM

I modified the example to change the height of the Gauge 3 seconds after creating the component. Would that be what you meant by initial height? Still I am glad to hear that you managed to get it to work, as far as I understand. Let me know if you have any further comments on the matter.

Christopher

commented on 15 Jul 2025, 12:27 PM

Yes, that's what I ended up having to do to change the height. No, by initial height, I mean the value set in code. All of the other charts are the height that is set in the options (ChartArea field), and the API says the same should be the same for the RadialGauge (GaugeArea field), but that is the only one that does not accept the height set in the options, you have to change it after the object is created.

Georgi Denchev

commented on 18 Jul 2025, 08:29 AM

Hi, Christopher,

I tested the approach with modifying the height through the component options instead of directly settings it via CSS and it seems to be working as expected:

https://dojo.telerik.com/tUHlCjGa

I've set the version to 2023.3.1114 and copied all of the other settings from the initial snippet that you shared.

Could you check out the example and let me know if it works for you?

Best Regards,

Georgi