Creative Tim  |  Docs

React Bar Charts - Soft UI

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

// Soft UI Dashboard React examples import VerticalBarChart from "examples/Charts/BarCharts/VerticalBarChart";
Vertical Bar Chart

Props Information

NameTypeDefaultDescription
titlestring""Used to set a title for the chart.
descriptionnodestring""Used to set a description for the chart.
heightnumberstring19.125remUsed to set a height for the chart.
chart*objectUsed 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

// Soft UI Dashboard React examples import HorizontalBarChart from "examples/Charts/BarCharts/HorizontalBarChart";
Horizontal Bar Chart

Props Information

NameTypeDefaultDescription
titlestring""Used to set a title for the chart.
descriptionnodestring""Used to set a description for the chart.
heightnumberstring19.125remUsed to set a height for the chart.
chart*objectUsed 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.

Thin Bar Chart

PRO
// Soft UI Dashboard PRO React examples import ThinBarChart from "examples/Charts/BarCharts/ThinBarChart";
Thin Bar Chart

Props Information

NameTypeDefaultDescription
color'primary''secondary''info''success''warning''error''dark'darkUsed to set the color of the chart.
titlestring""Used to set a title for the chart.
heightnumberstring12.5remUsed to set a height for the chart.
chart*objectUsed to set the chart data. It should be an object that contains the `label` and `data` keys.
  • The `label` should be a string.
  • the `data` should be an array.
Its a required prop.

Reports Bar Chart

// Soft UI Dashboard React examples import ReportsBarChart from "examples/Charts/BarCharts/ReportsBarChart";
active users
(+23%) than last week
users

36K

clicks

2M

sales

$435

items

43

Props Information

NameTypeDefaultDescription
color'primary''secondary''info''success''warning''error''dark'darkUsed to set the color of the chart.
title*stringUsed to set the title of the chart. Its a required prop.
descriptionnodestring""Used to set a description for the chart.
chart*objectUsed 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.
itemsarray[]Used to set the chart items. It should be an array of objects with the following keys: `icon`, `label` and `progress`.
  • The `icon` should be an object with the following keys: `color` and `component`
  • The `label` should be a string.
  • The `progress` should be an object with the following keys: `content` and `percentage`.
Contents