Vue Doughnut Chart - Argon

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

Reports Doughnut Chart

Consumption by room

471.3WATTS

Living Room	15%
Kitchen	20%
Attic	13%
Garage	32%
Basement	20%

1<template>
2  <reports-doughnut-chart />
3</template>
4
5<script>
6import ReportsDoughnutChart  from "@/examples/Charts/ReportsDoughnutChart.vue";
7export default {
8  components: {
9    ReportsDoughnutChart ,
10    },
11 };
12</script>

<template>
  <reports-doughnut-chart />
</template>

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

Props Information

Name	Type	Description
id	String	Used to set the chart id.
title	String	Used to set the chart title.
count*	object	Used to set the total count inside the chart. Its a required prop and has the following keys: `number` of type Number `text` of type string.
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.
tooltip	String	Used to set the helper tooltip content of the chart.

Vue Doughnut Chart - Argon

Reports Doughnut Chart

Consumption by room

471.3WATTS

Living Room

Kitchen

Attic

Garage

Basement

Props Information