"Options" of column chart not getting applied in react .Also I need to set width and height to 100% of div

Question

Same code is working in codesandbox but not taking "Options " when used as component in react.

Options are not getting applied to the graph. Width of bar needs to be changed and canvas needs to be blank.

    import React from 'react'
    import { Bar } from 'react-chartjs-2';
    
    
    const data = {
      labels: ["80", "20", "30", "40", "35"],
      datasets: [
        {
          label: "",
          data: [999, 266, 466, 800, 200],
          backgroundColor: "blue"
        }
      ]
    };
    /* This is part which is not working*/
    const options = {
      responsive: false,
      scales: {
        xAxes: [
          {
            gridLines: {
              display: false,
              drawBorder: false,
              borderDash: [3, 3],
              zeroLineColor: "blue"
            },
            categoryPercentage: 0.4,
            barPercentage: 0.3,
            ticks: {
              beginAtZero: true
            }
          }
        ],
        yAxes: [
          {
            display: false,
            gridLines: {
              display: false,
              zeroLineColor: "transparent"
            },
            ticks: {
              beginAtZero: true
            }
          }
        ]
      }
    };
    
    
    const VerticalBar = () => {
    
      return (
        <div className="verticalBar">
      /*When I change width and height to 100% it displays very small 
        version of graph*/
        <Bar width="200" height="200" data={data} options={options} />
       
        
        </div>
      )
    }
    
    export default VerticalBar
   

Following is chart I created in codesandbox and it works well in my same environment:

import React from "react";
import ReactDOM from "react-dom";
import { Bar } from "react-chartjs-2";

// import "./styles.css";

function App() {
  const data = {
    labels: [10, 20, 30, 40, 35],
    datasets: [
      {
        label: "",
        data: [999, 266, 466, 800, 200],
        backgroundColor: "blue"
      }
    ]
  };

  const options = {
    responsive: false,
    scales: {
      xAxes: [
        {
          gridLines: {
            display: false,
            drawBorder: false,
            borderDash: [3, 3],
            zeroLineColor: "blue"
          },
          categoryPercentage: 0.4,
          barPercentage: 0.3,
          ticks: {
            beginAtZero: true
          }
        }
      ],
      yAxes: [
        {
          display: false,
          gridLines: {
            display: false,
            zeroLineColor: "transparent"
          },
          ticks: {
            beginAtZero: true
          }
        }
      ]
    }
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Bar width="306" height="260" data={data} options={options} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

I need second image result in my actual code. Hoping to get reply soon.

Answer 1

Its because of the chart-jss version. Second picture which you would like to achieve, were used chart-js 2.8.0 and react-chartjs-2 2.7.6. But in first picture which you're currently using were used chart-js 3.5.0 and react-chartjs-2 3.0.4. So if you insist to use the chart-js same as the second picture, you can downgrade packages with these commands:

npm install chart-js@2.8.0
npm install react-chartjs-2@2.7.6