How to make react-google chart dual-y-axis

dheeraj kumar :

I am working with react-google-chart and what I want to do is to make a dual-y axis ColumnChart I have done it with plain Javascript

google.charts.load('current', {
  'packages': ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawStuff);

function drawStuff() {

  var chartDiv = document.getElementById('chart_div');

  var data = google.visualization.arrayToDataTable([
    ['Month', 'CTC', 'Gross Salary', 'Variation of CTC', 'Total No of Employes'],
    ['Jan', 35000, 27000, 10000, 3000],
    ['feb', 30000, 24000, 8000, 4000],
    ['Mar', 50000, 37000, 7000, 2000],
    ['May', 20000, 17000, 5000, 4123],
    ['June', 20000, 17000, 5000, 4000],
    ['July', 20000, 17000, 5000, 4000],
    ['August', 20000, 17000, 5000, 4000],
    ['Sep', 20000, 17000, 5000, 4000],
    ['Oct', 20000, 17000, 5000, 4000],
    ['Nov', 20000, 17000, 5000, 4000],
    ['Dec', 20000, 17000, 5000, 4000]
  ]);

  var materialOptions = {
    width: 900,
    chart: {
      title: 'Nearby galaxies',
    },
    series: {

      0: {
        axis: 'test'
      } // Bind series 1 to an axis named 'brightness'.
    },

  };



  function drawMaterialChart() {
    var materialChart = new google.charts.Bar(chartDiv);
    materialChart.draw(data, google.charts.Bar.convertOptions(materialOptions));


  }


  drawMaterialChart();
};

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 800px; height: 500px;"></div>

My problem is with react I want to do it with react but don't know how to implement the materialChart.draw

This is react code I want to convert it like the above

EDIT / UPDATE

Here I am trying to build a bar chart using React-google-chart with dual-y axis, I have already done this one using plain javascript, but facing issue to do it with react. Please check my example I have shared.

ruoyan li :

Just set the chartType property value to Bar

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <Chart
          chartType="Bar"
          width="100%"
          height="400px"
          data={data}
          options={options}
          legendToggle
        />
      </div>
    );
  }
}

The implementation of react-google-chart is based on the google.visualization.drawChart method.

Doc here:

The drawChart method API

Enumerations of supported chartType

Code Sandbox:

https://codesandbox.io/s/react-google-charts-columnchart-with-click-handler-3ezk5