Statistics Card

PRO

The Statistics Cards components helps you to simply create a beautiful card displaying data in an interesting way.

Mini 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: {
    Calendar,
   },
 };
</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";
14
15export default {
16 components: {
17    Calendar,
18   },
19 };
20</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

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";
12
13export default {
14components: {
15  ComplexStatisticsCard1,
16  },
17};
18</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.