React-google-charts, ColumnChart returns Unhandled rejection Error: Failed to set DataTable from data attribute

Question

I'm trying to make ColumnChartfrom react-google-charts https://rakannimer.imtqy.com/react-google-charts/#/examples/ColumnChart?_k=xit9kl

When rendering, the console logs an error:

Unhandled rejection Error: Failed to set DataTable from data props !

and

Uncaught TypeError: this.dataTable.getNumberOfRows is not a function

I believe that you have correctly formatted props ...

    <Chart
      chartType='ColumnChart'
      data={this.formatData()}
      graph_id=''
      width='100%'
      height='500px'
      legend_toggle
    />

formatData() returns the following data structure ...

Array[2]
  0:Array[3]
    0:"Crime Category"
    1:Array[63]
    2:Object
  1:Array[33]
    0:Array[65]
      0:"Vikings"
      1:0
      2:0
      3:0
      4:0
      5:7
      ...

This seems to be perfectly consistent with the prescribed data structure in the documentation, which looks like this:

  "data":[
    [
      "Genre",
      "Fantasy & Sci Fi",
      "Romance",
      "Mystery/Crime",
      "General",
      "Western",
      "Literature",
      {"role":"annotation"}
    ],
    ["2010",10,24,20,32,18,5,""],
    ["2020",16,22,23,30,16,9,""],
    ["2030",28,19,29,30,12,13,""]
  ]

Answer 1

. , , . ...

const columns = teamList.map(team => {
  const newArray = Object.keys(team['teamCrimeCategorySum'])
    .sort()
    .map(key => {
      return team['teamCrimeCategorySum'][key]
    })
  return [`${team.name}`, ...newArray, '']
}) 

return [
  [
    'Crime Category',
    ...categories.map(category => `${category.name}`),
    {'role':'annotation'}
  ],
  ...columns
]

Answer 2

, , , - :

:

data = [["Room 524", 50], ["Room 123", 23], ["Room 523", 17], ["Room 964", 12], ["Room 012", 56], ["Room 125", 35]]

.

data = [["Title A", "Title B"], ["Room 524", 50], ["Room 123", 23], ["Room 523", 17], ["Room 964", 12], ["Room 012", 56], ["Room 125", 35]];