Chart | Vision UI Dashboard React @ Creative Tim & Simmmple

The Line Charts components helps you to simply create a beautiful line 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 Line 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.
options*	object		Used to set the chart options. It should be an `object`. It should contain `chart`, `tooltip`, `xaxis`, `yaxis`, `grid`, `fill`, `dataLabel`, `plotOptions` keys that are explained here. The `datasets` key is an `array` of objects with the following keys: `label`, `color`, `data` and `borderDash`. The `chart` key is an `object` of objects with the following keys: `type` and `toolbar`. The `plotOptions` key is an `object` of objects with the following keys: `type` and `toolbar`. The `stroke` key is an `object` of objects with the following keys: `colors`, `toolbar`, `width` and `show`. array. It's a required prop.
data*	array		Used to set the chart data. It should be an `array` . It can contain and `object` that has the `name` and `data` keys. You can pass as many objects as you want for the data prop. It's a required prop.

Gradient Line Chart

PRO

// Vision UI Dashboard PRO React examples import GradientLineChart from "examples/Charts/LineCharts/GradientLineChart";

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.
options*	object		Used to set the chart options. It should be an `object`. It should contain `chart`, `tooltip`, `xaxis`, `yaxis`, `grid`, `fill`, `dataLabel`, `plotOptions` keys that are explained here. The `datasets` key is an `array` of objects with the following keys: `label`, `color`, `data` and `borderDash`. The `chart` key is an `object` of objects with the following keys: `type` and `toolbar`. The `plotOptions` key is an `object` of objects with the following keys: `type` and `toolbar`. The `stroke` key is an `object` of objects with the following keys: `colors`, `toolbar`, `width` and `show`. array. It's a required prop.
data*	array		Used to set the chart data. It should be an `array` . It can contain and `object` that has the `name` and `data` keys. You can pass as many objects as you want for the data prop. It's a required prop.

Mini Gradient Line Chart

PRO

// Vision UI Dashboard PRO React examples import MiniGradientLineChart from "examples/Charts/LineCharts/MiniGradientLineChart";

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.
options*	object		Used to set the chart options. It should be an `object`. It should contain `chart`, `tooltip`, `xaxis`, `yaxis`, `grid`, `fill`, `dataLabel`, `plotOptions` keys that are explained here. The `datasets` key is an `array` of objects with the following keys: `label`, `color`, `data` and `borderDash`. The `chart` key is an `object` of objects with the following keys: `type` and `toolbar`. The `plotOptions` key is an `object` of objects with the following keys: `type` and `toolbar`. The `stroke` key is an `object` of objects with the following keys: `colors`, `toolbar`, `width` and `show`. array. It's a required prop.
data*	array		Used to set the chart data. It should be an `array` . It can contain and `object` that has the `name` and `data` keys. You can pass as many objects as you want for the data prop. It's a required prop.

Progress Line Chart

PRO

// Vision UI Dashboard PRO React examples import ProgressLineChart from "examples/Charts/LineCharts/ProgressLineChart"; import from "react-icons/io5";

Props Information

Name	Type	Default	Description
colors	'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.
progress*	number		Used to set the chart progress bar percentage value.
height	numberstring	6.25rem	Used to set a `height` for the chart.
options*	object		Used to set the chart options. It should be an `object`. It should contain `chart`, `tooltip`, `xaxis`, `yaxis`, `grid`, `fill`, `dataLabel`, `plotOptions` keys that are explained here. The `datasets` key is an `array` of objects with the following keys: `label`, `color`, `data` and `borderDash`. The `chart` key is an `object` of objects with the following keys: `type` and `toolbar`. The `plotOptions` key is an `object` of objects with the following keys: `type` and `toolbar`. The `stroke` key is an `object` of objects with the following keys: `colors`, `toolbar`, `width` and `show`. array. It's a required prop.
data*	array		Used to set the chart data. It should be an `array` . It can contain and `object` that has the `name` and `data` keys. You can pass as many objects as you want for the data prop. It's a required prop.