<canvas id="myChart" width="400" height="400"></canvas>
body {
  background-color: #a3d5d3;
}
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: "pie",
  data: {
    labels: ["OK", "WARNING", "CRITICAL", "UNKNOWN"],
    datasets: [
      {
        label: "# of Tomatoes",
        data: [12, 19, 3, 5],
        backgroundColor: [
          "rgba(255, 99, 132, 0.5)",
          "rgba(54, 162, 235, 0.2)",
          "rgba(255, 206, 86, 0.2)",
          "rgba(75, 192, 192, 0.2)"
        ],
        borderColor: [
          "rgba(255,99,132,1)",
          "rgba(54, 162, 235, 1)",
          "rgba(255, 206, 86, 1)",
          "rgba(75, 192, 192, 1)"
        ],
        borderWidth: 1
      }
    ]
  },
  options: {
    cutoutPercentage: 40,
    responsive: false
  },
  plugins: [
    {
      beforeDraw: function(chart) {
        const { ctx } = chart;
        ctx.font = "300 2.5rem Arial";
        ctx.color = "red";
        ctx.fillText("Jai Ho", 100, 100);
      }
    }
  ]
});

console.log("My chart is", myChart);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://github.com/chartjs/Chart.js/releases/download/v2.9.3/Chart.bundle.min.js