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.
<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>
