I am working on scenario that when user update the locale, then I need to update the React google charts locale.
I have created the state of "language" and on click I am calling the function changeLanguage() to update the locale.
However it is not getting updated, and the default locale remains at it is.
How to fix this problem i.e to update the locale dynamically in react-google-charts ?
Following is the code of function and equivalent render method:
import React from "react";
import ReactDOM from "react-dom";
import Chart from "react-google-charts";
const data = [
["Element", "Density", { role: "style" }],
["Copper", 100000, "#b87333"], // RGB value
["Silver", 10.49, "silver"], // English color name
["Gold", 19.3, "gold"],
["Platinum", 21.45, "color: #e5e4e2"] // CSS-style declaration
];
const options = {
vAxis: {
format: 'short'
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
language: 'en'
};
}
changeLanguage = () => {
this.setState({
language: this.state.language === 'en' ? 'zh-cn' : 'en'
})
}
render() {
return (
<div className="App">
<button onClick={this.changeLanguage}>Update: {this.state.language}</button>
<Chart
chartLanguage={this.state.language}
chartType="ColumnChart"
width="100%"
height="400px"
data={data}
options={options}
/>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);