2

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?

Adriaan
  • 17,741
  • 7
  • 42
  • 75
HannaSwDn
  • 31
  • 1
  • 2
  • 1
    Hey I'm getting proper chart with your code. – murari_sabavath Jan 11 '23 at 15:33
  • Hmm, maybe it is something with my project then, I'm not sure what it could be though. I tried this code in another one of my projects now, and it works. I will update – HannaSwDn Jan 11 '23 at 15:34
  • Don't know if this is much help but I have a warning in the console saying "Attempting to load version '51' of Google Charts, but the previously loaded 'current' will be used instead." – HannaSwDn Jan 12 '23 at 10:51
  • maybe you should share the `dependencies` part of `package.json` here, or even better if you could show us the error in codesandbox things – Damzaky Mar 12 '23 at 06:50

1 Answers1

0

your code is properly functional,

ensuring we are passing the correct structure to the chart we can split rows an coolums 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

1997daly
  • 31
  • 4