RadialGauge scale ranges labels for 'to'

1 Answer 27 Views
Gauge
Vincent
Top achievements
Rank 1
Iron
Vincent asked on 07 Nov 2023, 04:22 PM

Is there a way to show the values of 'to' properties in the ranges objects as labels for each range?

 

For now I'm only able to see the 'majorUnit' label

<template>
<div>
<RadialGauge :pointer="pointer" :scale="scale" />
</div>
</template>
<script>
import { RadialGauge } from "@progress/kendo-vue-gauges";
export default {
components: {
RadialGauge,
},
data() {
return {
pointer: [
{
value: 3,
color: "#ffd246",
},
{
value: 5,
color: "#28b4c8",
},
{
value: 13,
color: "#78d237",
},
],
scale: {
labels: {
visible: true,
},
majorTicks: {
visible: false,
},
minorTicks: {
visible: false,
},
majorUnit: 9,
max: 13,
ranges: [
{
from: 0,
to: 4,
color: "#ffc700",
},
{
from: 4,
to: 9,
color: "#ff7a00",
},
{
from: 9,
to: 14,
color: "#c20000",
},
],
},
};
},
};
</script>


1 Answer, 1 is accepted

Sort by
1
Accepted
Vessy
Telerik team
answered on 10 Nov 2023, 01:31 PM

Hello, Vincent,

The gauge does not expose an option to bind its scales values to an specific field, but you can achieve the desired result by customizing the labels rendering in their `content` method like follows:

    scale: {
        labels: {
          visible: true,
          content: (e) => {
            if (e.text == '4' || e.text == '9' || e.text == '14') return e.text;
            return '';
          },
        },
        majorTicks: {
          visible: false,
        },
        minorTicks: {
          visible: false,
        },
        majorUnit: 1,
        max: 14,
        ranges: ...
        ],

Kind 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

Tags
Gauge
Asked by
Vincent
Top achievements
Rank 1
Iron
Answers by
Vessy
Telerik team
Share this question
or