[Bug]: cannot provide rows/columns separately to GeoChart

[khitrenovich]

Would you like to work on a fix?

• Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

Consider the following data:

const columns = ["Country", "Popularity"];
const rows = [
  ["Germany", 200],
  ["United States", 300]
];

The following chart configuration results in "Incompatible data table: Error: Unknown address type." error:

    <Chart
      chartType="GeoChart"
      width="100%"
      height="400px"
      columns={columns}
      rows={rows}
    />

Providing data={[columns, ...rows]} instead of the separate rows and columns properties works as expected.

Note that this worked fine in pre-v4, so it was likely broken recently.

Reproduction

https://codesandbox.io/s/funny-tharp-6ymtob

react-google-charts version

v4

Possible solution

I suspect that the propagation of rows and columns down to GoogleChartDataTable is broken somewhere, so instead of the appropriate treatment the flow goes to the default option (which apparently creates invalid results for GeoChart). Yet, I wasn't able to trace through the code where it happens.

[siljeschwermer]

I have the same issue after updating to v4.0.0 for other chart types with the error message "Table has no columns" (for example for the scatter plot in the "Initialize using rows and columns" example in the walkthrough). As you say, providing data={[columns, ...rows]} works, but initializing columns and rows separately causes an error.

[athermantis]

Ran into the same issue, appreciate the workaround though

[radek-kehar]

The problem is in the condition of the GoogleChartDataTable:

if (data !== null) {
  if (Array.isArray(data)) {
    dataTable = google.visualization.arrayToDataTable(data);
  } else {
     dataTable = new google.visualization.DataTable(data);
  }
} else if (rows && columns) {
  dataTable = google.visualization.arrayToDataTable([columns, ...rows]);
}

If I set only columns and rows to the Chart component, then the variable data is undefined. Rendering the graph goes through the first condition (i.e. data ! = null), rows and columns are not set.

Another workaround is to set the data to null:

<Chart
  chartType="Timeline"
  ...
  data={null}
  columns={columns}
  rows={rows}
/>