JSFiddle - React, Tailwind, and code Playground

by core972

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<canvas id="pieChartExample01" width="25" height="25"></canvas>
<div id="no-data">Nothing to display</div>

CSS

#no-data{
  display: none;
  position: absolute;
  padding: 50px 0;
  text-align: center;
  font-size: 3rem;
  top: 15%;
  width: 100%;
}

JavaScript

new Chart(document.getElementById('pieChartExample01'), {
    type: 'pie',
    data: {
        labels: [
            'Views',
            'Print Requests',
            'PDF Downloads',
            'DOCX Downloads',
        ],
        datasets: [{
            backgroundColor: [
                'rgba(71, 101, 160, 0.3)',  // #4765a0.
                'rgba(0, 0, 0, 0.3)',  // #000000.
                'rgba(52, 137, 219, 0.3)',  // #3489db.
                'rgba(179, 179, 179, 0.3)',  // #b3b3b3.
            ],
            hoverBackgroundColor: [
                'rgba(71, 101, 160, 0.6)',  // #4765a0.
                'rgba(0, 0, 0, 0.6)',  // #000000.
                'rgba(52, 137, 219, 0.6)',  // #3489db.
                'rgba(179, 179, 179, 0.6)',  // #b3b3b3.
            ],
            borderWidth: 1,
            hoverBorderWidth: 2,
            borderColor: [
                'rgba(71, 101, 160, 1)',  // #4765a0.
                'rgba(0, 0, 0, 1)',  // #000000.
                'rgba(52, 137, 219, 1)',  // #3489db.
                'rgba(179, 179, 179, 1)',  // #b3b3b3.
            ],
            borderAlign: 'inner',
           data: [null, null, null, null]
      }]
    },
    options: {
        title: {
          display: false,
          text: 'Overall Activity'
        },
        animation:{
          onComplete: function(animation) {
              var firstSet = animation.chart.config.data.datasets[0].data,
              		dataSum = firstSet.reduce((accumulator, currentValue) => accumulator + currentValue);
                  
              if(typeof firstSet !== "object" || dataSum === 0){
              	document.getElementById('no-data').style.display = 'block';
                document.getElementById('pieChartExample01').style.display = 'none'
              }
          }
        }
    }
});