search

tigrr / circle-progress

Responsive, accessible, animated, stylable with CSS circular progress bar available as plain (vanilla) JS and jQuery plugin.
https://tigrr.github.io/circle-progress
MIT License
164 stars 43 forks source link

How can I show the value and max number as currency? #16

Closed MFahadP closed 1 year ago

MFahadP commented 2 years ago

Hi, how can I show the numbers as currency with commas and a currency symbol?

tigrr commented 1 year ago

Hi, sorry for late reply.

You can use the function form of the textFormat property together with the Intl Number's API:

// First, define our formatter
const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })

// Then use it in Circle Progress
const cp = new CircleProgress('.progress', {
    value: 0,
    max: 100,
    textFormat: (value) => formatter.format(value),
})

See complete demo on JS Fiddle

To learn more about Intl API, see the MDN docs

tigrr commented 1 year ago

If that answers your question, I will close this issue.