In this article, we will discuss how can we change the label colors and legends colors in our chart using Chart.js. We can simply change some properties in the options configuration so that it shows the desired output.
CDN link:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>Syntax:
options: {
plugins: {
// changin the lagend colour
legend: {
labels: {
color: "your_color",
},
},
},
// Changing the label colour
scales: {
y: {
ticks: { color: "your_color", beginAtZero: true },
},
x: {
ticks: { color: "your_color", beginAtZero: true },
},
},
}
Approach
- In this approach, we will set the colors to the legends and labels by changing the options configuration.
- Legend Colour: The legend.labels.color property is set to “blue” in the options section. This changes the color of the legend labels to blue.
-
Label Colour: We will change the label color by changing the following properties.
- Y-axis Label Colour: The scales.y.ticks.color property is set to “green” in the options section. This changes the color of the Y-axis labels to green.
- X-axis Label Colour: The scales.x.ticks.color property is set to “red” in the options section. This changes the color of the X-axis labels to red.
Example: Below is an example showing the color changes of labels and legends.
HTML
<!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>
<!-- Create a canvas element to render the chart -->
<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>
|
Output:
Output