Vue Bar Charts - Argon

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

Thin Bar Chart

Pro

Thin Bar Chart

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 {
17 components: {
18  ThinBarChart ,
19   },
20};
21</script>

<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>

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	200	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.