no-data-block.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>No data block</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
      }
      .chartCard {
        width: 100vw;
        height: calc(100vh - 40px);
        background: rgba(75, 192, 192, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .chartBox {
        width: 700px;
        padding: 20px;
        border-radius: 20px;
        border: solid 3px rgba(75, 192, 192, 1);
        background: white;
      }
    </style>
  </head>
  <body>
    <div class="chartCard">
      <div class="chartBox">
        <canvas id="myChart"></canvas>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.0/dist/chart.umd.min.js"></script>

    <script>
      const data = {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [
          {
            label: "# of Votes",
            data: [12, null, 3, null, 9, 3],
            backgroundColor: [
              "rgba(255, 99, 132, 0.2)",
              "rgba(54, 162, 235, 0.2)",
              "rgba(255, 206, 86, 0.2)",
              "rgba(75, 192, 192, 0.2)",
              "rgba(153, 102, 255, 0.2)",
              "rgba(255, 159, 64, 0.2)",
            ],
            borderColor: [
              "rgba(255, 99, 132, 1)",
              "rgba(54, 162, 235, 1)",
              "rgba(255, 206, 86, 1)",
              "rgba(75, 192, 192, 1)",
              "rgba(153, 102, 255, 1)",
              "rgba(255, 159, 64, 1)",
            ],
            borderWidth: 1,
          },
        ],
      };

      const noData = {
        id: "noData",
        afterDatasetsDraw: (chart, args, plugins) => {
          const {
            ctx,
            data,
            chartArea: { top, bottom, left, right, width, height },
            scales: { x, y },
          } = chart;

          ctx.save();
          const difference = x.max - x.min + 1;
          const segment = width / difference;

          data.datasets[0].data.forEach((datapoint, index) => {
            const angle = Math.PI / 180;
            ctx.translate(0, 0);

            if (datapoint === null) {
              ctx.fillStyle = "rgba(102, 102, 102, 1)";
              ctx.fillRect(
                x.getPixelForValue(index) - segment / 2,
                top,
                segment,
                height
              );

              ctx.rotate(90 * angle);
              ctx.font = "bold 20px sans-serif";
              ctx.fillStyle = "white";
              ctx.fillText("No Data", height / 2, -x.getPixelForValue(index));

              ctx.rotate(-90 * angle);
              ctx.restore();
            }
          });
        },
      };

      const config = {
        type: "bar",
        data: data,
        options: {
          scales: {
            x: {
              min: 0,
              max: 4,
            },
            y: {
              beginAtZero: true,
            },
          },
        },
        plugins: [noData],
      };

      const myChart = new Chart(document.getElementById("myChart"), config);
    </script>
  </body>
</html>