Vue ChartJS – Pie/Doughnut – Outlabel

By default, the chartjs, chart type: Pie or Doughnut, we can have label inside or as legend, see at: https://www.chartjs.org/docs/latest/charts/doughnut.html

To have out-label as above image, will need some challenge as specially with vuejs. The issue as stated in VueChartJS#20, I faced that too.

Plugin

I finally used “chartjs-plugin-piechart-outlabels” plugin and to challenge the issue#20 above and as following.

Install

npm install chartjs-plugin-piechart-outlabels –save

Use it in VueJS Project

import ChartDataOutlabels from 'chartjs-plugin-piechart-outlabels';

Vue.use(ChartDataOutlabels);

ChartJS Component: doughnut-outlabel-graph.vue

import { Doughnut } from 'vue-chartjs'

export default {
   extends: Doughnut,
   props: ['graph'],
   data() {
      return {
         options: {
             responsive: true,
             plugins: {
                legend: false,
                outlabels: {
                   text: '%l %v (%p)',
                   color: 'white',
                   stretch: 40,
                   font: {
                       resizable: true,
                       minSize: 10,
                       maxSize: 12
                   }
                 }
               },
               layout: {
                 padding: 135
               }
          },
      };
  },
  watch:{
    graph: {
        handler(val){
         this.renderChart(this.graph, this.options);
        },
        deep: true
     }
   }
 }

Use It