performance issues

Hi,
I have 500 to 700 records, and we are using the virtualization method, but the Gantt chart is still slow. I am facing performance issues.
Thank you,



3 Replies

SJ Sridharan Jayabalan Syncfusion Team March 17, 2025 09:48 AM UTC

Hi Jaya,

 

Greetings from Syncfusion.

 

For your query, we have prepared a virtualization sample with 800 records, including multi-level data and predecessor connections, while also utilizing templates. We did not experience any lag during the initial load or while scrolling. The initial load time was less than 2 seconds (refer sample).

 

For optimal performance, we recommend following the best practices outlined in our documentation:

 

Documentation - Performance tips for EJ2 React Gantt control | Syncfusion

 

If you are still experiencing lag after implementing the recommended steps, please share the following details to validate on our end.

 

  1. Your time delay measurements.

  2. Your data source and the properties used in your application.

  3. If you have implemented templates, please share the relevant code snippets.

  4. Details of number of  columns that you have used.

 

Sample - 5klpiszz (forked) - StackBlitz

 

 

Regards,

Sridharan




AD Aun Digital March 19, 2025 10:41 AM UTC

Even though you are using virtualization, ensure that:

  • You are using an optimized virtualization library like react-window or react-virtualized instead of manually handling large datasets.
  • Reduce re-renders by memoizing row data using React.memo() or useMemo().
  • If the Gantt chart has large DOM elements, limit the number of visible rows at a time.
  • import { FixedSizeList as List } from 'react-window';


    const Row = ({ index, style }) => (

      <div style={style}>

        {data[index].name} {/* Replace with your Gantt chart row content */}

      </div>

    If you are still facing the same issue it would be best to connect with a professional web development agency. 

    );


    <List

      height={600}

      itemCount={data.length}

      itemSize={50} // Adjust according to row height

      width="100%"

    >

      {Row}

    </List>




SJ Sridharan Jayabalan Syncfusion Team March 20, 2025 11:34 AM UTC

Hi Aun Digital,


Thanks for the Suggestion.

 

We follow best practices for handling large datasets efficiently using virtualization in the Syncfusion Gantt Chart. If you have any specific queries related to Syncfusion's Gantt Chart, please feel free to share them with us. We’ll be happy to provide the necessary details and assist you further.


Regard,

Sridharan


Loader.
Up arrow icon