How to change graph grid and axis colors in react-chartjs-2

Question

I'm new to react and also just found react-chartjs-2 graphing npm package. So I implemented this to my react project. Now I need to change the grid lines and axis colours to white. So I tried this line of two code also in two times.But it didn't work.

defaults.global.defaultColor='rgba(255,255,255,1)'

defaults.global.defaultColor='rgba(255,255,255,1)'

How can I do that?

Thanks in advance.

Answer 1

You can change the axis grid color using gridLines option. Find more styling options here.

import React from "react";
import "./style.css";
import { Bar } from "react-chartjs-2";

const data = {
  labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
  datasets: [
    {
      label: "# of Votes",
      data: [12, 19, 13, 15, 12, 13],
      backgroundColor: [
        "rgba(255, 99, 132, 0.2)",
        "rgba(54, 162, 235, 0.2)",
        "rgba(255, 206, 86, 0.2)",
        "rgba(75, 192, 192, 0.2)",
        "rgba(153, 102, 255, 0.2)",
        "rgba(255, 159, 64, 0.2)"
      ],
      borderColor: [
        "rgba(255, 99, 132, 1)",
        "rgba(54, 162, 235, 1)",
        "rgba(255, 206, 86, 1)",
        "rgba(75, 192, 192, 1)",
        "rgba(153, 102, 255, 1)",
        "rgba(255, 159, 64, 1)"
      ],
      borderWidth: 1
    }
  ]
};

const options = {
  scales: {
    yAxes: [
      {
        gridLines: {
          color: "red"
        }
      }
    ],
    xAxes: [
      {
        gridLines: {
          color: "blue"
        }
      }
    ]
  }
};

export default function App() {
  return (
    <div>
      <Bar data={data} options={options} />
    </div>
  );
}