0

i use vue-chart-3 in nuxt and want show percentage value in pie pieces but i don't know how? pieceLabel doesn't work!

<template>
  <div style="width: 100%">
    <DoughnutChart :chart-data="testData" :options="options" />
  </div>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
import { DoughnutChart } from 'vue-chart-3'

export default defineComponent({
  name: 'Home',
  components: { DoughnutChart },
  setup () {
    const testData = {
      labels: ['Paris', 'Nîmes', 'Toulon', 'Perpignan', 'Autre'],
      datasets: [
        {
          data: [30, 40, 60, 70, 5],
          backgroundColor: ['red', '#0079AF', '#123E6B', '#97B0C4', '#A5C8ED']
        }
      ]
    }
    const options = ref({
      responsive: true,
      pieceLabel: {
        mode: 'percentage',
        precision: 1
      }
    })

    return { testData, options }
  }
})
</script>

should i use chartjs-plugin-datalabels or something else? thanks in advance.

MohammadAmin
  • 1
  • 2
  • Do `@vue/composition-api` work with everything else? https://composition-api.nuxtjs.org/ may maybe be a better fit here. Also, can you be more explicit when you're saying that this is not working please? – kissu Sep 28 '21 at 12:35
  • Does this answer your question? [ChartJS version 3 how to add percentage to pie chart tooltip](https://stackoverflow.com/questions/68209210/chartjs-version-3-how-to-add-percentage-to-pie-chart-tooltip) – LeeLenalee Sep 28 '21 at 12:36
  • Cleaner calculation in this one: https://stackoverflow.com/questions/69361448/how-can-i-display-the-percentage-inside-the-graph-and-on-hover – LeeLenalee Sep 28 '21 at 12:36

0 Answers0