Statistics Card - Soft UI

PRO

Our Vue Statistics Cards are used for showing relevant metrics to the users See below our examples that you can use with Vue Soft UI Dashboard PRO.

Mini Statistics Card

Use this example to create a simple statistics card.

Today's Money

$53,000

<template>
 <mini-statistics-card
  title="Today's Money"
  value="$53,000"
  :icon="{
    component: 'ni ni-money-coins',
    background: bg-gradient-success,
 }"
/>
</template>

<script>
import MiniStatisticsCard from '@/examples/Cards/MiniStatisticsCard.vue";
export default { components: { MiniStatisticsCard, }, };
</script>

1<template>
2 <mini-statistics-card
3  title="Today's Money"
4  value="$53,000"
5  :icon="{
6    component: 'ni ni-money-coins',
7    background: bg-gradient-success,
8 }"
9/>
10</template>
11
12<script>
13import MiniStatisticsCard from '@/examples/Cards/MiniStatisticsCard.vue";
14export default { components: { MiniStatisticsCard, }, };
15</script>

Props Information

Name	Type	Default	Description
directionReverse	boolean	false	Used to set the of the `MiniStatisticsCard` component to RTL.
title	['String', 'Object']	['text', 'color']	`title` as an Object allows to set the title `text` and `color`.
value*	['String', 'Number', 'Object']	['text', 'color']	`value` as an Object allows to set the value `text` and the value's `color`.
percentage	['String', 'Object']	['value', 'color']	`percentage` as an Object allows to set the percentage `value` and percentage's `color`.
icon	['String', 'Object']	['component', 'background']	`icon` as an Object allows to set the icon `component` and icon `background` color.
classContent	String		`classContent` is used to apply custom classes around the content of the `MiniStatisticsCard`.

Complex Statistics Card

PRO

Use this example to create a complex statistics card.

1600

Active Users

+3%

<template>
<complex-statistics-card
 icon="text-dark ni ni-circle-08"
 percentage="+3%"
 :count="{ number: 1600, label: 'Active Users' }"
 background-color="dark"
/>
</template>

<script>
import ComplexStatisticsCard from '@/examples/Cards/ComplexStatisticsCard.vue";
export default { components: { ComplexStatisticsCard1, }, };
</script>

1<template>
2<complex-statistics-card
3 icon="text-dark ni ni-circle-08"
4 percentage="+3%"
5 :count="{ number: 1600, label: 'Active Users' }"
6 background-color="dark"
7/>
8</template>
9
10<script>
11import ComplexStatisticsCard from '@/examples/Cards/ComplexStatisticsCard.vue";
12export default { components: { ComplexStatisticsCard1, }, };
13</script>

Props Information

Name	Type	Default	Description
icon*	['String', 'Object']	['component', 'background']	`icon` as an Object allows to set the icon `component` and icon `background` color.
count	Object	['number', 'label']	`count` allows to set the count's `number` and the count's `label`.
percentage	['String', 'Object']	['label', 'color']	`percentage` as an Object allows to set the percentage `label` and percentage's `color`.
backgroundColor	String		`backgroundColor` is used to apply custom background color to `ComplexStatisticsCard` component.