reactjschartsreact-google-charts

React google charts axis and text color not changing


I am using react-google-charts library in my project to display a bar graph for some data.

The issue I am facing is that i am unable to change my x&y axis line color and the text color too for those axis respectively and also not able to change background color for the entire chart. Here is my code below

import React from "react";

import { Chart } from "react-google-charts";

const BarChart = () => {
  const data = [
    ["Year", "Sales"],
    ["2014", 1000],
    ["2015", 1170],
    ["2016", 660],
    ["2017", 1030],
  ];

  const options = {
    chart: {
        title: "Company Performance",
        subtitle: "Sales, Expenses, and Profit: 2014-2017",
    },
    colors: ["#895d85"], //this is bar color, which works fine
    hAxis: {
      title: "Total Population",
      minValue: 0,
      textStyle: { color: "blue" }, //this doesnt work
      gridlines: {
        color: "#895d85", //this doesnt work
      },
      baselineColor: "#895d85", //this doesnt work
    },
    vAxis: {
      title: "City",
      textStyle: {
        color: "green", //this doesnt work
      },
    },
  };

  return (
    <Chart
      chartType="Bar"
      width="100%"
      height="400px"
      data={data}
      options={options}
      //tried applying backgroundcolor and that doesnt work too
    />
  );
};

export default BarChart;



  [1]: https://www.npmjs.com/package/react-google-charts

Tried applying the styles after going through some sourced but failing as you can see mentioned in the inline commnets. I also created a codesandbox repo for it someone wants to look at it codesandbox repo


Solution

  • As stated here: https://stackoverflow.com/a/57560847/7545496 , changing the chartType from Bar to BarChart should do the trick.

    Unfortunately, there is no explanation but I have verified in the codesandbox that it seems to work.