legendFormatter

Animated: ✔️

type	values	default
Function	Function that returns formatted value as string

Is a Function that must return a legend value or HTML string. The function takes counter properties object as argument and is called on every counter tick. Here the formatting of legend or progress is completely up to you and you have the full freedom to adjust the presentation to your needs. The function can return any String value, even HTML.

Tips

Alternatively you can use scoped slot for custom formatting.

Usage

<ve-progress
  :legend-formatter="({ currentValue }) => `My Format ${currentValue}`"
/>

Exposed props
currentValue	The current value of the counter at specific tick. It's always a Number
currentFormattedValue	Current value formatted as a String. It's a String representation of the currentValue including the formatting wich may be applied with legend

Examples

The function takes counter properties Object as argument that you can use to define custom formatting. currentValue is the most relevant property, as it is the actual value at specific counter tick. The return value will be displayed as the legend of the circle. Here is a simple example:

NormalLoadingDeterminateNo data

NormalLoadingDeterminateNo data

The formatting function can return HTML as a string to customize the styles of the rendered circle legend. You can add more elements, images and pretty much anything here

NormalLoadingDeterminateNo data

NormalLoadingDeterminateNo data

The internal counter component provides additional properties that might be useful. The properties are calculated for each counter tick.

NormalLoadingDeterminateNo data

NormalLoadingDeterminateNo data