legendFormatter

Animated

type	values	default
Function	(props: object) => string Function returning formatted value as string

You can provide a function to format the circle legend. The function can return any string value, even HTML! You have full freedom to format the value of the legend or progress as you like.

The circle legend is animated and counts up and down depending on the circle animation configuration. The function takes a counter properties object as an argument and is called on every counter tick providing the current value of the counter that can be used to format the legend.

TIP

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 animation tick. It's always a Number and represents a value that is passed as legend or progress to the circle
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

In the following example, we take the raw currentValue value and format it as a string

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

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

<ve-progress
  :progress=""
  :legend-formatter="
    ({ currentValue }) => `
      <span style='color: ${currentValue < 0 ? 'red' : 'green'}; font-weight: bold; border-bottom: 2px gray solid'>
        ${new Intl.NumberFormat('de-DE', {
          style: 'currency',
          currency: 'EUR',
        })
          .format(currentValue)
          .trim()}
        </span>
      `
  "
/>

NormalLoadingDeterminateNo data

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

currentValue: 0

currentFormattedValue:

<template>
  <ve-progress 
    :legend="0050.000" 
    :legend-formatter="customFormatter" 
    :progress="50"
  />
</template>
<script setup lang="ts">

type CounterProps = {
  currentValue: number;
  currentFormattedValue: string;
  [key: string]: unknown;
};

const customFormatter = (props: CounterProps) => {
  return `"currentFormattedValue":
    ${props.currentFormattedValue}
  `;
 }
</script>

NormalLoadingDeterminateNo data