To add more tasks to the chart, you need to use the gantt.load or gantt.parse method:

https://docs.dhtmlx.com/gantt/api__gantt_parse.html

https://docs.dhtmlx.com/gantt/api__gantt_load.html

Here is the updated snippet:

http://snippet.dhtmlx.com/5/92e129d52

However, when Gantt loads the data, it repaints all tasks in the chart. There is no way to change how it works.

If you need something different, please, clarify your question with more details or send a picture to show how you imagine it should work.

I have used DHTMLX gantt chart plugin which comes as a package with css and javascript.
I have a DHTMLX ganttchart, I need to add more parentbar(ex-‘Project #2’ same like ‘Project #1’) here, and refresh only ‘Project #2’ on click of a submit button which is now used to refresh specific task.
Here is the code below

HTML

<link rel="stylesheet" type="text/css" href="http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css">
<script src="http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>
<style>
  .gantt_custom_button{
    background-color: rgb(206, 206, 206);
    position: absolute;
    right: -10px;
    top: 5px;
    width: 20px;
    height: 26px;
    border-radius: 0;
  }
</style>
<div id="gantt_here" style="width:100%; height:500px;"></div>
<div><button onclick ="refreshPlan()" >Submit</button></div>

SCRIPT

var task1 = {
    "data":[
        {"id":1, "text":"Project #1", "start_date":"01-04-2019", "duration":2, "order":10,
            "progress":0.4, "open": true},
        {"id":2, "text":"Task #1",    "start_date":"02-04-2019", "duration":1,  "order":10,
            "progress":0.6, "parent":1},
        {"id":3, "text":"Task #2",    "start_date":"03-04-2019", "duration":2,  "order":20,
            "progress":0.6, "parent":1},
        {"id":4, "text":"Task #3",    "start_date":"02-04-2019", "duration":1,  "order":10,
            "progress":0.6, "parent":1},
        
            
            
    ],
    "links":[
        { "id":1, "source":1, "target":2, "type":"1"},
        { "id":2, "source":2, "target":3, "type":"0"},
        { "id":3, "source":3, "target":4, "type":"0"},
        { "id":4, "source":2, "target":5, "type":"2"}
    ]
}

gantt.templates.task_text=function(start, end, task){
  if(gantt.hasChild(task.id)){
    console.log(gantt.getTask(gantt.getChildren(task.id)[0])) 
    return gantt.getTask(gantt.getChildren(task.id)[0]).text;
  } else {
    return task.text
  }
};

gantt.init("gantt_here");
gantt.parse(task1);
            
            
var child = gantt.getTask(2);
child.text = "Updated";



gantt.templates.task_text=function(start, end, task){
  if(gantt.hasChild(task.id)){
    console.log(gantt.getTask(gantt.getChildren(task.id)[0])) 
    return gantt.getTask(gantt.getChildren(task.id)[0]).text;
  } else {
    return task.text
  }
};

function refreshPlan(){

// refreshTask() will update only task(2)
setTimeout(()=>{
alert('dd');
gantt.refreshTask(2)
gantt.message("The data of the task is updated by gantt.refreshTask(2)")
}, 2000)
}