Not rendering, just a empty div

[TiagoGouvea]

I'm trying to use it, but, inspecting, I'm getting a div without contents:

No browserify errors or console errros.

What can it be?

[ericfowler303]

I've had this happen as well. It seemed to be around the time I updated everything from React 0.13 to 0.14, to me it seems like the GoogleChartLoader might have errored silently. I might not be completely following all of it properly but the Chart.js is hitting the render method which gives the empty div but then it gets to https://github.com/RakanNimer/react-google-charts/blob/master/src/components/Chart.js#L24 but that line might not be working? I didn't see any network traffic showing that the javascript for the google chart was getting downloaded which is probably why the chart doesn't load.

In my case at least, the issue seems to be as a part of the build process for my bundle since something isn't getting included. Even after including "scriptjs" it didn't seem to help. Have you fixed yours yet @TiagoGouvea ?

my package.json:

{
  "name": "dashboard",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "browserify": "^12.0.1",
    "combined-stream": "^1.0.5",
    "eslint-plugin-react": "^3.8.0",
    "gulp": "^3.9.0",
    "gulp-babel": "^6.1.0",
    "gulp-eol": "^0.1.1",
    "gulp-plumber": "^1.0.1",
    "gulp-react": "^3.1.0",
    "gulp-watch": "^4.3.5",
    "memory-streams": "^0.1.0",
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "react-dropdown-button": "^1.0.11",
    "react-google-charts": "^0.2.0",
    "react-select": "^0.9.1",
    "react-slick": "^0.10.0",
    "react-widgets": "^3.1.7",
    "scriptjs": "^2.5.8",
    "vinyl-source-stream": "^1.1.0",
    "xhr": "^2.2.0"
  }
}

[TiagoGouvea]

I haven't @ericfowler303

[jcassee]

I have found the same thing. The problem is that errors cause some promise to be rejected, but then nothing is done with the rejection value. By adding a breakpoint in q.js (in the Promise.prototype.then function) I was able to at least fix the problem. Once the configuration was correct my graph did show.

Unfortunately, I did not find which promise was rejected...

[jeffersonpark]

I ran into the same problem -- specifically with the bar chart example. It seems like one of the more recent commits has not been published despite the version bump. When I run

npm install react-google-charts@latest

At line 91 of Chart.js I get:

if ((this.props.data !== null && this.props.data.length === 0) || this.props.columns.length === 0) {
    return;
}

This doesn't match up with the latest version of Chart.js visible here within the project.

This bug (or at least one cause of it) seems to be fixed with @kmayer 's commit, but pulling the latest version of the package does not have his changes.

[nanndoj]

Exactely as @jeffersonpark mentioned. The distribution in NPM directory is not up-to-date with the master branche. I solved this issue by installing direct from the git repository instead

npm install RakanNimer/react-google-charts

[dtedesco]

Very good nanndoj! Thanks!

[rakannimer]

Hey !

Thanks for reporting this, I updated the npm package to match the the code in ther repo. Let me know if the issue resurfaces. Cheers !

[olalonde]

Same issue here with

        <Chart
          chartType="LineChart"
          width="600px"
          height="400px"
          options={{
            title: 'chart',
          }}
          data={[
            ['column_one_label', 'column_two_label'],
            [1, 2],
            [2, 3],
          ]}
        />

Can't use latest version unfortunately because of https://github.com/RakanNimer/react-google-charts/issues/26

[SujalShah3234]

In my situation, I encountered a similar issue in my app. I attempted to replicate the problem in CodeSandbox but was unsuccessful. After spending an hour debugging, I decided to delete the node_modules folder and the package-lock.json file, then performed a clean install. This resolved the issue.