overlapping text in vue component for doughnut chart.js

Viewed 2146

I have a chart.js doughnut chart vue component as below

The problem is that when i use multiple chart instances the text in the middle overlap.

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.

enter image description here

<script>
import { Doughnut } from "vue-chartjs";

export default {
  name: "doughnutChart",
  extends: Doughnut,
  props: {
    data1: {
      type: String,
      // default: function() {
      //   return;
      // }
    }
  },
  mounted() {
    var value = this.data1;
    var data = {
      labels: ["My val", ""]
    };
    this.renderChart({
      datasets: [{
        borderWidth: 1,
        backgroundColor: ["#FF6384", "#AAAAAA"],
        hoverBackgroundColor: ["#FF6384", "#AAAAAA"],
        hoverBorderColor: ["#FF6384", "#ffffff"],
        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 + "em sans-serif";
          ctx.textBaseline = "middle";

          var text = val + "%",
            textX = Math.round((width - ctx.measureText(text).width) / 2),
            textY = height / 2;

          ctx.fillText(text, textX, textY);
          ctx.save();
        }
      });
    }
  }
};
</script>
0 Answers
Related