Chart.js General Colors

Last Updated : 06 Dec, 2023

Chart.js General Colors mainly provides a set of vibrant appealing colors to the chart elements. Using these colors, the appearance and visuals of the chart are been enhanced, and also the data visualizations can be represented more attractively. We can specify the colors in Hexadecimal, RGB, and HSL format.

Syntax:

data: {
  datasets: [{
    // Example dataset configuration
    data: [/* data values */],
    backgroundColor: '...', // Background color
    borderColor: '...,      // Border color
    borderWidth: ...,     // Border width
  }],
},

General Colors Configuration Options

backgroundColor: The option is used to configure the background color for chart elements.
borderColor: This option is used to set the color of element borders.
borderWidth: This option is mainly used to adjust the width of element borders.

Color Format:

Hexadecimal: A color representation using a six-digit hexadecimal code. for example, #RRGGBB.
RGB or RGBA: RGB stands for Red, Green, and Blue, and RGBA includes an additional alpha channel for transparency. For example, rgb(255, 0, 0) or rgba(255, 0, 0, 0.5).
HSL or HSLA: HSL stands for Hue, Saturation, and Lightness, and HSLA includes an additional alpha channel for transparency. For example, hsl(120, 100%, 50%) or hsla(120, 100%, 50%, 0.5).

CDN link:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js"></script>

Example 1: In the below example, we have used the Bar Chart form Chart.js and for each segment in the chart we have given a different color so that the appearance of the chart becomes more attractive. We have also added the border color to the segments.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0">
    <title>GeeksforGeeks Bar Chart</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js">
    </script>
</head>
 
<body>
    <div>
        <h1 style="color:green;">GeeksforGeeks</h1>
        <h3>Chart.js General Colors - Example 1</h3>
        <div>
            <canvas id="barChart"
                     width="700"
                     height="300">
            </canvas>
        </div>
    </div>
    <script>
        const ctx = 
              document.getElementById('barChart').getContext('2d');
        const dataForBarChart = {
            labels: ['JavaScript', 
                     'Python', 'Java', 
                     'C++', 'HTML/CSS'],
            datasets: [{
                data: [80, 65, 75, 90, 95],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.7)',
                    'rgba(75, 192, 192, 0.7)',
                    'rgba(255, 205, 86, 0.7)',
                    'rgba(54, 162, 235, 0.7)',
                    'rgba(153, 102, 255, 0.7)',
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(255, 205, 86, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(153, 102, 255, 1)',
                ],
                borderWidth: 4,
            }],
        };
        const optionsForBarChart = {
            scales: {
                y: {
                    beginAtZero: true,
                },
            },
        };
        new Chart(ctx, {
            type: 'bar',
            data: dataForBarChart,
            options: optionsForBarChart,
        });
    </script>
</body>
 
</html>

Output:

Output1

Example 2: In the below example, we have used the Polar Area chart representing the data related to GeeksforGeeks. For each of the data segments, we have provided a unique color with a unique border color too. We have also adjusted the width of the border.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0">
    <title>GeeksforGeeks Polar Area Chart</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js">
    </script>
</head>
 
<body>
    <div>
        <h1 style="color:green;">GeeksforGeeks</h1>
        <h3>Chart.js General Colors - Example 2</h3>
        <div> 
            <canvas id="polarAreaChart"
                      width="400"
                      height="400">
              </canvas>
        </div>
    </div>
    <script>
        const ctx = 
              document.getElementById('polarAreaChart').getContext('2d');
        const dataForPolarAreaChart = {
            labels: ['Coding', 'Problem Solving', 
                     'Algorithms', 'Data Structures', 
                     'Debugging'],
            datasets: [{
                data: [90, 80, 85, 75, 85],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.7)',
                    'rgba(75, 192, 192, 0.7)',
                    'rgba(255, 205, 86, 0.7)',
                    'rgba(54, 162, 235, 0.7)',
                    'rgba(153, 102, 255, 0.7)',
                ],
                borderColor: [
                    'rgba(255, 0, 0, 1)',
                    'rgba(0, 128, 0, 1)',
                    'rgba(255, 165, 0, 1)',
                    'rgba(0, 0, 255, 1)',
                    'rgba(128, 0, 128, 1)',
                ],
                borderWidth: 2,
            }],
        };
        const optionsForPolarAreaChart = {
            maintainAspectRatio: false,
            scale: {
                ticks: {
                    suggestedMin: 0,
                    suggestedMax: 100,
                },
            },
        };
        new Chart(ctx, {
            type: 'polarArea',
            data: dataForPolarAreaChart,
            options: optionsForPolarAreaChart,
        });
    </script>
</body>
 
</html>

Output:

Output2

Suggest improvement

Chart.js General Accessibility

Chart.js General Data structures

Share your thoughts in the comments

Chart.js General

Chart.js Configuration

Chart.js Chart Types

Chart.js Axes

Chart.js Developers

Chart.js General Colors

Syntax:

General Colors Configuration Options

Color Format:

CDN link:

HTML

Output:

HTML

Output:

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?