Creative Tim  |  Docs

Statistics Cards - Argon

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

The below codes are editable and you can modify them the way you want directly from your browser, please use the green button or the ctrl + s to save the changes.

Default Statistics Card

PRO
// Argon Dashboard 2 PRO MUI examples import DefaultStatisticsCard from "examples/Cards/StatisticsCards/DefaultStatisticsCard";
sales
$230,220
+55% since last month
6 May - 7 May

Props Information

NameTypeDefaultDescription
title*stringUsed to set the DefaultStatisticsCard title. Its a required prop.
count*stringnumberUsed to set the DefaultStatisticsCard value or the important data you want to display. Its a required prop.
percentage{ color: ["primary", "secondary", "info", "success", "warning", "error", "dark"], value: ["string", "number"], label: string }{ color: "success", value: "", label: "", }Used to set the DefaultStatisticsCard progress percentage content and style.
dropdownbool{ action: func, menu: node, value: string, }falseUsed to set the DefaultStatisticsCard dropdown menu, it should be an object with the following keys: `action`, `menu` and value.
  • The `action` should be a function used for opening the dropdown menu.
  • The `menu` should be a node (The dropdown menu content) which will be visible once the dropdown clicked by the user.
  • The `value` should be a string its the content that will be visible as dropdown label.
  • The dropdown button will be visible on the top right corner of the card.

The below code contains a complete exmaple of DefaultStatisticsCard including the dropdown menu functionality.

Mini Statistics Card

// Argon Dashboard 2 PRO MUI examples import MiniStatisticsCard from "examples/Cards/StatisticsCards/MiniStatisticsCard";
today's money
$53,000 +55%

Props Information

NameTypeDefaultDescription
bgColor'white''primary''secondary''info''success''warning''error''dark'whiteUsed to set the MiniStatisticsCard background color.
title*{ fontWeight: ["light", "regular", "medium", "bold"], text: string, }{ fontWeight: "medium", text: "", },Used to set the MiniStatisticsCard title text and style.
count*stringnumberUsed to set the MiniStatisticsCard value or the important data you want to display. Its a required prop.
percentage{ color: ["primary", "secondary", "info", "success", "warning", "error", "dark", "white"], text: ["string", "number"], }{ color: "success", text: "", }Used to set the MiniStatisticsCard progress percentage content and style.
icon*{ color: ["primary", "secondary", "info", "success", "warning", "error", "dark"], component: node }Used to set MiniStatisticsCard icon and icon box color. It should be mentioned that the color will only work if the `backgroundColor` is white otherwise the icon box background color will be white.
directionrightleftrightUsed to set the content and icon order.

Complex Statistics Card

PRO
// Argon Dashboard 2 PRO MUI examples import ComplexStatisticsCard from "examples/Cards/StatisticsCards/ComplexStatisticsCard";
1600
users active
+55%

Props Information

NameTypeDefaultDescription
image*stringUsed to set the ComplexStatisticsCard background image.
color'primary''secondary''info''success''warning''error''dark'darkUsed to set the ComplexStatisticsCard background image overlay color.
icon*nodeUsed to set ComplexStatisticsCard icon. Its a required prop.
count*{ number: ["string", "number"], label: string }Used to set the ComplexStatisticsCard value or the important data you want to display. Its a required prop.
percentage*stringUsed to set the ComplexStatisticsCard progress percentage. Its a required prop.
dropdownbool{ action: func, menu: node, }falseUsed to set the ComplexStatisticsCard dropdown menu, it should be an object with the following keys: `action` and `menu`.
  • The `action` should be a function used for opening the dropdown menu.
  • The `menu` should be a node (The dropdown menu content) which will be visible once the dropdown clicked by the user.
  • The dropdown button will be visible on the top right corner of the card.

The below code contains a complete exmaple of ComplexStatisticsCard including the dropdown menu functionality.

Animated Statistics Card

PRO
// Argon Dashboard 2 PRO MUI examples import AnimatedStatisticsCard from "examples/Cards/StatisticsCards/AnimatedStatisticsCard";
earnings

$15,800

 +15% since last week 

They're slowed down by their perception of themselves.

Props Information

NameTypeDefaultDescription
color'primary''secondary''info''success''warning''error''dark'infoUsed to set the AnimatedStatisticsCard background image overlay color.
title*stringUsed to set AnimatedStatisticsCard title. Its a required prop.
count*stringUsed to set AnimatedStatisticsCard value or the important data you want to display. Its a required prop.
percentage*{ color: ["primary", "secondary", "info", "success", "warning", "error", "dark",], label: string }Used to set the AnimatedStatisticsCard label content and color.
action*{ type: ["internal", "external"], route: string, label: string }Used to set the AnimatedStatisticsCard route and action button content.

Detailed Statistics Card

// Argon Dashboard 2 MUI examples import DetailedStatisticsCard from "examples/Cards/StatisticsCards/DetailedStatisticsCard";
today's money
$53,000
+55%

since yesterday

Props Information

NameTypeDefaultDescription
bgColor'transparent''white''primary''secondary''info''success''warning''error''dark'whiteUsed to set the DetailedStatisticsCard background color.
title*{ fontWeight: ["light", "regular", "medium", "bold"], text: string, }{ fontWeight: "medium", text: "", },Used to set the DetailedStatisticsCard title text and style.
count*stringnumberUsed to set the DetailedStatisticsCard value or the important data you want to display. Its a required prop.
percentage{ color: ["primary", "secondary", "info", "success", "warning", "error", "dark", "white"], count: ["string", "number"], text: string, }{ color: "success", count: 0, text: "", }Used to set the DetailedStatisticsCard progress percentage content and style.
icon*{ color: ["primary", "secondary", "info", "success", "warning", "error", "dark"], component: node }Used to set DetailedStatisticsCard icon and icon box color. It should be mentioned that the color will only work if the `backgroundColor` is white otherwise the icon box background color will be white.
directionrightleftrightUsed to set the content and icon order.
Contents