Pie Chart - Soft UI

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

Demo

<template>
 <pie-chart
  :chart="{
    labels: ['Facebook', 'Direct', 'Organic', 'Referral'],
    datasets: {
      label: 'Projects',
      data: [15, 20, 12, 60],
    },
  }"
/>
</template>

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

1<template>
2 <pie-chart
3  :chart="{
4    labels: ['Facebook', 'Direct', 'Organic', 'Referral'],
5    datasets: {
6      label: 'Projects',
7      data: [15, 20, 12, 60],
8    },
9  }"
10/>
11</template>
12
13<script>
14import PieChart  from "@/examples/Charts/PieChart.vue";
15export default { components: { PieChart , }, };
16</script>

Props Information

Name	Type	Default	Description
id	string	chart-pie	Used to set an id 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.