I have integrated a doughnut chart from chartjs into my Vue project using vue-chartjs.
Currently, the doughnut chart does not display anything when there is no data or all values are empty. Is there a way to customize the color and show the entire doughnut chart in such scenarios?
The desired behavior is to have a custom-colored doughnut chart displayed when there is no data. I found an example here, but it only shows a circle. How can I modify the code to display the full doughnut with custom colors when empty? Any suggestions?
Implementation:
<template>
<Doughnut
id="my-chart-id"
:chartOptions="getChartOptions"
:chartData="getChartData"
:plugins="[defaultBackground]"
/>
</template>
<script>
import { Doughnut } from 'vue-chartjs';
import { Chart as ChartJS, ArcElement } from 'chart.js';
ChartJS.register(ArcElement);
export default {
name: 'DoughnutChart',
components: { Doughnut },
props: ['chartData', 'options', 'theme', 'mspDomain', 'rootDomain'],
data() {
return {
defaultBackground: {
id: 'custom_canvas_background_color',
afterDraw: function(chart) {
const {datasets} = chart.data;
const {color, width, radiusDecrease} = options;
let hasData = false;
for (let i = 0; i < datasets.length; i += 1) {
const dataset = datasets[i];
hasData |= dataset.data.length > 0;
}
if (!hasData) {
const {chartArea: {left, top, right, bottom}, ctx} = chart;
const centerX = (left + right) / 2;
const centerY = (top + bottom) / 2;
const r = Math.min(right - left, bottom - top) / 2;
ctx.beginPath();
ctx.lineWidth = width || 2;
ctx.strokeStyle = color || 'rgba(255, 128, 0, 0.5)';
ctx.arc(centerX, centerY, (r - radiusDecrease || 0), 0, 2 * Math.PI);
ctx.stroke();
}
}
}
};
},
computed: {
getChartData() {
return this.chartData;
},
getChartOptions() {
return this.options;
}
}
};
</script>
<style></style>
Currently, the code only displays a circle instead of the complete doughnut chart.