gantt chart is not showing

[Neo]

<template>
    <div>
        <GanttElastic :options="gOptions" :tasks="gTasks">
            <GanttElasticHeader slot="header" />
        </GanttElastic>
    </div>
</template>

<script>
import GanttElastic from 'gantt-elastic';
import GanttElasticHeader from 'gantt-elastic-header';

const getDate = function(hours) {
    const currentDate = new Date();
    const currentYear = currentDate.getFullYear();
    const currentMonth = currentDate.getMonth();
    const currentDay = currentDate.getDate();
    const timeStamp = new Date(
        currentYear,
        currentMonth,
        currentDay,
        0,
        0,
        0
    ).getTime();
    
    return new Date(timeStamp + hours * 60 * 60 * 1000).getTime();
}

const gOptions = {
    maxHeight: 500,
    title: {
        label: '',
        html: false
    },
    row: {
        height: 24
    },
    calendar: {
        hour: {
            display: false
        }
    },
    chart: {
        progress: {
            bar: false
        },
        expander: {
            display: true
        }
    },
    taskList: {
        expander: {
            straight: false
        },
        columns: [
            {
                id: 1,
                label: 'PROJECTS',
                value: 'type',
                width: 100
            },
            {
                id: 2,
                label: 'ID',
                value: 'id',
                width: 50
            },
            {
                id: 3,
                label: 'ISSUES',
                value: 'label',
                width: 200,
                expander: true,
                html: true,
                events: {
                    click({ data, column }) {
                    alert('description clicked!\n' + data.label);
                    }
                }
            },
            {
                id: 4,
                label: 'PEOPLE',
                value: 'user',
                width: 130,
                html: true
            },
            {
                id: 5,
                label: '%',
                value: 'progress',
                width: 50,
                style: {
                    'task-list-header-label': {
                        'text-align': 'center',
                        width: '100%'
                    },
                    'task-list-item-value-container': {
                        'text-align': 'center',
                        width: '100%'
                    }
                }
            }
        ]
    }
}

export default {
    components: {
        GanttElastic,
        GanttElasticHeader
    },
    methods: {
        getDate
    },
    data() {
        return {
            gOptions,
            gTasks: []
        }
    },
    async mounted() {
        const result = await this.$axios.get('/api');

        this.gTasks = result.data.map(data => {
            return {
                id: data.id,
                label: data.subject,
                user: data.assignee,
                parentId: data.parent_id,
                start: this.getDate(-24 * 4),
                duration: 2 * 24 * 60 * 60 * 1000,
                progress: data.progress,
                type: data.project_type.split(' ').join('-'),
                dependentOn: data.parent_id !== data.root_id ? [data.parent_id] : [],
            }
        });
    }
}
</script>

My codes are above.
Others work well, but gantt part is not showing with this broswer error.

Error: attribute width: Expected length, "NaN".
Error: attribute x1: Expected length, "NaN".
Error: attribute x2: Expected length, "NaN".
Error: attribute width: Expected length, "NaN".
Error: attribute width: Expected length, "NaNpx".

What part did I do wrong?
Thanks.

[Neo]

I add default task after refer to #86.
Broswer errors are resolved but, still not showing gantt chart T.T