<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);
This Pen doesn't use any external CSS resources.