How to Set Different Colors for Each Bar for a Bar Chart in Chart.js ?
Last Updated :
03 Jan, 2024
In the Bar Chart, for unique identification, we can assign unique colors to each Bar. In this article, we will see how to set different colors for each bar for a bar chart in chart.js. We can assign unique colors to the Bar using various approaches.
CDN Link
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
Approach 1: Using randomly generated colors Array
In this approach, we are using the Array of Colors where we generate random colors and assign them to the backgroundColor property of the dataset. For each of the bars, a random unique color is applied.
Syntax:
const colors = [
'rgba(255, 99, 132, 0.7)',
'rgba(54, 162, 235, 0.7)',
'rgba(255, 206, 86, 0.7)',
'rgba(75, 192, 192, 0.7)'
];
Example: Below code example is the practical implementation of the above-discussed approach.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Example 1</title>
<script src=
</script>
</head>
<body>
<h2 style="color:green">
GeeksforGeeks
</h2>
<h5>
Approach 1: Using Arrays
</h5>
<canvas id="chart1"
width="400"
height="200">
</canvas>
<script>
const labels =
['JavaScript', 'Python', 'Java', 'C++'];
const data = [80, 90, 75, 85];
const colors =
Array.from(
{ length: labels.length },
() =>
'#' + Math.floor(Math.random() * 16777215).toString(16)
);
const ctx = document.
getElementById('chart1').
getContext('2d');
const chart1 = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label:
'GeeksforGeeks Programming Languages',
data: data,
backgroundColor: colors,
}]
},
});
</script>
</body>
</html>
|
Output:
Approach 2: Using Function
In this approach, we will define a JS function through which the unique colors will be assigned to the different bars based on the passed index. Here the static colors array will be assigned to the backgroundColor property.
Syntax:
function getColor(ind) {
const colors = ['#FF5733', '#33FF57', '#5733FF', '#FF33E6'];
return colors[ind% colors.length];
}
Example: The below code example implements the function approach to set different colors for each bar.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Example 2</title>
<script src=
</script>
</head>
<body>
<h2 style="color:green">
GeeksforGeeks
</h2>
<h5>
Approach 2: Using Function
</h5>
<canvas id="chart2"
width="400"
height="200">
</canvas>
<script>
const labels =
['JavaScript', 'Python', 'Java', 'C++'];
const data = [80, 90, 75, 85];
function colorFn(ind) {
const colors =
['#FF5733', '#33FF57', '#5733FF', '#FF33E6'];
return colors[ind % colors.length];
}
const ctx = document.
getElementById('chart2').
getContext('2d');
const chart2 = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label:
'GeeksforGeeks Programming Languages',
data: data,
backgroundColor:
labels.map((label, ind) => colorFn(ind)),
}]
},
});
</script>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...