Line Charts - Argon
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
// Argon Dashboard 2 MUI Examples
import DefaultLineChart from "examples/Charts/LineCharts/DefaultLineChart";
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. |
chart* | object | Used to set the chart data. It should be an object that contains the `labels` and `datasets` keys and these keys should be an array .
|
Gradient Line Chart
PRO
// Argon Dashboard 2 PRO MUI examples
import GradientLineChart from "examples/Charts/LineCharts/GradientLineChart";
Gradient 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. |
chart* | object | Used to set the chart data. It should be an object that contains the `labels` and `datasets` keys and these keys should be an array .
|
Mini Gradient Line Chart
PRO
// Argon Dashboard 2 PRO MUI 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. |
chart* | object | Used to set the chart data. It should be an object that contains the `labels` and `datasets` keys and these keys should be an array .
|
Progress Line Chart
PRO
// Argon Dashboard 2 PRO MUI examples
import ProgressLineChart from "examples/Charts/LineCharts/ProgressLineChart";
480
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. |
chart* | object | Used to set the chart data. It should be an object that contains the `labels` and `data` keys and these keys should be an array . Its a required prop. |