CODEWITHSUNDEEP
javascriptreactjsreact-google-charts
manish thakur
manish thakur

Reputation: 820

React-google-chart not taking up the options

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.

Upvotes: 2

Views: 3660

Answers (2)

ckedar
ckedar

Reputation: 1909

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

Upvotes: 3

Mosh Feu
Mosh Feu

Reputation: 29347

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.

Upvotes: 1

Related Questions