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
1
Accepted
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!