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>w3wiki 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;">w3wiki</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:

Example 2: In the below example, we have used the Polar Area chart representing the data related to w3wiki. 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>w3wiki 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;">w3wiki</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:

Chart.js General Colors

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
  }],
},

Tags:

#Chart.js #Geeks Premier League 2023 #Geeks Premier League #JavaScript #Web Technologies

General Colors Configuration Options

Color Format

CDN link:

HTML

Output:

HTML

Output:

Chart.js General Colors

Syntax:

Similar Reads

Contact Us