How to Change the Label Colors or the Legend Colors in a Chart ?

Last Updated : 03 Jan, 2024

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=
"https://cdn.jsdelivr.net/npm/chart.js">
      </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>