Bar Chart - Material

The Bar Charts components helps you to simply create a beautiful bar chart for displaying the data.

Reports Bar Chart

<template>
  <div class="border-radius-lg py-3 pe-1 bg-gradient-success">
  <reports-bar-chart
   :chart="{
     labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
     datasets: {
       label: 'Sales',
       data: [50, 20, 10, 22, 50, 10, 40],
     },
   }"
  />
 </div>
</template>

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

1<template>
2  <div class="border-radius-lg py-3 pe-1 bg-gradient-success">
3  <reports-bar-chart
4   :chart="{
5     labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
6     datasets: {
7       label: 'Sales',
8       data: [50, 20, 10, 22, 50, 10, 40],
9     },
10   }"
11  />
12 </div>
13</template>
14
15<script>
16import ReportsBarChart  from "@/examples/Charts/ReportsBarChart.vue";
17export default { components: { ReportsBarChart, }, };
18</script>

Props Information

Name	Type	Default	Description
id	string	bar-chart	Used to set an id 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.

Horizontal Bar Chart

Pro

<template>
<horizontal-bar-chart
:chart="{
  labels: ['16-20', '21-25', '26-30', '31-36', '36-42', '42+'],
  datasets: [
    {
      label: 'Sales by age',
      data: [15, 20, 12, 60, 20, 15],
    },
  ],
}"
/>
</template>

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

1<template>
2<horizontal-bar-chart
3:chart="{
4  labels: ['16-20', '21-25', '26-30', '31-36', '36-42', '42+'],
5  datasets: [
6    {
7      label: 'Sales by age',
8      data: [15, 20, 12, 60, 20, 15],
9    },
10  ],
11}"
12/>
13</template>
14
15<script>
16import HorizontalBarChart  from "@/examples/Charts/HorizontalBarChart.vue";
17export default { components: { HorizontalBarChart, }, };
18</script>

Props Information

Name	Type	Default	Description
id	string	chart-bar	Used to set an id for the chart.
height	string, number	3000	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.