2

I am using react-google-chart for displaying my data in graphical form (Bar Chart), As per requirement I have to make a dual-y-axis chart

I have already made that chart but the issue is that chart is not taking up the options. It is an Bar chart when I am putting chart as ColumnChart then it is taking options but not rendering as dual-y-axis-chart and if I am putting Bar as chart type the it is not taking options

What I am missing? Here is my code:

import React from "react";
import ReactDOM from "react-dom";
import Chart from "react-google-charts";
const data = [
  ["Month", "CTC", "Gross Salary", "Variation of CTC", "Total No of Employes"],
  ["Jan", 35000, 27000, 10000, 3],
  ["feb", 30000, 24000, 8000, 4],
  ["Mar", 50000, 37000, 7000, 5],
  ["May", 20000, 17000, 5000, 6],
  ["June", 20000, 17000, 5000, 5],
  ["July", 20000, 17000, 5000, 10],
  ["August", 20000, 17000, 5000, 7],
  ["Sep", 20000, 17000, 5000, 5],
  ["Nov", 20000, 17000, 5000, 5],
  ["Dec", 20000, 17000, 5000, 9]
];
const options = {
  width: 900,
  title: "Nearby galaxies",
  curveType: "function",
  series: {
    3: {
      axis: "test"
    }
  },
  legend: { position: "bottom" }
};
class App extends React.Component {
  render() {
    return (
      <div className="App">
        <Chart
          chartType="Bar"
          width="100%"
          height="400px"
          data={data}
          options={options}
          legendToggle
        />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Working example

Edit

It is not even taking chartEvent anyhow I want to achieve this things, if not react-google-chart then any other library I am open to any open source chart library.

Community
  • 1
  • 1
manish thakur
  • 760
  • 9
  • 35
  • 76
  • Note that we prefer a technical style of writing here. We gently discourage greetings, hope-you-can-helps, thanks, advance thanks, notes of appreciation, regards, kind regards, signatures, please-can-you-helps, chatty material and abbreviated txtspk, pleading, how long you've been stuck, voting advice, meta commentary, etc. Just explain your problem, and show what you've tried, what you expected, and what actually happened. – halfer Apr 07 '20 at 19:17
  • @halfer I have written my whole code what I have tried, One thing is not working which I clearly mentioned – manish thakur Apr 07 '20 at 19:20
  • I am not sure how many times I need to remove your begging and pleading and tales of woe and suffering, but I would urge you to have mercy on volunteer editors here if you can. Technical writing is encouraged on this platform: it is much easier to read, and features no distracting emotional coercion. Begging is also counterproductive for you, too; [read this answer](https://meta.stackoverflow.com/a/391945/472495) to understand why. – halfer Apr 07 '20 at 19:21
  • 1
    @halfer okay fine I will not do that again . Just stuck with this chart library that's why. – manish thakur Apr 07 '20 at 19:26

2 Answers2

3

options for ColumnChart are different.

See classicOptions in the example https://developers.google.com/chart/interactive/docs/gallery/columnchart#dual-y-charts

So it works when you replace the options as 

const options = {
  width: 900,
  title: "Nearby galaxies",
  curveType: "function",
  seriesType: "bars",
  series: {
    3: { targetAxisIndex: 1 }
  },
  vAxes: {
    0: { title: "primary" },
    1: { title: "secondary" }
  },
  legend: { position: "bottom" }
};

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

ckedar
  • 1,859
  • 4
  • 7
  • hey just one issue it is not taking `language: 'hi_IN',` in options – manish thakur Apr 08 '20 at 14:18
  • What is the purpose of setting `language`? My understanding is that it is mainly useful for date locale specific formatting, but there are no date fields in your data. `Month` col is treated as 'string'. – ckedar Apr 08 '20 at 18:49
  • To set language use `chartLanguage` property on `Chart` component. – ckedar Apr 08 '20 at 18:51
  • I am using `chartLanguage:{language:'en-IN'},` in my option not working.. also I am trying `chartLanguage:'en-IN'`, insided option not working and at last inside chart component I am doing `chartLanguage={'en-IN'}` it is also not working – manish thakur Apr 09 '20 at 06:54
  • What do you mean by 'not working'? What is the expected output? – ckedar Apr 09 '20 at 08:43
  • It is not taking up the language option, please check your code sandboc – manish thakur Apr 09 '20 at 11:14
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/211289/discussion-between-ckedar-and-manish-thakur). – ckedar Apr 09 '20 at 13:58
1

The importing thing here is their comment specifically about Bar chart:

Note here we use Bar instead of BarChart to load the material design version

https://react-google-charts.com/bar-chart#right-y-axis

Therefor, the options are a bit different. Instead of passing title to the root object, it should be under chart.

options={{
  // Material chart options
  chart: {
    title: 'Population of Largest U.S. Cities',
    subtitle: 'Based on most recent and previous census data',
  },
}

However, seems like it not respects all of the options (legend for example).

About width, you set width prop to 100% and in options to 900px. To set the width, usewidth` prop.

Example: 

const data = [
  ["Month", "CTC", "Gross Salary", "Variation of CTC", "Total No of Employes"],
  ["Jan", 35000, 27000, 10000, 3],
  ["feb", 30000, 24000, 8000, 4],
  ["Mar", 50000, 37000, 7000, 5],
  ["May", 20000, 17000, 5000, 6],
  ["June", 20000, 17000, 5000, 5],
  ["July", 20000, 17000, 5000, 10],
  ["August", 20000, 17000, 5000, 7],
  ["Sep", 20000, 17000, 5000, 5],
  ["Nov", 20000, 17000, 5000, 5],
  ["Dec", 20000, 17000, 5000, 9]
];
const options = {
  chart: {
    title: "Nearby galaxies",
    legend: { position: "bottom" }
  },
  curveType: "function",
  series: {
    3: {
      axis: "test"
    }
  }
};
class App extends React.Component {
  render() {
    return (
      <div className="App">
        <Chart
          chartType="Bar"
          width={900}
          height="400px"
          data={data}
          options={options}
          legendToggle
        />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

https://codesandbox.io/s/react-google-charts-columnchart-with-click-handler-4dywj

You can use ColumnChart instead. Using this chart you'll be able to customize the legend position and more

const options = {
  title: "Nearby galaxies",
  legend: { position: "bottom" },
  curveType: "function",
};

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

I'm not sure about the series prop. I didn't see it in the docs.

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135