Bar Charts

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

Thin Bar Chart

Pro

<template>
 <ThinBarChart />
</template>

<script setup>
import ThinBarChart from "@/examples/charts/ThinBarChart.vue";
</script>

1<template>
2 <ThinBarChart />
3</template>
4
5<script setup>
6import ThinBarChart from "@/examples/charts/ThinBarChart.vue";
7</script>

Props Information

Name	Type	Default	Description
title	string	Thin Bar Chart	Used to set a title for the chart.
height	string, number	190	Used to set a height for the chart.
chartOptions	object		It is an object and is used to set the chart configuration.
series	array		It is an array and is used to set the data and label.

Bar Chart Horizontal

Pro

<template>
<BarChartHorizontal />
</template>

<script setup>
import BarChartHorizontal from "@/examples/charts/BarChartHorizontal.vue";
</script>

1<template>
2<BarChartHorizontal />
3</template>
4
5<script setup>
6import BarChartHorizontal from "@/examples/charts/BarChartHorizontal.vue";
7</script>

Props Information

Name	Type	Default	Description
height	string, number	300	Used to set a height for the chart.
chartOptions	object		It is an object and is used to set the chart configuration.
series	array		It is an array and is used to set the data and label.