Radial Gauge Height (jQuery)

[Christopher]

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?

[Martin]

Hello, Christopher,

I tested the provided code in this Dojo example, and the height is changed as expected. Could you please let me know if I am missing something?

Looking forward to your reply.

Regards,
Martin
Progress Telerik

[Christopher]

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:

 

[Martin]

Hello, Christopher,

Even with the 2023 version the height is 600xp, as set. Can you let me know if I am missing something from the issue? Here's the 2023 version of the example.

Regards,
Martin
Progress Telerik

[Christopher]

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]

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]

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.