CODEWITHSUNDEEP
reactjstypescriptreact-google-charts
HannaSwDn
HannaSwDn

Reputation: 31

React Google Charts not showing the data

I am using react-google-charts in my website, but the chart is only showing a black image (but if you hover on the chart, it will show the information of each bar, like shown in the photo):

Screenshot

There are no errors in the console. I have tried changing the background color but didn't work.

Here is my full component:

import { Chart } from "react-google-charts";

export const data = [
  [
    { type: "string", id: "Room" },
    { type: "string", id: "Name" },
    { type: "date", id: "Start" },
    { type: "date", id: "End" }
  ],
  [
    "Magnolia Room",
    "Beginning JavaScript",
    new Date(0, 0, 0, 12, 0, 0),
    new Date(0, 0, 0, 13, 30, 0)
  ],
  [
    "Magnolia Room",
    "Intermediate JavaScript",
    new Date(0, 0, 0, 14, 0, 0),
    new Date(0, 0, 0, 15, 30, 0)
  ],
  [
    "Magnolia Room",
    "Advanced JavaScript",
    new Date(0, 0, 0, 16, 0, 0),
    new Date(0, 0, 0, 17, 30, 0)
  ],
  [
    "Willow Room",
    "Beginning Google Charts",
    new Date(0, 0, 0, 12, 30, 0),
    new Date(0, 0, 0, 14, 0, 0)
  ],
  [
    "Willow Room",
    "Intermediate Google Charts",
    new Date(0, 0, 0, 14, 30, 0),
    new Date(0, 0, 0, 16, 0, 0)
  ],
  [
    "Willow Room",
    "Advanced Google Charts",
    new Date(0, 0, 0, 16, 30, 0),
    new Date(0, 0, 0, 18, 0, 0)
  ]
];

export function Timeline() {
  return (
    <Chart
      chartType="Timeline"
      data={data}
      width="100%"
      height="400px"
      options={{
        timeline: {
          colorByRowLabel: true
        }
      }}
    />
  );
}

Is it something obvious that I am missing?

Upvotes: 2

Views: 1060

Answers (1)

1997daly
1997daly

Reputation: 31

Your code is properly functional, ensuring we are passing the correct structure to the chart we can split rows a column constants

import { Chart } from "react-google-charts";

const columns = [
  { type: "string", id: "Room" },
  { type: "string", id: "Name" },
  { type: "date", id: "Start" },
  { type: "date", id: "End" },
];
const rows = [
  [
    "Magnolia Room",
    "Beginning JavaScript",
    new Date(0, 0, 0, 12, 0, 0),
    new Date(0, 0, 0, 13, 30, 0),
  ],
  [
    "Magnolia Room",
    "Intermediate JavaScript",
    new Date(0, 0, 0, 14, 0, 0),
    new Date(0, 0, 0, 15, 30, 0),
  ],
  [
    "Magnolia Room",
    "Advanced JavaScript",
    new Date(0, 0, 0, 16, 0, 0),
    new Date(0, 0, 0, 17, 30, 0),
  ],
  [
    "Willow Room",
    "Beginning Google Charts",
    new Date(0, 0, 0, 12, 30, 0),
    new Date(0, 0, 0, 14, 0, 0),
  ],
  [
    "Willow Room",
    "Intermediate Google Charts",
    new Date(0, 0, 0, 14, 30, 0),
    new Date(0, 0, 0, 16, 0, 0),
  ],
  [
    "Willow Room",
    "Advanced Google Charts",
    new Date(0, 0, 0, 16, 30, 0),
    new Date(0, 0, 0, 18, 0, 0),
  ],
];
export const data = [columns, ...rows];


export default function Timeline() {
  return (
    <Chart
      chartType="Timeline"
      data={data}
      width="100%"
      height="400px"
      options={{
        timeline: {
          colorByRowLabel: true,
        },
      }}
    />
  );
}

To ensure your passing the correct structure to your chart

Upvotes: 0

Related Questions