title: How do we put labels on pie chart arcs - chart.js/vue-chart.js
body: <p>I am using <code>VueChart js/ chart js</code> to create a pie chart in my vue project, I would like to show % of data inside the each arcs, how do we do it?
  My code in Vue:</p>
  
  <pre><code>fillData() {
    this.datacollection = {
      labels: ['T', 'W', 'R', 'B'],
      datasets: [
        {
          backgroundColor: [
            'rgb(51,122,183)',
            'rgb(226,142,65)',
            'rgb(0,169,157)',
            'rgb(217,83,79)',
          ],
          data: [
            this.tw.length,
            this.w.length,
            this.r.length,
            this.b.length,
          ],
          hoverBackgroundColor: ['#0275d8', '#f0ad4e', '#5cb85c', '#d9534f'],
        },
      ],
    };
    this.options = {
      responsive: true,
      maintainAspectRatio: false,
      devicePixelRatio: 2,
      tooltips: {
        enabled: true,
      },
      title: {
        display: true,
        text: 'Arcs state %',
        position: 'bottom',
        fontSize: 20,
      },
    };
  },
  </code></pre>
  
  <p><strong>UPDATE</strong> I tried the plugin recommended by @zb22 and this but it's not working. I did install the plugin through npm</p>
  
  <pre><code> this.options = {
      plugins: {
        labels: {
          render: 'percentage',
          fontColor: ['white', 'white', 'white'],
          precision: 2,
        },
      },
    };
  </code></pre>
  
  <p>I have something like below, and it shows data only when I hove over each arc</p>
  
  <p><a href="https://i.stack.imgur.com/8n8D4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8n8D4.png" alt="enter image description here"></a></p>
  
  <p>My aim is to display my chart as below:</p>
  
  <p><a href="https://i.stack.imgur.com/1QGSy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1QGSy.png" alt="enter image description here"></a></p>