package.docs.components.countup.mdx Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of core Show documentation

Premium and Open Source dashboard template with responsive and high quality UI.

The newest version!

---
title: Countup
description: A countup element is used to display numerical data in an interesting way and make the interface more interactive.
libs: countup
---

To be able to use the countup in your application you will need to install the countup.js dependency with `npm install countup.js`.

## Default countup

To create a countup, add `data-countup` to any HTML text tag and specify the number which is to be reached. The animation will be triggered as soon as the number enters the viewport.

```html code example


30000
```

## Duration

Set the `duration` to determine how long the animation should take. By default, the duration is set to 2 seconds, but you can modify it as you wish.

```html code example


30000
30000
30000
```

## Starting value

By default the countup will start from zero. If you want to set a different start value use `startVal`.
You can also set the start value to be greater than the final value, so that it counts down instead of up.

```html code example


30000
30000
```

## Decimal places

Set how many decimal numbers should be displayed using `decimalPlaces`.

```html code example


3.123
3.123
3.123
3.123
```

## Easing

Disable easing using `"useEasing": false`. Easing is set to `true` by default, so that the animation speed changes over the course of its duration.

```html code example


30000
30000
```

## Use grouping

Disable grouping using `"useGrouping": false`. Grouping is set to `true` by default and the default group separator is a comma.

```html code example


30000
30000
```

## Separator

You can change the default comma group separator using `separator` and specifying the one you wish to use.

```html code example


3000000
3000000
3000000
3000000
```

## Decimal separator

You can also change the decimal separator which is set to a full stop by default. To do it, use `decimal` and specify the decimal separator of your choice.

```html code example


3.12
3.12
3.12
3.12
```

## Prefix

Set the countup prefix using `prefix` and specifying the prefix you want to add, for instance a currency symbol.

```html code example


30000
30000
30000
```

## Suffix

Set the countup suffix using `suffix`.

```html code example


30
30
30
```

Of course you can mix all of these:

```html code example


64547834.76
```

For more advanced features of countups, click [**here**](https://inorganik.github.io/countUp.js/) and see what more you can do.