Doughnut Chart

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

Doghnut Chart

<template>
<DoughnutChart />
</template>

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

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

Props Information

Name	Type	Default	Description
width	NumberString	400	Used to set the chart width.
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.

Reports Doughnut Chart

Consumption per room

471.3WATTS

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

<template>
 <ReportsDoughnutChart
  title="Consumption per room"
  tooltip="See the consumption per room"
  :count="{ number: 471.3, text: 'WATTS' }"
  :chartOptions="{
    chart: {
      type: 'donut',
    },
    labels: ['Living Room', 'Attic', 'Basement', 'Kitchen', 'Garage'],
    colors: ['#2152ff', '#3A416F', '#f53939', '#a8b8d8', '#4BB543'],
    dataLabels: {
      enabled: false,
    },
    legend: {
      show: false,
    },
    responsive: [
      {
        breakpoint: 480,
        options: {
          chart: {
            width: 200,
          },
        },
      },
    ],
  }"
  :series="[15, 20, 13, 32, 20]"
 />
</template>

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

1<template>
2 <ReportsDoughnutChart
3  title="Consumption per room"
4  tooltip="See the consumption per room"
5  :count="{ number: 471.3, text: 'WATTS' }"
6  :chartOptions="{
7    chart: {
8      type: 'donut',
9    },
10    labels: ['Living Room', 'Attic', 'Basement', 'Kitchen', 'Garage'],
11    colors: ['#2152ff', '#3A416F', '#f53939', '#a8b8d8', '#4BB543'],
12    dataLabels: {
13      enabled: false,
14    },
15    legend: {
16      show: false,
17    },
18    responsive: [
19      {
20        breakpoint: 480,
21        options: {
22          chart: {
23            width: 200,
24          },
25        },
26      },
27    ],
28  }"
29  :series="[15, 20, 13, 32, 20]"
30 />
31</template>
32
33<script setup>
34import ReportsDoughnutChart  from "@/examples/charts/ReportsDoughnutChart.vue";
35</script>

Props Information

Name	Type	Description
title	String	Used to set the card title.
tooltip	String	Used to set the card tooltip.
count*	numbertext	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.
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.