Bar Charts - Soft UI

Bar Charts are the most straightforward way to compare different values over time. Our Vue components help you simply create a beautiful bar chart for displaying the data.

Use the following examples to create beautiful bar charts for your website.

Reports Bar Chart

Active Users

(+23%) than last week

users

36K

Clicks

2M

Sales

$435

Items

43

<template>
  <reports-bar-chart
  id="chart-bar"
  title="active Users"
  description="(<strong>+23%</strong>) than last week"
  :chart="{
    labels: ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    datasets: {
      label: 'Sales',
      data: [450, 200, 100, 220, 500, 100, 400, 230, 500],
    },
  }"
  :items="[
    {
      icon: { color: 'primary', component: faUsers, },
      label: 'users',
      progress: { content: '36K', percentage: 60 },
    },
    {
      icon: { color: 'info', component: faHandPointer },
      label: 'clicks',
      progress: { content: '2m', percentage: 90 },
    },
    {
      icon: { color: 'warning', component: faCreditCard },
      label: 'Sales',
      progress: { content: '435$', percentage: 30 },
    },
    {
      icon: { color: 'danger', component: faScrewdriverWrench },
      label: 'Items',
      progress: { content: '43', percentage: 50 },
    },
  ]">
 </reports-bar-chart>
</template>

<script>
import ReportsBarChart  from "@/examples/Charts/ReportsBarChart.vue";
export default { components: { ReportsBarChart , }, };
</script>

1<template>
2  <reports-bar-chart
3  id="chart-bar"
4  title="active Users"
5  description="(<strong>+23%</strong>) than last week"
6  :chart="{
7    labels: ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
8    datasets: {
9      label: 'Sales',
10      data: [450, 200, 100, 220, 500, 100, 400, 230, 500],
11    },
12  }"
13  :items="[
14    {
15      icon: { color: 'primary', component: faUsers, },
16      label: 'users',
17      progress: { content: '36K', percentage: 60 },
18    },
19    {
20      icon: { color: 'info', component: faHandPointer },
21      label: 'clicks',
22      progress: { content: '2m', percentage: 90 },
23    },
24    {
25      icon: { color: 'warning', component: faCreditCard },
26      label: 'Sales',
27      progress: { content: '435$', percentage: 30 },
28    },
29    {
30      icon: { color: 'danger', component: faScrewdriverWrench },
31      label: 'Items',
32      progress: { content: '43', percentage: 50 },
33    },
34  ]">
35 </reports-bar-chart>
36</template>
37
38<script>
39import ReportsBarChart  from "@/examples/Charts/ReportsBarChart.vue";
40export default { components: { ReportsBarChart , }, };
41</script>

Props Information

Name	Type	Default	Description
id*	string		Used to set an id for the chart. Its a required prop.
color	'primary' 'secondary' 'info' 'success' 'warning' 'error' 'danger' 'light' 'dark'	dark	Used to set the color of the chart.
title	string		Used to set a title for the chart.
description	string		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. The `labels` should be an array. The `datasets` should be an object with the following keys: `label` of type string. `data` of type array. It is a required prop.
items	array	[]	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`

Thin Bar Chart

Pro

Thin Bar Chart

<template>
 <thin-bar-chart
 title="Consumption per day"
 :chart="{
   labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
   datasets: {
     label: 'Watts',
     data: [150, 230, 380, 220, 420, 200, 70, 500]
    }
  }"
 />
</template>

<script>
import ThinBarChart  from "@/examples/Charts/ThinBarChart.vue";
export default { components: { ThinBarChart, }, };
</script>

1<template>
2 <thin-bar-chart
3 title="Consumption per day"
4 :chart="{
5   labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
6   datasets: {
7     label: 'Watts',
8     data: [150, 230, 380, 220, 420, 200, 70, 500]
9    }
10  }"
11 />
12</template>
13
14<script>
15import ThinBarChart  from "@/examples/Charts/ThinBarChart.vue";
16export default { components: { ThinBarChart, }, };
17</script>

Props Information

Name	Type	Default	Description
id	string		Used to set an id for the chart.
title	string	Thin Bar Chart	Used to set a title for the chart.
height	string, number	170	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. The `labels` should be an array. The `datasets` should be an object with the following keys: `label` of type string. `data` of type array. It is a required prop.