Gantt Chart Not Updating When Fetching From REST API

[ruban258]

Description: The Gantt chart does not update when fetching tasks from the REST API. The data is retrieved successfully, but the chart remains unchanged.

Steps to Reproduce:

Fetch data from the REST API.
Observe that the Gantt chart does not reflect the fetched data.
Expected Behavior: The Gantt chart should update and display the fetched tasks.

Actual Behavior: The Gantt chart remains unchanged after fetching data from the REST API.

Relevant Code:

<script>

let tasks = $state([]);

import { Gantt } from 'wx-svelte-gantt';
import { onMount } from 'svelte';

function convertIsoDatesToObjects(array) {
    return array.map(item => {
        const newItem = { ...item };
        ['start', 'end'].forEach(key => {
            if (newItem[key] && typeof newItem[key] === 'string' && !isNaN(Date.parse(newItem[key]))) {
                newItem[key] = new Date(newItem[key]);
            }
        });
        return newItem;
    });

async function fetchTask() {
    try {
        const response = await fetch('http://localhost:5175/api/ScheduledTask/');
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const data = await response.json();
        tasks = convertIsoDatesToObjects(data);      
    } catch (error) {
        console.error('There was a problem with the fetch operation:', error);
    }
}

onMount(async () => {
    await fetchTask();
});

</script>

Any help is appreciated.

[ruban258]

I found out that bars shows up if I scroll on the chart or resize the window.

[Zwillinge]

Hello,

The same code seems to work well for me. Which version of Gantt are you using?

You can also check the live demo with backend data:
https://docs.svar.dev/svelte/gantt/samples/#/backend/willow

And its code
https://github.com/svar-widgets/gantt/blob/main/svelte/demos/cases/GanttBackend.svelte