v2.4.47

VueUiGauge #142

Add optional segment labels.

New dataset attribute name for dataset series

const dataset = ref({
    base: 12250, // optional
    value: 4.2,
    series: [
        {
            from: 1,
            to: 3,
            color: "#ff6400", // optional
            name: 'bad', // optional
            nameOffsetRatio: 1.1 // optional, to offset an individual name label and avoid label overlapping if segments are narrow
        },
        {
            from: 3,
            to: 4,
            color: "#5f8bee",
            name: 'acceptable'
        },
        {
            from: 4,
            to: 5,
            color: "#42d392",
            name: 'very good'
        },
    ]
})

It is possible to set individual offset for name labels, using the nameOffsetRatio dataset attribute:

New configuration attributes for segment labels:

config.style.chart.layout.segmentNames: {
  show: boolean; // default: true
  curved: boolean; // default: true
  offsetRatio: number; // default: 1.1
  fontSize: number; // default: 16
  useSerieColor: boolean; // default: true
  color: string; // default: "#2D353C"
  bold: boolean; // default: false
}

• A new config attribute was also added to control the radius of the gauge:

config.style.chart.layout.radiusRatio: number; // default: 1

• New config attributes are added to display separators between segments:

config.style.chart.layout.segmentSeparators: {
  show: boolean; // default: false
  offsetOut: number; // default: 0
  offsetIn: number; // default: 0
  stroke: string; // default: "#2D353C"
  strokeWidth: number; // default: 2
}

Here is an example of usage for separators (check out the examples page):

Documentation is up to date
Chart builder too:)

An example of cool stuff that can be done now with VueUiGauge: