How to show Gauge value in KendoReact

[Kim]

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!

[Vessy]

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:

• https://stackblitz.com/edit/react-rvtx2d-1ksy2c?file=app%2Fmain.tsx 

Regards,
Vessy
Progress Telerik

[Kim]

It looks good, thanks Vessy!

[Vessy]

You are most welcome, Kim :)