I have managed to implement the chart using the code attached below -
Click of see already implemented chart
I want to alter the code, so that I can have this light orange bar in the background of every bar in the chart-
Want to achieve this chart
What I have tried:
let options = {
devicePixelRatio: 4.5,
scales: {
xAxes: [
{
gridLines: {
display: false,
},
barPercentage: 0.5,
},
],
yAxes: [
{
gridLines: {
display: false,
},
ticks: {
beginAtZero: true,
},
},
],
},
responsive: true,
legend: {
display: false,
},
type: "bar",
};
let data = {
labels: ["January", "February", "March", "April"],
datasets: [
{
label: "My First dataset",
backgroundColor: "rgba(245, 123, 32, 1)",
borderColor: "rgba(255, 88, 0, 1)",
borderWidth: 1,
hoverBackgroundColor: "rgba(255, 88, 0, 1)",
hoverBorderColor: "rgba(245, 123, 32, 1)",
data: [65, 59, 80, 81],
},
{
label: "My second dataset",
backgroundColor: "rgba(45, 58, 71, 1)",
borderColor: "rgba(1, 86, 170, 1)",
borderWidth: 1,
hoverBackgroundColor: "rgba(1, 86, 170, 1)",
hoverBorderColor: "rgba(45, 58, 71, 1)",
data: [45, 79, 70, 41],
},
],
};
Code for calling chartjs -
import { Bar } from "react-chartjs-2";
<bar data="{data}" options="{options}" width="495" height="300">