How to show Gauge value in KendoReact

1 Answer 43 Views
RadialGauge
Kim
Top achievements
Rank 1
Kim asked on 19 Mar 2024, 11:44 AM

Hello there, 

Is there a way to show the value/90 in the position below, I did not see any option on the API page, thanks!

1 Answer, 1 is accepted

Sort by
1
Accepted
Vessy
Telerik team
answered on 21 Mar 2024, 11:38 AM

Hello, Kim,

Your assumption is correct - the RadialGauge does not expose and option to render a centered label in it, but you can achieve the same by rendering a custom relatively positioned label element holding the value:

      <RadialGauge {...radialOptions} />
      <div id="val" class="gaugeVal">{value} </div>

.gaugeVal {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 18px;
    position: relative;
    left: 0;
    right: 0;
    top: -40px;
    text-align: center;
    color: #f00;
}

For convenience, I prepared a sample where you can test the suggestion above:

Regards,
Vessy
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

Kim
Top achievements
Rank 1
commented on 21 Mar 2024, 11:57 AM

It looks good, thanks Vessy!
Vessy
Telerik team
commented on 21 Mar 2024, 12:22 PM

You are most welcome, Kim :)
Tags
RadialGauge
Asked by
Kim
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Share this question
or