Chart.js Default Value When Displaying No Chart Data

I'm using chart.Js to display my chart. I'm getting my chart data via ajax and graphically render it to display the data, My question is, there are few cases when my Ajax returns n

Solution 1:

You can try this solution:

if(1 < chartData.labels.length) {
    chart = new Chart(options.ctx).Line(chartData, options.chartOptions);
} else {
    options.ctx.font = "20px " + Chart.defaults.global.tooltipTitleFontFamily;
    options.ctx.textAlign = "center";
    options.ctx.textBaseline = "middle";
    options.ctx.fillStyle = Chart.defaults.global.scaleFontColor;
    options.ctx.fillText("No data in chart.", options.ctx.canvas.clientWidth / 2, options.ctx.canvas.clientHeight / 2);
}

Solution 2:

This works for me I hope it helps

Chart.pluginService.register({
afterDraw: function (chart) {
                if (chart.data.datasets[0].data.length === 0) {
                    // No data is presentvar ctx = chart.chart.ctx;
                    var width = chart.chart.width;
                    var height = chart.chart.height
                    chart.clear();

                    ctx.save();
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.font = "20px normal 'Helvetica Nueue'";
                    ctx.fillText('No data to display', width / 2, height / 2);
                    ctx.restore();
                }

            }
});