Milestones not displaying in gantt chart

Milestone is not displaying in my gantt chart. It does display it as a project not a milestone. I set the type to milestone and it is not working.
My object has the following data:

	data.series.push({
				parent: grProject.getUniqueValue(),
				type: "milestone",
				text: grTask.short_description.getDisplayValue(),
				state:grTask.state + "",
				start:taskStart.getDate() + "",
				duration:"0",
				//end_date: taskEnd.getDate() + ""
				
			})

    function() {




var c = this;
var demo = {
	"data" : c.data.series
}

gantt.config.readonly = true;
gantt.templates.task_text=function(start, end, task){
	return '';
};
//var textFilter = "<input data-text-filter type='text' oninput='gantt.$doFilter(this.value)'>" // added text field to the grid header
gantt.config.scale_height = 50;
var scaleHeight = gantt.config.scale_height;
var textFilter = [
	"<div class='gantt-sub-header' style='line-height:"+ scaleHeight/2+"px'>",
	"<div>Name</div>",
	"<div>Search: <input data-text-filter type='text' oninput='gantt.$doFilter(this.value)'></div>",
	"</div>"
].join("");

gantt.config.grid_resize = true;

gantt.config.columns=[
	{name:"text",label:"Name",  width:"*" , min_width: 300, max_width:600, tree:true},
	{name:"state",      label:"State", align: "center", template:function(obj){

		if(obj.state == "3"){ //Closed Complete
			return "<span class='fa fa-check-circle'></span>"
		}
		else if(obj.state == "2"){ //Work in Progress
			return "<span class='fa fa-minus-circle'></span>"
		}
		else{ //Close Incomplete
			return "<span class='fa fa-exclamation-circle'></span>"
		}
	}
	},
	{name:"manager",label: "Manager" ,align: "center", width:'*', min_width: 150, max_width:200},
	{name:"start_date",label:"Start Date",  align: "center", width:'*', min_width: 100, max_width:150},
	{name:"end_date",label:"Due Date",  align: "center", width:'*', min_width: 100, max_width:150},
	{name:"comitted_date", label: "Test", align: "center"}

];

var type1 = gantt.config.types.task;

//gantt.config.min_column = 50;
gantt.templates.task_class  = function(start, end, task){
	if(task.parent != 0){
		task.color = "#b0e1ce";
	}
};
gantt.config.smart_scales = true;
gantt.config.min_column_width = 30;

gantt.config.layout = {
css: “gantt_container”,
rows:[
{
cols: [
{view: “grid”, id: “grid”, scrollX:“scrollHor”, scrollY:“scrollVer”},
{resizer: true, width: 1},
{view: “timeline”, id: “timeline”, scrollX:“scrollHor”, scrollY:“scrollVer”},
{view: “scrollbar”, scroll: “y”, id:“scrollVer”}
]
},
{view: “scrollbar”, scroll: “x”, id:“scrollHor”, height:20}
]
};

/*
gantt.config.layout = {
css: “gantt_container”,
cols: [
{
//width:250, //come back here later…
//min_width: 300,
rows:[
{view: “grid”, scrollX: “gridScroll”, scrollable: true, scrollY: “scrollVer”},

				// horizontal scrollbar for the grid
				{view: "scrollbar", id: "gridScroll", group:"horizontal"}
			]
		},
		{resizer: true, width: 1},
		{
			rows:[
				{view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},

				// horizontal scrollbar for the timeline
				{view: "scrollbar", id: "scrollHor", group:"horizontal"}
			]
		},
		{view: "scrollbar", id: "scrollVer"}
	]
};

*/

gantt.config.subscales = [
	{unit:"year", step:1, date:"%Y"}
];
gantt.config.date_scale = "%M";
gantt.config.xml_date="%Y-%m-%d";
gantt.config.autosize = "xy";
gantt.config.scale_unit = "month";

var filterValue = "";
var delay;
gantt.$doFilter = function(value){
	console.log("do filter running 1")
	filterValue = value;
	clearTimeout(delay);
	delay = setTimeout(function(){
		gantt.render();
		gantt.$root.querySelector("[data-text-filter]").focus();
	}, 200)
}


var formatFunc = gantt.date.str_to_date("%d/%m/%Y");
var date1 = formatFunc("29/06/2013"); // -> 29 June, 2013 00:00:00
var date2 = formatFunc("29/06/2021");
console.log("date 1" + date1)
console.log("date 2" + date2)

c.start = '';
c.end = '';

gantt.attachEvent("onDataRender", function(){

	console.log("onDataRender")
});


c.change_detector = function(){
	gantt.refreshData();
} 
function compare_input(id) {
	var match = true; 
	// check task's text
	if(c.start){
		if (gantt.getTask(id).start_date.getTime() >= c.start.getTime()){
			match = true
		}else{
			match =false;
		}
	}
	if(c.end){
		if( gantt.getTask(id).end_date.getTime() <=  c.end.getTime()){
			match = true;
		}
		else{
			match = false;
		}
	}
	console.log(match)
	return match;
}



gantt.attachEvent("onBeforeTaskDisplay", function(id, task){
	console.log("onBeforeTaskDisplay")
	
	
	console.log("cc--> " + compare_input(id));
	console.log("cc2--> " + filterValue)
	if (compare_input(id)) {
		return true;
	}
	else{
		return false;
	}


	
	if(!filterValue ){ //if there is no inpiut
		return true;
	}else{ //if there is input- data
		var normalizedText = task.text.toLowerCase();
		var normalizedValue = filterValue.toLowerCase();
		return normalizedText.indexOf(normalizedValue) > -1;
	}
	

});

gantt.attachEvent("onGanttRender", function(){
	//gantt.$root.querySelector("[data-text-filter]").value = filterValue;
})

gantt.templates.rightside_text = function(start, end, task){
if(task.type == gantt.config.types.milestone){
  return "COMMITTED DUE DATE: " + task.text ;
}
return "";

};
gantt.config.lightbox.sections = [
{name: “description”, height: 70, map_to: “text”, type: “textarea”, focus: true},
{name: “type”, type: “typeselect”, map_to: “type”},
{name: “time”, type: “duration”, map_to: “auto”}
];

gantt.init("gantt_here");
gantt.parse(demo);



console.log( gantt.config.types.project)

console.log(gantt)
// $("#gantt_here").init(demo);

}

Hello Claudia,
Unfortunately, I couldn’t reproduce the issue:
http://snippet.dhtmlx.com/5/c6f531df5

It is hard to suggest what might be wrong, please, reproduce the issue in the snippet, then click on the “Share” button and send me the link:
https://snippet.dhtmlx.com/38ee1b370
Or send me an HTML file with all the necessary Javascript and CSS files.