In this article, we're going to explore different ways to customize the background color in our charts. Typically, you might use an array with hardcoded values for this purpose.
This topic actually arose from one of my previous posts about "How to Create a Stacked Bar Chart Using Chart.js Example?" which is quite an interesting subject. So, a big thank you to our reader for posing this question.
To get started, we'll need to create an HTML page and then add the Chart.js CDN reference.
How to use set the color for each bar in a bar chart using chartjs?
In the Below example, we want the bars in this graph to have different colors that I choose myself i.e hard code fixed color. Because we don’t want to use random colors for each of the bars.
So now we have a bar chart. And basically quite simple, the easiest way to do coloring on the bar chart is basically with backgroundColor option.
backgroundColor: ["#ffb3b3", "#800000", "#b3ffec", "#009973", "#d5ff80", "#558000", "#ffdf80", "#997300", "#adadeb", "#24248f", "#6666ff","#000066"]Real Time Example
<!DOCTYPE html>
<html>
<head>
<title>Set Different Color For Each Bar in a Bar Chart Using chart.js</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
</head>
<body>
<div style="margin-left:5%;margin-right:5%">
<canvas id="BarchatCanvas" style="width:80%"></canvas>
</div>
<script>
var BarchartData = {
labels: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"June",
"July",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
datasets: [
{
label: "Projected sales",
backgroundColor: ["#ffb3b3", "#800000", "#b3ffec", "#009973", "#d5ff80", "#558000", "#ffdf80", "#997300", "#adadeb", "#24248f", "#6666ff","#000066"],
borderWidth: 1,
data: [42, 56, 9, 52, 66, 87, 51, 42, 32, 88,150,125]
}
]
};
const config = {
type: 'bar',
data: BarchartData,
options: {
scales: {
y: {
beginAtZero: true
}
}
},
title: {
display: true,
text: "Bar Chart with Diffrent Color"
}
};
window.onload = function () {
new Chart("BarchatCanvas", config);
};
</script>
</body>
</html>Different color for each bar in a bar chart with Random Color
if you need a different color for each bar in a Bar Chart then you can use the below example. Here we have created a callback function for backgroundColor that returns the random color for each bar in the bar chart.
backgroundColor: color => {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
return "rgba(" + r + "," + g + "," + b + ", 0.5)";
}
<!DOCTYPE html>
<html>
<head>
<title>Set Different Color For Each Bar based on value Using chart.js</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
</head>
<body>
<div style="margin-left:5%;margin-right:5%">
<canvas id="BarchatCanvas" style="width:80%"></canvas>
</div>
<script>
var BarchartData = {
labels: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"June",
"July",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
datasets: [
{
label: "Projected sales",
backgroundColor: color => {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
return "rgba(" + r + "," + g + "," + b + ", 0.5)";
},
borderWidth: 1,
data: [42, 56, 9, 52, 66, 87, 51, 42, 32, 88,150,125]
}
]
};
const config = {
type: 'bar',
data: BarchartData,
options: {
scales: {
y: {
beginAtZero: true
}
}
},
title: {
display: true,
text: "Bar Chart with Diffrent Color"
}
};
window.onload = function () {
new Chart("BarchatCanvas", config);
};
</script>
</body>
</html>Code explanation
So what I’m going to do is a very simple trick, but it will only work for everything except for the line chart. So what I’m going to do here, I’m going to just delete the hardcoded backgroundColor array and here in the backgroundColor I’m going to create a callback function because remember in chart js you’re allowed to put in functions if they are indicated as scriptable. So border color and background color are scriptable items.
so what we’re going to do here is it’s going to put in a script, We’re going to make it a function because basically a callback function which will be based on the conditions and this will be set color.
What I want maybe first is to make sure you see this here. So let’s do a console walk for that. So you can see what we are able to see here. Save that refresh, open the developer tab and let’s see what’s going on.
You can see here the data index and value that’s based on what you want to know or the index number. So if you want to highlight only the last three values or the first three values, you could do it based on condition.
How do I change the color of bar chart based on value?
In this example, we’re going to answer one the reader’s question, which is how to change the color of the bars in a bar chart based on the value i.e How do I change the color of my bar chart based on value? So let’s start and explore how to do.
we’re going to put a color based on the condition i.e if value is greater then equal to 50 then red else it will be green.
<!DOCTYPE html>
<html>
<head>
<title>Set Different Color For Each Bar based on value Using chart.js</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
</head>
<body>
<div style="margin-left:5%;margin-right:5%">
<canvas id="BarchatCanvas" style="width:80%"></canvas>
</div>
<script>
var BarchartData = {
labels: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"June",
"July",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
datasets: [
{
label: "Projected sales",
backgroundColor: color => {
if (color.raw >= 50) {
return "green";
}
else {
return "red";
}
},
borderWidth: 1,
data: [42, 56, 9, 52, 66, 87, 51, 42, 32, 88,150,125]
}
]
};
const config = {
type: 'bar',
data: BarchartData,
options: {
scales: {
y: {
beginAtZero: true
}
}
},
title: {
display: true,
text: "Bar Chart with Diffrent Color"
}
};
window.onload = function () {
new Chart("BarchatCanvas", config);
};
</script>
</body>
</html>This code sets up a bar chart using Chart.js, with the background color of the bars dynamically determined based on the data values. Here's an explanation:
BarchartData: This variable holds the data for the chart. It includes labels for the x-axis (months) and a single dataset representing projected sales.
The dataset is defined with a label for the legend, and its background color is set using a function.
The function checks each data point's value. If it's greater than or equal to 50, the bar is colored green, otherwise, it's colored red.
config: This variable contains the configuration options for the chart. It specifies the chart type, data, options for configuring scales (here, only the y-axis), and the chart title.
options: Specifies additional configuration options, such as scales configuration.
In above example we are creating a bar chart on the webpage, where the background color of each bar changes dynamically based on the corresponding sales data. The legend will display the label "Projected sales", and the title of the chart will be "Bar Chart with Different Color".
Read Similar Articles
- [Simple Trick]-How to Combined Bar and line charts Using Chart.js?
- [Simple Trick]-Create a Multi Line Chart Using Chart.js
- [Simple Trick]- Stacked and Grouped Bar Chart Chart.js Example
- [Chart Js]- Straight Lines and Curves Lines in the Same Graph
- [Simple Trick]-Hide Points in ChartJS Line Graph
- How to Create a Stacked Bar Chart Using Chart Js Example?