Pie Charts

The Pie Chart component helps you to simply create a beautiful pie chart for displaying the data.

Demo

<template>
 <PieChart
  :chartOptions="{
    colors: ["#17c1e8", "#4BB543", "#3A416F", "#a8b8d8"],
    labels: ["Facebook", "Direct", "Organic", "Referral"],
    legend: {
      show: false,
    },
    dataLabels: {
      enabled: false,
    },
    responsive: [
      {
        breakpoint: 480,
        options: {
          chart: {
            width: 200,
          },
          legend: {
            position: "bottom",
          },
        },
      },
    ],
  }"
  :series="[15, 20, 12, 60]"
/>
</template>

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

1<template>
2 <PieChart
3  :chartOptions="{
4    colors: ["#17c1e8", "#4BB543", "#3A416F", "#a8b8d8"],
5    labels: ["Facebook", "Direct", "Organic", "Referral"],
6    legend: {
7      show: false,
8    },
9    dataLabels: {
10      enabled: false,
11    },
12    responsive: [
13      {
14        breakpoint: 480,
15        options: {
16          chart: {
17            width: 200,
18          },
19          legend: {
20            position: "bottom",
21          },
22        },
23      },
24    ],
25  }"
26  :series="[15, 20, 12, 60]"
27/>
28</template>
29
30<script setup>
31import PieChart from "@/examples/charts/PieChart.vue";
32</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.