How to customise react-google-charts? - reactjs

Question

I want to customise legends and title of x-Axis and y-Axis in my bar graph. It is a react google chart. Here is my current graph having slanted legends, I want it to be as a graph in second image.
Here is the code for bar graph chart that I want to use.
slanted legend bar graph
required bar graph
'''
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Chart from 'react-google-charts';
import Loader from 'semantic-ui-react/dist/commonjs/elements/Loader';
import Dimmer from 'semantic-ui-react/dist/commonjs/modules/Dimmer';
import ErrorMessage from '../vizTab/ErrorMessage';
class BarGraph extends Component {
state = {}
componentDidUpdate = (prevProps) => {
const { loading, data } = this.props;
if (prevProps.loading !== loading && !loading) {
this.processResponse(data);
}
}
processResponse = (data) => {
try {
const keys = Object.keys(data[0] || {});
const renderArray = [keys].concat(data.map((d) => (
keys.map((key) => d[key])
)));
this.setState({ data: renderArray });
} catch (error) {
this.setState({ data: undefined });
}
}
clicked = (row) => {
const { clicked, data } = this.props;
if (clicked) clicked(data[row]);
}
render = () => {
const {
xAxis, yAxis, orientation, slantedTextAngle, loading, colors, noDataMessage, fullWidth,
groupWidth,
} = this.props;
const { data } = this.state;
let chartType = '';
if (orientation === 'horizontal') {
chartType = 'BarChart';
} else {
chartType = 'ColumnChart';
}
return (
<div
className="container-text large ui card centered"
style={{
height: '100%', width: '100%', boxShadow: 'none', WebkitBoxShadow: 'none',
}}
>
{loading ? (
<Dimmer active inverted>
<Loader>Loading</Loader>
</Dimmer>
) : (
!data || (data && data.length <= 1) ? (
<ErrorMessage noDataMessage={noDataMessage} />
) : (
<Chart
width="100%"
height="100%"
chartType={chartType}
loader={<div>Loading Chart</div>}
data={data}
options={{
hAxis: {
title: xAxis,
legend: { alignment: 'center' },
slantedText: true,
slantedTextAngle: parseInt(slantedTextAngle, 10),
minValue: 0,
},
vAxis: {
title: yAxis, minValue: 0,
},
colors: colors.split(',') || [],
bar: { groupWidth: groupWidth || data.length > 4 ? '60%' : '30%' },
animation: {
duration: 300,
easing: 'linear',
startup: true,
},
chartArea: fullWidth === 't' ? {
left: '50%', width: '80%',
} : undefined,
}}
chartEvents={[
{
eventName: 'ready',
callback: ({ chartWrapper, google }) => {
const chart = chartWrapper.getChart();
google.visualization.events.addListener(
chart,
'click',
(e) => {
const { targetID } = e;
if (targetID && targetID.match('legend')) {
return;
}
const [, row] = targetID.match(/[0-9]+/g) || [];
if (row >= 0) this.clicked(row);
},
);
},
},
]}
/>
)
)}
</div>
);
}
}
BarGraph.propTypes = {
loading: PropTypes.bool,
data: PropTypes.arrayOf(PropTypes.any),
clicked: PropTypes.func,
xAxis: PropTypes.string,
yAxis: PropTypes.string,
orientation: PropTypes.string,
slantedTextAngle: PropTypes.string,
colors: PropTypes.string,
noDataMessage: PropTypes.string,
fullWidth: PropTypes.string,
groupWidth: PropTypes.string,
};
BarGraph.defaultProps = {
loading: false,
data: [],
clicked: null,
xAxis: '',
yAxis: '',
orientation: 'vertical',
slantedTextAngle: '30',
colors: 'green,blue,purple,whisper,red,dodger blue,dark green,maroon,yellow,grey,orange,pink,magenta,teal,brown',
noDataMessage: '',
fullWidth: null,
groupWidth: null,
};
export default BarGraph;
'''