Chart.js : Controller for Scatter chart doesn't work for draw function

Question

Following this link to extend Scatter type with draw() function to print "No Data Found" in the center but with the Y axis scale.

Here's the code:

Chart.defaults.derivedScatter = Chart.defaults.scatter;

var ctx = canvas.getContext("2d");

var custom = Chart.controllers.scatter.extend({
    draw: function() {
        Chart.controllers.scatter.prototype.draw.call(this);

        this.chart.chart.ctx.textAlign = "center";
        this.chart.chart.ctx.font = "11px Arial";
        this.chart.chart.ctx.fillText("No data found", 45, 100);
    }
});

Chart.controllers.derivedScatter = custom;

chart = new Chart(ctx, {
    type: "derivedScatter",
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true,
                    max:0.10,
                    stepSize:0.001,
                    callback: function(label, index, labels) {
                        var n = parseFloat(label);
                        return (Math.round(n*1000)/10).toFixed(1);
                    }
                },
                gridLines: {
                    display: false,
                    drawBorder: false
                }
            }],
            xAxes: [{
                display: false,
                gridLines: {
                   display: false
                }
            }]
        },
        legend: {
            display:false
        },
        responsive: false
    }
});

I am getting the Y axis scale but I don't see No data found as a text in the center of the chart. It doesn't seem to work.

Looked at this and this stack-overflow answers to come up with this solution.

Note: Here it doesn't say they have a built in type for Scatter. Is that the reason?

Any other approach or any other help would be appreciated.

Answer 1

The reason why it­'s not working is because, you haven't initialized the data property of your chart. In order to use your extended dataset controller, you must initialize / set the data.datasets property while constructing your chart, like so :

...
chart = new Chart(ctx, {
   type: "derivedScatter",
   data: {
      datasets: [{}]
   },
   options: {
...

note: the important part is to initialize the datasets property and it doesn't necessarily have to contain any data.

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

var ctx = canvas.getContext("2d");

Chart.defaults.derivedScatter = Chart.defaults.scatter;

var custom = Chart.controllers.scatter.extend({
   draw: function() {
      Chart.controllers.scatter.prototype.draw.call(this);

      this.chart.chart.ctx.textAlign = "center";
      this.chart.chart.ctx.font = "11px Arial";
      this.chart.chart.ctx.fillText("No data found", 80, 80);
   }
});

Chart.controllers.derivedScatter = custom;

chart = new Chart(ctx, {
   type: "derivedScatter",
   data: {
      datasets: [{}]
   },
   options: {
      scales: {
         yAxes: [{
            ticks: {
               beginAtZero: true,
               max: 0.10,
               stepSize: 0.001,
               callback: function(label, index, labels) {
                  var n = parseFloat(label);
                  return (Math.round(n * 1000) / 10).toFixed(1);
               }
            },
            gridLines: {
               display: false,
               drawBorder: false
            }
         }],
         xAxes: [{
            display: false,
            gridLines: {
               display: false
            }
         }]
      },
      legend: {
         display: false
      },
      responsive: false
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>