Creative Tim  |  Docs

Doughnut Charts - Argon

The Doughnut Charts components helps you to simply create a beautiful doughnut chart for displaying the data.

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 Doughnut Chart

// Argon Dashboard 2 MUI Examples import DefaultDoughnutChart from "examples/Charts/DoughnutCharts/DefaultDoughnutChart";
Default Doughnut Chart

Props Information

NameTypeDefaultDescription
titlestring""Used to set a title for the chart.
descriptionnodestring""Used to set a description for the chart.
heightnumberstring19.125remUsed to set a height for the chart.
chart*objectUsed to set the chart data. It should be an object that contains the `labels` and `datasets` keys.
  • The `labels` key is an array.
  • The `datasets` key is an object of with the following keys: `label`, `backgroundColors` and `data`.
  • The amount of elements inside `backgroundColors` array should be equal to the amount of elements inside the `labels` array.
Its a required prop.

Progress Doughnut Chart

PRO
// Argon Dashboard 2 PRO MUI examples import ProgressDoughnutChart from "examples/Charts/DoughnutCharts/ProgressDoughnutChart";
Projects
115
Done
In progress

Props Information

NameTypeDefaultDescription
color'primary''secondary''info''success''warning''error''dark'infoUsed to set the chart color.
icon*nodeUsed to set the chart icon. Its a required prop.
title*stringUsed to set the chart title. Its a required prop.
countnumberstring0Used to set the total count of items under the title of the chart.
heightnumberstring100%Used to set a height for the chart.
chart*objectUsed to set the chart data. It should be an object that contains the `labels` and `datasets` keys.
  • The `labels` key is an array.
  • The `datasets` key is an object of with the following keys: `label`, `backgroundColors` and `data`.
  • The amount of elements inside `backgroundColors` array should be equal to the amount of elements inside the `labels` array.
Its a required prop.

Reports Doughnut Chart

PRO
// Argon Dashboard 2 PRO MUI examples import ReportsDoughnutChart from "examples/Charts/DoughnutCharts/ReportsDoughnutChart";
Consumption by room

471.3

whatts
Living Room
15%
Kitchen
20%
Attic
13%
Garage
32%
Basement
20%

Props Information

NameTypeDefaultDescription
title*stringUsed to set the chart title. Its a required prop.
count*{ number: ["string", "number"], text: string }Used to set the total count inside the chart. Its a required prop.
chart*objectUsed to set the chart data. It should be an object that contains the `labels` and `datasets` keys.
  • The `labels` key is an array.
  • The `datasets` key is an object of with the following keys: `label`, `backgroundColors` and `data`.
  • The amount of elements inside `backgroundColors` array should be equal to the amount of elements inside the `labels` array.
Its a required prop.
tooltipstringUsed to set the helper tooltip content of the chart.

Complex Reports Doughnut Chart

PRO
// Argon Dashboard 2 PRO MUI examples import ComplexReportsDoughnutChart from "examples/Charts/DoughnutCharts/ComplexReportsDoughnutChart";
Referrals
title
Adobe XD
25%
title
Atlassian
3%
title
Slack
12%
title
Spotify
7%
title
Jira
10%

Props Information

NameTypeDefaultDescription
title*stringUsed to set the chart title. Its a required prop.
chart*objectUsed to set the chart data. It should be an object that contains the `images`, `labels` and `datasets` keys.
  • The `images` key is an array of images for the chart items.
  • The `labels` key is an array.
  • The `datasets` key is an object of with the following keys: `label`, `backgroundColors` and `data`.
  • The amount of elements inside `backgroundColors`, `images` and `labels` should be equal.
Its a required prop.
tooltipstringUsed to set the helper tooltip content of the chart.
actionbool{ type: ["internal", "external"], route: string, label: string, color: ["primary", "secondary", "info", "success", "warning", "error", "dark", "light"], }falseUsed to set the chart button configurations.
Contents