I want to show the value of label inside the pie graph. (vue-chartjs / pieceLabel)

I am a student studying vue.
I used Vue-chartjs to draw a graph, and I’d like to display the value on a pie graph.
But I don’t know what to do.

Please help me…

the current situation (image) : enter image description here

My wish (image) : enter image description here

Vue.component('pie-chart', {
 extends : VueChartJs.Pie,
 props: ['data', 'options'],
 mounted(){
   this.renderPieChart();
 },
 computed: {
   attendanceData : function(){
     return this.data
   }
 },
 methods : {
   renderPieChart : function(){

     this.renderChart(
       {
         labels: ['a','b','c','d'],
         datasets: [{
             backgroundColor: ['#10a236', '#f9cd41', '#fe7272', '#5c7add'],
             data: [10,20,30,40]
           }]
       },
       {
         responsive: true,
         maintainAspectRatio: false,
         pieceLabel: {
           render: 'value',
           precision: 1,
         }
       }
     )

   }
 },
 watch : {
      attendanceData : function(){
        this.$data._chart.destroy();
        this.renderPieChart();
      }
    }
  });

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

As The dicusstion on tooltip of chart.js at Stackoverflow, uses plugin is one solution.

then as Vue chart.js guide said,

in mounted(), uses this.addPlugin to add your plugin like below demo:

Vue.config.productionTip = false
//below plugin is copied from https://stackoverflow.com/a/37989832/5665870
let pluginConfig = {
    id: 'my-plugin',
  beforeRender: function (chart) {
    if (chart.config.options.showAllTooltips) {
        // create an array of tooltips
        // we can't use the chart tooltip because there is only one tooltip per chart
        chart.pluginTooltips = [];
        chart.config.data.datasets.forEach(function (dataset, i) {
            chart.getDatasetMeta(i).data.forEach(function (sector, j) {
                chart.pluginTooltips.push(new Chart.Tooltip({
                    _chart: chart.chart,
                    _chartInstance: chart,
                    _data: chart.data,
                    _options: chart.options.tooltips,
                    _active: [sector]
                }, chart));
            });
        });

        // turn off normal tooltips
        chart.options.tooltips.enabled = false;
    }
  },
  afterDraw: function (chart, easing) {
    if (chart.config.options.showAllTooltips) {
        // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
        if (!chart.allTooltipsOnce) {
            if (easing !== 1)
                return;
            chart.allTooltipsOnce = true;
        }

        // turn on tooltips
        chart.options.tooltips.enabled = true;
        Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
            tooltip.initialize();
            tooltip.update();
            // we don't actually need this since we are not animating tooltips
            tooltip.pivot();
            tooltip.transition(easing).draw();
        });
        chart.options.tooltips.enabled = false;
    }
  }
}

Vue.component('pie-chart', {
 extends : VueChartJs.Pie,
 props: ['data', 'options'],
 mounted(){
  this.addPlugin(pluginConfig);
   this.renderPieChart();
 },
 computed: {
   attendanceData : function(){
     return this.data
   }
 },
 methods : {
   renderPieChart : function(){
     this.renderChart(
       {
         labels: ['a','b','c','d'],
         datasets: [{
             backgroundColor: ['#10a236', '#f9cd41', '#fe7272', '#5c7add'],
             data: [10,20,30,40]
           }]
       },
       {
         responsive: true,
         maintainAspectRatio: false,
         pieceLabel: {
           render: 'value',
           precision: 1
         },
         showAllTooltips: true
       }
     )

   }
 },
 watch : {
    attendanceData : function(){
      //this.$data._chart.destroy();
      //this.renderPieChart();
    }
  }
})
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello World'
  }
})
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js"></script>
<div id="app">
  <pie-chart></pie-chart>
</div>


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x