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
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.