Custom data labels can be used on VueUiDonut, through the #dataLabel scoped slot. Anything can be placed inside (icon, image, mini chart...).
Set the config.style.chart.layout.labels.dataLabels.useLabelSlots
to true
, and then use the slot inside the component:
<VueUiDonut
:config="config"
:dataset="dataset"
/>
<template #dataLabel="{ datapoint, isBlur, isVisible, isSafari, textAlign, flexAlign, percentage }">
<div :style="`background:${datapoint.color}`">
{{ datapoint.name }} : {{ percentage }}
</div>
</template>
</VueUiDonut>