Hai,
I'm facing an issue where I'm unable to resize my circular gauge as demonstrated below. Can you please advise me on how I can reduce the size of the gauge? Additionally, is there a way to enable a feature where clicking on the circular gauge it will change the percentage , limited to specific values such as 25%, 50%, 75%, and 100%?I attached my code for your reference. TQ
1 Answer, 1 is accepted
0
Hello Umi,
Thank you for reaching out to us.
For changing the default size of the CircularGauge you can set the width and height to the "style" property:
<CircularGauge
style={{ width: '100px', height: '100px' }}
value={this.gauge1Value}
colors={this.colors}
centerRender={this.centerRenderer}
/>As for changing the value, you can bind the gauge to a value from the state and add onClick event handler for the wrapping DIV element and change the state variable:
<div
style={{ width: '200px', margin: 'auto' }}
onClick={this.changeGauge1}
>
<CircularGauge
style={{ width: '100px', height: '100px' }}
value={this.gauge1Value}
colors={this.colors}
centerRender={this.centerRenderer}
/>
</div>Hope this helps.
Regards,
Konstantin Dikov
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Umi Amira
commented on 02 May 2023, 01:13 AM
Top achievements
Rank 1
Iron
Rank 1
Iron
Thank you for your help :)