Show "No Data" message for Pie chart where there is no data - Javascript Chart.js

Javascript examples for Chart.js:Pie Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Pie Chart

Description

Show "No Data" message for Pie chart where there is no data

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://npmcdn.com/chart.js@2.4.0/dist/Chart.bundle.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//w  w  w.  j a v a  2 s  . com
Chart.plugins.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 = "16px normal 'Helvetica Nueue'";
      ctx.fillText('No data to display', width / 2, height / 2);
      ctx.restore();
    }
  }
});
var ctx = document.getElementById('chart').getContext('2d');
var myChart = new Chart(ctx, {
   type: 'line',
  data: {
     labels: ['Jan', 'Feb', 'Mar', 'Apr'],
    datasets: []
  }
});
document.getElementById('addData').addEventListener('click', function() {
   myChart.config.data.datasets.push({
     label: 'Dataset',
    data: [10, 2, 30, 44],
    borderColor: 'rgb(255, 99, 132)',
    fill: false
  });
  myChart.update();
});
    }

      </script> 
   </head> 
   <body> 
      <canvas id="chart"></canvas> 
      <button id="addData"> Set data </button>  
   </body>
</html>

Related Tutorials