Chart | Soft UI Dashboard React @ Creative Tim

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

// Soft UI Dashboard React examples import DefaultDoughnutChart from "examples/Charts/DoughnutCharts/DefaultDoughnutChart";

Default Doughnut Chart

Props Information

Name	Type	Default	Description
title	string	""	Used to set a title for the chart.
description	nodestring	""	Used to set a description for the chart.
height	numberstring	19.125rem	Used to set a `height` for the chart.
chart*	object		Used 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

// Soft UI Dashboard PRO React examples import ProgressDoughnutChart from "examples/Charts/DoughnutCharts/ProgressDoughnutChart";

Projects

115

Done

In progress

Props Information

Name	Type	Default	Description
color	'primary''secondary''info''success''warning''error''dark'	info	Used to set the chart color.
icon*	node		Used to set the chart icon. Its a required prop.
title*	string		Used to set the chart title. Its a required prop.
count	numberstring	0	Used to set the total count of items under the title of the chart.
height	numberstring	100%	Used to set a `height` for the chart.
chart*	object		Used 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

// Soft UI Dashboard PRO React 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

Name	Type	Description
title*	string	Used 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*	object	Used 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.
tooltip	string	Used to set the helper tooltip content of the chart.

Complex Reports Doughnut Chart

PRO

// Soft UI Dashboard PRO React examples import ComplexReportsDoughnutChart from "examples/Charts/DoughnutCharts/ComplexReportsDoughnutChart";

Referrals

Adobe XD

25%

Atlassian

Slack

12%

Spotify

Jira

10%

Props Information

Name	Type	Default	Description
title*	string		Used to set the chart title. Its a required prop.
chart*	object		Used 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.
tooltip	string		Used to set the helper tooltip content of the chart.
action	bool{ type: ["internal", "external"], route: string, label: string, color: ["primary", "secondary", "info", "success", "warning", "error", "dark", "light"], }	false	Used to set the chart `button` configurations.