Using material UI charts and passing material UI options

[arunkumar413]

Hi Team,

I trying to use react-google-charst in a material UI app and would like to keep the charts consistent with the material UI elements in look and feel.

I've gone through the link (https://react-google-charts.com/bar-chart#material-design)which mentions the material UI options can be used. However, I couldn't find any doc on the exhaustive list of material UI options that can be passed.

Also is the chartType="BarChart" andchartType ='Bar'is the only thing that differentiates a regular react-google-chart and chart with material design?

Thanks, Arun

[polkhovsky]

Yeah. I just came across this problem. Switching to "Bar" makes the Chart component ignore most of the options.

[rakannimer]

Yeah. I just came across this problem. Switching to "Bar" makes the Chart component ignore most of the options.

Yeah, google charts material have a different set of options, I couldn't find a complete set of supported ones in google documentation.

Happy to link to it if you can find it.

[adrienrenaud]

If you look at https://developers.google.com/chart/interactive/docs/gallery/barchart#creating-material-bar-charts, they use a intriguing line to convert options for material bar chart: chart.draw(data, google.charts.Bar.convertOptions(options));

[tomasaschan]

Just came across this myself, too; it seems the best way to support these options would be to automatically wrap the options in that call when using a material-ui chart type (e.g. Bar instead of BarChart). I tried looking around in the source code for where that should be implemented but didn't grok enough of the project structure to be able to contribute anything.

In the meantime, is the google object exposed somewhere from this library? If so, I could use that to convert options myself - but I don't know how to get a reference to it... 😕

[pefuer]

This seems to related to this issue #157 The suggested solution is to wrap the Charts object with a helper class which eventually calls the update function once it has been initialized.