github graphieros/vue-data-ui v2.1.0
VueUiDonut #dataLabel slot

latest releases: v3.1.3, v3.1.2, v3.1.1...
16 months ago

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>

Don't miss a new vue-data-ui release

NewReleases is sending notifications on new releases.