Task bar wider or smaller than Project bar


I looked at the the basic initialization diagram

I made a Json Gantt as follows (note: all the bars are not resizable):

var tasks = {
{id:“111_11”, text:“MY_PROJECT”, start_date:“18-03-2018”, end_date: “10-04-2018”, progress: 0.6, open: true},
{id:“999_12”, text:“START ANALYSIS”, start_date:“22-03-2018”, end_date: “31-03-2018”, parent:“111_11”, progress: 1, open: true},
{id:“999_13”, text:“DESIGN”, start_date:“02-04-2018”, end_date: “07-04-2018”, parent:“111_11”, progress: 1, open: true},
{id:“999_14”, text:“TEST”, start_date:“05-04-2018”, end_date: “08-04-2018”, parent:“111_11”, progress: 1, open: true}

Despite my Json Gantt looks like the Json of the link above, the START ANALYSYS bar cannot start after MY_PROJECT start date, as well as TEST cannot end before MY_PROJECT end date, but they start and/or end at the same date.

Seems as if the bars are tied, like the following example

how can I solve the problem?

Thank you all in advance for your replies

You need to add type: "project" property to your MY_PROJECT task, and "parent": "id of the MY_PROJECT" property to other tasks. A project task is a task that starts, when its earliest child task starts, and ends, when its latest child ends. You can read the article about it:
https://docs.dhtmlx.com/gantt/desktop__task_types.html#projecttasks ;
Please check the following example: