NumberFormat

[mjezegou]

How can we display digits separating thousands in legendValue like this :
new Intl.NumberFormat ('fr-FR'). format (Number)

100000 => display 1 00 000

[setaman]

Hey @mjezegou,
currently, no custom formatting is implemented for legendValue, except for , as delimiter. It must be a simple number, which is counted up and down. But you can use slot, where you can put anything you want:

<vue-ellipse-progress :legend="false">

    <p slot="legend-caption">{{ Intl.NumberFormat ('fr-FR').format(Number) }}</p>
  
</vue-ellipse-progress>

The only disadvantage is that the value in the slot is not animated.

I will keep custom formating for legendValue in mind and possibly implement it someday, that can be really useful.

Close the issue, if I could answer your question.

[mjezegou]

Thank you for your answer.
It's a shame, I would have really liked it to be animated in French format.
Notify me when it is available

[setaman]

OK, I leave this issue open as a reference and will see what I can do on it.

[setaman]

@mjezegou Hi, I just added the possibility to freely adjust the shown progress value. The changes will remain in beta at first, because I have not written any unit tests yet. But it would be nice if you could test the new version and give feedback.
In your case you can do now the following:

<vue-ellipse-progress 
   :legend-value="1000000" 
   :legend-formatter="({ currentValue }) => new Intl.NumberFormat('fr-FR').format(currentValue)">
</vue-ellipse-progress>

Alternatively you can use a scoped slot. Details are in the dev branch (legendFormatter, scoped slot). So feel free to run:

npm i vue-ellipse-progress@1.3.0-beta.1