title: overlapping text in vue component for doughnut chart.js
body: <p>I have a chart.js doughnut chart vue component as below</p>
  <p>The problem is that when i use multiple chart instances the text in the middle overlap.</p>
  <p>But they are overlapped. I tried changing titles pacing, but that didn't do anything. How can I fix this?
  I like to have control over the HTML / whatever which gets outputted to the label.</p>
  <p><a href="https://i.stack.imgur.com/5EZxf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5EZxf.png" alt="enter image description here" /></a></p>
  <pre><code>&lt;script&gt;
  import { Doughnut } from &quot;vue-chartjs&quot;;
  
  export default {
    name: &quot;doughnutChart&quot;,
    extends: Doughnut,
    props: {
      data1: {
        type: String,
        // default: function() {
        //   return;
        // }
      }
    },
    mounted() {
      var value = this.data1;
      var data = {
        labels: [&quot;My val&quot;, &quot;&quot;]
      };
      this.renderChart({
        datasets: [{
          borderWidth: 1,
          backgroundColor: [&quot;#FF6384&quot;, &quot;#AAAAAA&quot;],
          hoverBackgroundColor: [&quot;#FF6384&quot;, &quot;#AAAAAA&quot;],
          hoverBorderColor: [&quot;#FF6384&quot;, &quot;#ffffff&quot;],
          data: [value, 100 - value]
        }]
      }, {
        responsive: true,
        maintainAspectRatio: true,
        legend: {
          display: false
        },
        cutoutPercentage: 70,
        elements: {
          center: {
            text: '50%' //set as you wish
          }
        },
        tooltips: {
          filter: function(item, data) {
            var label = data.labels[item.index];
            if (label) return item;
          }
        }
      });
      this.textCenter(value)
    },
    methods: {
      textCenter(val) {
        Chart.pluginService.register({
          beforeDraw: function(chart) {
            var width = chart.chart.width,
              height = chart.chart.height,
              ctx = chart.chart.ctx;
  
            ctx.restore();
            var fontSize = (height / 114).toFixed(2);
            ctx.font = fontSize + &quot;em sans-serif&quot;;
            ctx.textBaseline = &quot;middle&quot;;
  
            var text = val + &quot;%&quot;,
              textX = Math.round((width - ctx.measureText(text).width) / 2),
              textY = height / 2;
  
            ctx.fillText(text, textX, textY);
            ctx.save();
          }
        });
      }
    }
  };
  &lt;/script&gt;
  </code></pre>