Pie Chart - Material

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

Pie Chart

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

Props Information

Name	Type	Default	Description
id	String	chart-pie	Used to set the chart id.
height	[String, Number]	200	Used to set the chart height.
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.