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 configurationdata: [/* data values */],backgroundColor: '...', // Background colorborderColor: '..., // Border colorborderWidth: ..., // 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)orrgba(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%)orhsla(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=
</script>
<script src=
</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:
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=
</script>
<script src=
</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>
|