Click here to Skip to main content
15,881,559 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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:

JavaScript

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">
Posted
Updated 3-Dec-21 0:02am
v2

1 solution

 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900