Chartjs-Chart.js pie chart to display "No Data" if the datasets are empty

Try this:

var ctx2 = document.getElementById('chart2').getContext('2d');
var myChart2 = new Chart(ctx2, {
    type:'pie',
    data:{
      labels:['Jan', 'Feb', 'Mar', 'Apr'],
      datasets:[]
    }
});

What I did in my angular application is duplicate my doughnut chart.

Give the placeholder one position: absolute; z-index: 1; via a css class .placeholder-chart

.real-chart {
    position: relative;
    z-index: 2;
}

.placeholder-chart {
    position: absolute;
    z-index: 1;
}

Then I initialize my chart data as 100% and background color as desired:

options: {
    "aspectRatio": 1.75,
    "legend": {
        "display": false,
    },
    "title": {
        "display": false,
    },
    "rotation": - Math.PI,
    "circumference": Math.PI
}

realData: {
    // My real data, which result 0 in this case
}

placeholderData: {
    "labels": "",
    "datasets": [
        {
           "label": [""],
           "data": [100],
           "backgroundColor": "#F2EEE8"
        }
    ]
}

My template:

<chart
    class="placeholder-chart"                                
    [type]="'doughnut'"
    [data]="placeholderData"
    [options]="options"></chart>
<chart
    class="real-chart"
    [type]="'doughnut'"
    [data]="realData"
    [options]="options"></chart>

In picture 1 I only get a thin yellow zero line

In picture 2 I have the 2 charts – the placeholder one above the real one

In picture 3 then the overlapped two charts