react-google-chart not rendering Gantt Chart (even with hard coded values)

[mrinal-roy]

Please help me to understand why simply hard coded values of the data to be rendered is not rendering the react-google-chart

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

const ScheduleGantt = () => {
    
    const defaultData = [
        [
          { type: 'string', label: 'Task ID' },
          { type: 'string', label: 'Task Name' },
          { type: 'string', label: 'Resource' },
          { type: 'date', label: 'Start Date' },
          { type: 'date', label: 'End Date' },
          { type: 'number', label: 'Duration' },
          { type: 'number', label: 'Percent Complete' },
          { type: 'string', label: 'Dependencies' },
        ],
        [
          'Engg',
          'Engineering Design',
          'Engineering',
          new Date(2017, 8, 11),
          new Date(2017, 9, 16),
          null,
          40,
          'PV Proj',
        ],
        [
          'Sys Sizing',
          'Detailed System Sizing',
          'Engineering',
          null,
          new Date(2017, 8, 19),
          8 * 24 * 60 * 60 * 1000,
          0,
          null,
        ],
        [
          'Sld',
          'Electrical Schematic (SLD)',
          'Engineering',
          null,
          new Date(2015, 8, 24),
          4 * 24 * 60 * 60 * 1000,
          0,
          'Sys Sizing',
        ],
        [
          'Layout',
          'Plant Layout',
          'Engineering',
          null,
          new Date(2017, 9, 2),
          8 * 24 * 60 * 60 * 1000,
          100,
          'Sld',
        ],
        [
          'MMS',
          'MMS Design',
          'Engineering',
          null,
          new Date(2017, 9, 8),
          6 * 24 * 60 * 60 * 1000,
          20,
          'Layout',
        ],
        [
          'BOQ',
          'BOQ Preparation',
          'Engineering',
          null,
          new Date(2017, 9, 20),
          4 * 24 * 60 * 60 * 1000,
          80,
          'Engg',
        ],
      ]

  return (
    <Chart
      width={"90%"}
      height={"275"}
      chartType="Gantt"
      loader={<div>Loading Schedule Gantt Chart ... </div>}
      data={defaultData}
      options={{
        gantt: {
          criticalPathEnabled: true,
          criticalPathStyle: {
            stroke: "#e64a19",
            strokeWidth: 3,
          },
        },
      }}
      rootProps={{ "data-testid": "5" }}
    />
  );
};

export default ScheduleGantt;

The error thrown is shown as "error" with red background and nothing on the screen, no message or troubleshoot point. The demo code is the same with just changed data to be rendered for Gantt Chart with Critical Path.

[eirikhm]

@mrinal-roy Did you ever solve this?