legend
Animated: ✔️
| type | values | default |
|---|---|---|
| Number | String | any number with . or "," as decimals delimiter |
Is any Number or String. This property can be applied for simple formatting of the circle legend. As progress only accepts values in the range [-100, 100], it is usually useful when values outside this range need to be displayed as circle legend. Defining the value as String you can apply very simple formatting with "." or "," as delimiter or set the initial counter-placeholder (e.g. "0045.00"). Apart from this the value must be a valid JavaScript Number.
Legend vs progress
The progress must be defined in any case, if defined, legend will replace progress only as the displayed circle legend! How the progress is calculated in relation to legend value is also up to you.
Tips
With legendFormatter or scoped slot you have countless possibilities to customize the circle legend. To hide the circle legend use the hideLegend property.
Usage: 📜
<ve-progress :legend="150" />
<ve-progress legend="020" />
<ve-progress legend="200,50" />
Examples
The following example brings more clarity to the relationship between legend and progress. Let's say you need to display a rating from 0 to 5 of a product with 3.5 stars. Setting the progress to 3.5 will fill the circle to 3.5 percent, and this is not what we need, since we want to display the percentage of 5 as progress. At this moment legend becomes very useful. In our component we can calculate the progress like follows:
...
this.rating = 3.5;
this.progress = this.rating * 100 / 5; // the rating percentage
And then apply the values:
<ve-progress :progress="progress" :legend="rating" />
As a result, Rating can be displayed as a circle legend and progress will be calculated correctly:
With the legend defined as String we can set custom decimals delimiter and apply simplest formatting of the displayed value: