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

Question

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.

Did you work with chartjs, d3 chart, echarts, ant design charts any of this before? — moshfiqrony, Mar 20 '20 at 07:49
@Md.MoshfiqurRahmanRony I have only worked with google chart with plain javascript react-google_chart and with vue also, but here the requirement is little bit difference and I have found no help from google. that's why put up the question here — , Mar 20 '20 at 08:58

lry · Accepted Answer · 2020-03-23T09:20:25.083

2

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

edited Mar 23 '20 at 09:20

answered Mar 20 '20 at 10:06

lry

728
3
7

That didn't help, Could you please help me with some working example – Mar 23 '20 at 04:19
take a look at this example [https://codesandbox.io/s/react-google-charts-columnchart-with-click-handler-3ezk5](https://codesandbox.io/s/react-google-charts-columnchart-with-click-handler-3ezk5) – lry Mar 23 '20 at 06:18
Is there any difference from your code snippets sample ? Or maybe i made a misunderstanding – lry Mar 23 '20 at 06:28
Hey I had one issue it is not taking language options as bar chart when I am doing it columnChart then it is taking but that is creating issue as it is not displaying Total no of employes as how I want – Mar 23 '20 at 12:12
hey could you help me out with one thing please, why this chart is not taking up chartevent – manish thakur Apr 07 '20 at 18:39

moshfiqrony · Answer 2 · 2020-03-20T14:33:50.727

The best package for charts in react is react-chartjs-2

To use it you will need to add it as a dependency and then import it like bellow

import { Bar } from "react-chartjs-2";

then you need a data configuration as shown below

    const data2 = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
      {
        label: "1",
        backgroundColor: "#1890ff",
        borderColor: "#1890ff",
        borderWidth: 1,
        hoverBackgroundColor: "#1890ff",
        hoverBorderColor: "#1890ff",
        data: [35000, 30000, 50000]
      },
      {
        label: "2",
        backgroundColor: "#612500",
        borderColor: "#612500",
        borderWidth: 1,
        hoverBackgroundColor: "#612500",
        hoverBorderColor: "#612500",
        data: [27000, 24000, 37000]
      },
      {
        label: "3",
        backgroundColor: "#389e0d",
        borderColor: "#389e0d",
        borderWidth: 1,
        hoverBackgroundColor: "#389e0d",
        hoverBorderColor: "#389e0d",
        data: [10000, 8000, 7000]
      },
      {
        label: "4",
        backgroundColor: "#c41d7f",
        borderColor: "#c41d7f",
        borderWidth: 1,
        hoverBackgroundColor: "#c41d7f",
        hoverBorderColor: "#c41d7f",
        data: [3000, 4000, 2000]
      }
    ]
  };

As you are seeing above the dataset containing 4 objects, that's because it will create 4 bar for each month. And the data is having 4 values, so the first value is for January, second for February and so on. Now you have all the things you need just pass it to your component like bellow

<Bar data={data2} />

full codesandbox link is here

Bard Charts by Moshfiqrony

Are you kidding me, it is no where near what I am trying to do, what if the fourth bar of each group have negligible value like in `Jan 1 : 4000`, `Jan 2: 3000`, `Jan 3:2000` and `Jan 4:10` will `Jan 4` will show on the graph you have shared, it has a very small value so it will not shown up, but look at my plain javascript example it will show up there I just want to write that code using react — , Mar 23 '20 at 04:18

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

2 Answers2