Chart | Material Dashboard 2 React @ Creative Tim

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

Sales related to age average

// Material Dashboard 2 React Examples
import VerticalBarChart from "examples/Charts/BarCharts/VerticalBarChart";

<VerticalBarChart
  icon={{ color: "info", component: "leaderboard" }}
  title="Vertical Bar Chart"
  description="Sales related to age average"
  chart={{
    labels: ["16-20", "21-25", "26-30", "31-36", "36-42", "42+"],
    datasets: [{
      label: "Sales by age",
      color: "dark",
      data: [15, 20, 12, 60, 20, 15],
    }],
  }}
/>

1// Material Dashboard 2 React Examples
2import VerticalBarChart from "examples/Charts/BarCharts/VerticalBarChart";
3
4<VerticalBarChart
5  icon={{ color: "info", component: "leaderboard" }}
6  title="Vertical Bar Chart"
7  description="Sales related to age average"
8  chart={{
9    labels: ["16-20", "21-25", "26-30", "31-36", "36-42", "42+"],
10    datasets: [{
11      label: "Sales by age",
12      color: "dark",
13      data: [15, 20, 12, 60, 20, 15],
14    }],
15  }}
16/>

Props Information

Name	Type	Default	Description
icon	{ color: ["primary", "secondary", "info", "success", "warning", "error", "light", "dark"], component: node }	{ color: "info", component: "" }	Used to set an icon for the chart.
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`. The `datasets` key is an `array` of objects with the following keys: `label`, `color` and `data`. You can pass as many objects as you want for the datasets array. Its a required prop.

Horizontal Bar Chart

Sales related to age average

// Material Dashboard 2 React Examples
import HorizontalBarChart from "examples/Charts/BarCharts/HorizontalBarChart";

<HorizontalBarChart
  icon={{ color: "info", component: "leaderboard" }}
  title="Horizontal Bar Chart"
  description="Sales related to age average"
  chart={{
    labels: ["16-20", "21-25", "26-30", "31-36", "36-42", "42+"],
    datasets: [{
      label: "Sales by age",
      color: "dark",
      data: [15, 20, 12, 60, 20, 15],
    }],
  }}
/>

1// Material Dashboard 2 React Examples
2import HorizontalBarChart from "examples/Charts/BarCharts/HorizontalBarChart";
3
4<HorizontalBarChart
5  icon={{ color: "info", component: "leaderboard" }}
6  title="Horizontal Bar Chart"
7  description="Sales related to age average"
8  chart={{
9    labels: ["16-20", "21-25", "26-30", "31-36", "36-42", "42+"],
10    datasets: [{
11      label: "Sales by age",
12      color: "dark",
13      data: [15, 20, 12, 60, 20, 15],
14    }],
15  }}
16/>

Props Information

Name	Type	Default	Description
icon	{ color: ["primary", "secondary", "info", "success", "warning", "error", "light", "dark"], component: node }	{ color: "info", component: "" }	Used to set an icon for the chart.
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`. The `datasets` key is an `array` of objects with the following keys: `label`, `color` and `data`. You can pass as many objects as you want for the datasets array. Its a required prop.

Reports Bar Chart

Website Views

Last Campaign Performance

campaign sent 2 days ago

// Material Dashboard 2 React Examples
import ReportsBarChart from "examples/Charts/BarCharts/ReportsBarChart";

<ReportsBarChart
  color="info"
  title="Website Views"
  description="Last Campaign Performance"
  date="campaign sent 2 days ago"
  chart={{
    labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    datasets: {
      label: "Sales",
      data: [450, 200, 100, 220, 500, 100, 400, 230, 500]
    },
  }}
/>

1// Material Dashboard 2 React Examples
2import ReportsBarChart from "examples/Charts/BarCharts/ReportsBarChart";
3
4<ReportsBarChart
5  color="info"
6  title="Website Views"
7  description="Last Campaign Performance"
8  date="campaign sent 2 days ago"
9  chart={{
10    labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
11    datasets: {
12      label: "Sales",
13      data: [450, 200, 100, 220, 500, 100, 400, 230, 500]
14    },
15  }}
16/>

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.
date*	string	""	Used to set a date 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` should be an `array`. The `datasets` should be an `object` containing the `label` and `data` keys, the `label` should be a `string` and the `data` should be an `array`. Its a required prop.