Performance Optimization for GanttComponent with 200 Rows

[Belt Basya]

Hi,

I'm using Syncfusion's `GanttComponent` to render a dataset with around **200 rows**, but the initial load is taking approximately **15 seconds**. I’m already aware of the `enableVirtualization` option, but I would like to know if there are **additional optimizations** or best practices I can follow to improve the performance.

Here are some details about my implementation:

1. I have custom column templates for headers and rows (as shown in the code below).

2. My dataset is passed via `ref.current.dataSource`.

3. There are 12 columns in total, though only one is shown here for brevity.

4. Tooltip and styling customizations are being applied.

Here’s a snippet of my implementation:

```jsx

const Gantt = forwardRef((props, ref) => {

  const headerTemplate = useCallback((args) => {

    switch (args.field) {

      case "name": {

        return (

          <Box

            sx={{

              alignItems: "flex-start",

              display: "flex",

              flexDirection: "row",

              gap: "10px",

              justifyContent: "space-between",

              overflow: "hidden",

            }}

          >

            <Box

              sx={{

                flex: 1,

                textOverflow: "ellipsis",

                overflow: "hidden",

              }}

            >

              {tTest("Names")}

            </Box>

          </Box>

        );

      }

      // 11 more columns

      default:

        break;

    }

    return null;

  }, []);

  const template = useCallback((field) => (args) => {

    switch (field) {

      case "name":

        return (

          <Box

            sx={{

              alignItems: "center",

              display: "flex",

              flexDirection: "row",

              gap: "10px",

              justifyContent: "space-between",

              overflow: "hidden",

            }}

          >

            <Tooltip name={args.taskData.name}>{args.taskData.name}</Tooltip>

          </Box>

        );

      // 11 more columns

      default:

        break;

    }

    return null;

  }, []);

  const settings = useMemo(() => ({

    allowSelection: false,

    columns: [

      {

        autoFit: true,

        field: "name",

        headerTemplate,

        isPrimaryKey: true,

        template: template("name"),

        visible: true,

        width: "500px",

      },

    ],

    taskFields: {

      id: "id",

      name: "name",

      startDate: "startDate",

      duration: "duration",

      progress: "progress",

      child: "child",

    },

    width: "100%",

    gridLines: "Both",

    tooltipSettings: {

      showTooltip: true,

    },

  }), []);

  return (

    <Box sx={{ display: "flex", flexDirection: "row", flexGrow: 1, overflow: "hidden" }}>

      <GanttComponent {...settings}>

        <Inject services={[DayMarkers]} />

      </GanttComponent>

    </Box>

  );

});

```

---

### My Questions:

1. **Besides `enableVirtualization`, are there other techniques to reduce the loading time?**

2. Could the custom templates (headers or rows) impact performance, and if so, is there a better way to implement them?

3. Are there any specific settings or configurations I might be missing that could improve the overall speed?

Any guidance or recommendations from the Syncfusion team or other users would be highly appreciated.

Thank you!

[Vignesh Sivalingam]

Hi Belt,

Greetings from Syncfusion.

Query 1: Techniques to reduce Gantt Chart loading time besides enableVirtualization

We tested a Gantt Chart with 250 records and a column template without enabling virtualization, and it loaded within 1 second. We could not reproduce the reported performance issue.

To assist us in replicating and resolving the problem, please provide:

• The complete Gantt chart setup code snippet.
• Details of any customizations applied to the Gantt chart.
• Information about record hierarchy levels and the complexity of dependencies.
• The Syncfusion package version you are using.
• A video demonstrating the issue and the steps to replicate it.
• A replicable sample or modifications to the attached reference sample.

Once we have these details, we can better identify the cause and suggest an effective solution.

Attached Sample for Reference: Performance sample

Query 2: Do custom templates (headers or rows) impact performance?

Yes, custom templates may slightly impact performance compared to the built-in Gantt Chart. The built-in Gantt Chart also uses default templates in certain areas, but performance delays can vary depending on the complexity and logic implemented in custom templates.

Query 3: Are there additional settings to improve Gantt Chart performance?

Besides enabling virtualization, there is another way to increase the Gantt chart performance. We have separate documentation on this topic please refer to the below UG document.

Documentation: Performance tips for EJ2 React Gantt control | Syncfusion

Regards,

Vignesh Sivalingam

[Belt Basya]

Hi Vignesh Sivalingam,

Thank you for your time and quick response.

Once we have these details, we can better identify the cause and suggest an effective solution.

I am new to React and the GanttComponent, so I tried to modify your code and integrate it into my own. I’ve uploaded the code to StackBlitz, but I’m not sure why it isn’t running there. This is the same code I’m using on my local machine, where it works perfectly.

I’m sharing the new StackBlitz link so you can see the structure of my code. Please ignore the errors, and I’d greatly appreciate it if you could suggest any improvements to enhance its efficiency. I understand that sharing broken code might seem unusual, but I hope you don’t mind helping me out. I would be grateful if you could provide steps or suggestions to refine my code.

Thank you so much for your time and guidance!

StackBlitz: https://stackblitz.com/edit/react-ohtyab-nwfgi1?file=index.js,index.html

Query 2

Understood

Query 3:

Thank you. I will go through it once.

[Udhayakumar Anand]

Belt 

We have validated the provided StackBlitz sample and identified that the issue you encountered while loading the sample was due to a version mismatch in the package.json file. The React version was set to 17, while the configuration was intended for React 18. We updated the React version to 18, which resolved the issue.

Code Snippet:

/*package.json*/

 "react": "^18.0.0",

  "react-dom": "^18.0.0",

However, the sample includes only one dataSource mapped. As mentioned earlier, we populated this record with 200 entries having unique IDs for further testing, but we were unable to replicate the reported issue. The sample consistently loads within 1 second, as measured between the load and dataBound events. Additionally, we have logged the time taken for the Gantt component in the element above for clarity.

We suspect the delay you are experiencing might be related to complexities in the dataSource. To investigate further, could you please provide us with the following information:

1. The dataSource you are currently using.
2. The method or approach you are using to measure the rendering time.

Sample Link: GanttComponent (forked) - StackBlitz

Regards,

Udhayakumar