Simple
vue
<script setup>
const dataset = ref([
{ value: 350, name: 'Direct' },
{ value: 110, name: 'Email' },
{ value: 234, name: 'Ad Networks' },
{ value: 552, name: 'Video Ads' },
{ value: 1458, name: 'Search Engines' },
]);
</script>
<template>
<PieChart
class="un-h-20em un-w-40em"
:dataset="dataset"
/>
</template>
Labels Disabled
vue
<script setup>
const dataset = ref([
{ value: 350, name: 'Direct' },
{ value: 110, name: 'Email' },
{ value: 234, name: 'Ad Networks' },
{ value: 552, name: 'Video Ads' },
{ value: 1458, name: 'Search Engines' },
]);
</script>
<template>
<PieChart
class="un-h-20em un-w-40em"
:dataset="dataset"
:label="false"
/>
</template>
Tooltip
vue
<script setup>
const dataset = ref([
{ value: 335, name: 'Direct' },
{ value: 310, name: 'Email' },
{ value: 234, name: 'Ad Networks' },
{ value: 135, name: 'Video Ads' },
{ value: 1548, name: 'Search Engines' },
]);
</script>
<template>
<PieChart
class="un-h-20em un-w-40em"
:dataset="dataset"
tooltip
/>
</template>
Legend
vue
<script setup>
const dataset = ref([
{ value: 335, name: 'Direct' },
{ value: 310, name: 'Email' },
{ value: 234, name: 'Ad Networks' },
{ value: 135, name: 'Video Ads' },
{ value: 1548, name: 'Search Engines' },
]);
</script>
<template>
<PieChart
class="un-h-20em un-w-40em"
:dataset="dataset"
legend
:label="false"
/>
</template>
Title
vue
<script setup>
const dataset = ref([
{ value: 335, name: 'Direct' },
{ value: 310, name: 'Email' },
{ value: 234, name: 'Ad Networks' },
{ value: 135, name: 'Video Ads' },
{ value: 1548, name: 'Search Engines' },
]);
</script>
<template>
<PieChart
class="un-h-20em un-w-40em"
:dataset="dataset"
title="Pie Chart"
/>
</template>
Radius
vue
<script setup>
const dataset = ref([
{ value: 350, name: 'Direct' },
{ value: 110, name: 'Email' },
{ value: 234, name: 'Ad Networks' },
{ value: 552, name: 'Video Ads' },
{ value: 1458, name: 'Search Engines' },
]);
</script>
<template>
<PieChart
class="un-h-20em un-w-40em"
:dataset="dataset"
:radius="['20%', '90%']"
/>
</template>
Radius Filled
vue
<script setup>
const dataset = ref([
{ value: 350, name: 'Direct' },
{ value: 110, name: 'Email' },
{ value: 234, name: 'Ad Networks' },
{ value: 552, name: 'Video Ads' },
{ value: 1458, name: 'Search Engines' },
]);
</script>
<template>
<PieChart
class="un-h-20em un-w-40em"
:dataset="dataset"
:radius="['0%', '80%']"
legend
:label="false"
/>
</template>