legendFormatter

Animated

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

The legendFormatter property allows you to provide a custom function to format the circle legend displayed in the center of the circle. This function can return any string value, including HTML, giving you full control over the legend's appearance.

The circle legend is animated according to the circle's animation configuration. The legendFormatter will be called on every animation tick, providing the current value of the counter that can be used to format the legend. The value of the counter at a specific animation tick represents the value that is passed as legend or progress to the circle.

TIP

Alternatively, you can use a scoped slot for custom formatting.

Usage

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

Exposed props	Description
currentValue	The current value of the counter at a specific animation tick. It's always a Number and represents the value that is passed as legend or progress to the circle.
currentFormattedValue	The current value formatted as a String. It's a String representation of the currentValue, including any formatting applied with legend.

Examples

In the following example, we take the raw currentValue 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. These 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