Bar Charts - Argon
The Bar Charts components helps you to simply create a beautiful bar 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.
Vertical Bar Chart
// Argon Dashboard 2 MUI Examples
import VerticalBarChart from "examples/Charts/BarCharts/VerticalBarChart";
Vertical Bar 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 .
|
Horizontal Bar Chart
// Argon Dashboard 2 MUI Examples
import HorizontalBarChart from "examples/Charts/BarCharts/HorizontalBarChart";
Horizontal Bar 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 .
|
Thin Bar Chart
PRO
// Argon Dashboard 2 PRO MUI examples
import ThinBarChart from "examples/Charts/BarCharts/ThinBarChart";
Thin Bar Chart
Props Information
Name | Type | Default | Description |
---|---|---|---|
color | 'primary''secondary''info''success''warning''error''dark' | dark | Used to set the color of the chart. |
title | string | "" | Used to set a title for the chart. |
height | numberstring | 12.5rem | Used to set a height for the chart. |
chart* | object | Used to set the chart data. It should be an object that contains the `label` and `data` keys.
|
Reports Bar Chart
// Argon Dashboard 2 MUI Examples
import ReportsBarChart from "examples/Charts/BarCharts/ReportsBarChart";
active users
36K
2M
$435
43
Props Information
Name | Type | Default | Description |
---|---|---|---|
color | 'primary''secondary''info''success''warning''error''dark' | dark | Used to set the color of the chart. |
title* | string | Used to set the title of the chart. Its a required prop. | |
description | nodestring | "" | Used to set a description for the chart. |
chart* | object | Used to set the chart data. It should be an object that contains the `labels` and `datasets` keys.
| |
items | array | [] | Used to set the chart items. It should be an array of objects with the following keys: `icon`, `label` and `progress`.
|