<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" />
< title >Custom Chart.js</ title >
< script src =
</ script >
</ head >
< body >
< h1 style = "color: green; text-align: center;" >
GeeksForGeeks
</ h1 >
< canvas id = "myChart" width = "400" height = "200" ></ canvas >
< script >
// JavaScript code to create and customize the chart
document.addEventListener("DOMContentLoaded", function () {
let ctx =
document.getElementById("myChart").getContext("2d");
let myChart = new Chart(ctx, {
type: "bar",
data: {
labels: ["Label 1", "Label 2", "Label 3"],
datasets: [
{
label: "Dataset 1",
data: [10, 20, 30],
backgroundColor: [
"rgba(255, 99, 132, 0.5)",
"rgba(54, 162, 235, 0.5)",
"rgba(255, 206, 86, 0.5)",
],
borderColor: [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
],
borderWidth: 1,
},
],
},
options: {
plugins: {
// Changing the lagend colour
legend: {
labels: {
color: "blue",
},
},
},
// Changing the label colour
scales: {
y: {
ticks: {
color: "green",
beginAtZero: true
},
},
x: {
ticks: {
color: "red",
beginAtZero: true
},
},
},
},
});
});
</ script >
</ body >
</ html >
|