Show message that data is empty - Afterdraw

[lironesamoun]

Hi,

If there is no data available, I would like to show a canva with a simple message saying there is no data available.
With ChartJS 2.X I was able to do like this:

 function drawNoDataAvailable(canvaID) {
    Chart.register({
        afterDraw: function(chart) {
            if (chart.data.datasets.length === 0) {
                // No data is present
                var 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 = "35px normal 'Helvetica Nueue'";
                ctx.fillStyle = "gray";
                ctx.fillText(
                    "No data Available",
                    width / 2,
                    height / 2
                );
                ctx.restore();
            }
        }
    });

    var canva_id = "#" + canvaID;
    var ctx = $(canva_id);

    var myChart = new Chart(ctx, {
        type: "line",
        data: {
            labels: [],
            datasets: []
        }
    });
}

With ChartJs 3.X, it does not work anymore.

Could you please give me an insight about how to adapt the code or another way to do that ?

Thank you

[LeeLenaleee]

You need to give the plugin an id and remove the double chart for your variables

 function drawNoDataAvailable(canvaID) {
   Chart.register({
     id: 'noData',
     afterDraw: function(chart) {
       if (chart.data.datasets.length === 0) {
         // No data is present
         var ctx = chart.ctx;
         var width = chart.width;
         var height = chart.height;
         chart.clear();

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



   var myChart = new Chart(document.getElementById('chartJSContainer'), {
     type: "line",
     data: {
       labels: [],
       datasets: []
     }
   });
 }
 drawNoDataAvailable()

Fiddle: https://jsfiddle.net/Leelenaleee/wvqx79hz/8/

[lironesamoun]

Thank you very much !