Milestones in angular are ignored / shown as normal task

Dear Community,

While I’m testing the functions of the dhtmlxGantt in Angular I currently have a problem.
I want to get milestones in the Gantt. Even if I copy the code from the demo (with different adjustments to angular) I get normal tasks shown instead of milestones.

Here’s my code:

module.directive('dhxGantt', function() {
        return {
            restrict: 'A',
            scope: false,
            transclude: true,
            template: '<div ng-transclude></div>',
            link:function ($scope, $element, $attrs, $controller){
                $scope.$watch($, function(collection){
                    gantt.parse(collection, "json");
                }, true);

                $scope.$watch(function() {
                    return $element[0].offsetWidth + "." + $element[0].offsetHeight;
                }, function() {


module.config(['$stateProvider', function ($stateProvider) {
            .state('gantt.dhtmlx', {
                url: '/dhtmlx',
                label: 'DHTMLX',
                templateUrl: 'state/gantt/gantt.dhtmlx.html',
                controller: 'ganttDhtmlxController',

module.controller('ganttDhtmlxController', [

function ganttDhtmlxController($scope,
                                       $filter) {        
    gantt.config.scale_unit = "month";
    gantt.config.date_scale = "%F, %Y";
    gantt.config.scale_height = 50;

    gantt.config.types["customType"] = "type_id";
    gantt.locale.labels['type_' + "customType"] = "New Type";
    gantt.config.lightbox["customType" + "_sections"] = [
        {name: "description", height: 70, map_to: "text", type: "textarea", focus: true},
        {name: "type", type: "typeselect", map_to: "type"}

    gantt.config.subscales = [
        {unit:"day", step:1, date:"%j, %D" }

    gantt.templates.rightside_text = function(start, end, task){
        if(task.type == gantt.config.types.milestone){
            return 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"}

    $scope.tasks = {
            {"id":11, "text":"Project #1", type:gantt.config.types.project, "progress": 0.6, "open": true},

            {"id":12, "text":"Task #1", "start_date":"03-04-2013", "duration":"5", "parent":"11", "progress": 1, "open": true},
            {"id":13, "text":"Task #2", "start_date":"03-04-2013", type:gantt.config.types.project, "parent":"11", "progress": 0.5, "open": true},
            {"id":14, "text":"Task #3", "start_date":"02-04-2013", "duration":"6", "parent":"11", "progress": 0.8, "open": true},
            {"id":15, "text":"Task #4", type:gantt.config.types.project, "parent":"11", "progress": 0.2, "open": true},
            {"id":16, "text":"Final milestone", "start_date":"15-04-2013", type:gantt.config.types.milestone, "parent":"11", "progress": 0, "open": true},

            {"id":17, "text":"Task #2.1", "start_date":"03-04-2013", "duration":"2", "parent":"13", "progress": 1, "open": true},
            {"id":18, "text":"Task #2.2", "start_date":"06-04-2013", "duration":"3", "parent":"13", "progress": 0.8, "open": true},
            {"id":19, "text":"Task #2.3", "start_date":"10-04-2013", "duration":"4", "parent":"13", "progress": 0.2, "open": true},
            {"id":20, "text":"Task #2.4", "start_date":"10-04-2013", "duration":"4", "parent":"13", "progress": 0, "open": true},
            {"id":21, "text":"Task #4.1", "start_date":"03-04-2013", "duration":"4", "parent":"15", "progress": 0.5, "open": true},
            {"id":22, "text":"Task #4.2", "start_date":"03-04-2013", "duration":"4", "parent":"15", "progress": 0.1, "open": true},
            {"id":23, "text":"Mediate milestone", "start_date":"14-04-2013", type:gantt.config.types.milestone, "parent":"15", "progress": 0, "open": true}


<script src="../../../js/gantt/dhtmlxgantt.js" type="text/javascript"></script>
<link rel="stylesheet" href="../../../css/dhtmlxgantt.css">
<div dhx-gantt data="tasks" style="height:550px; width:100%;"><div>

I can’t find the Problem. This is the code of the demo with the testdata of the demo. The tasks and links are shown correctly. When I inspect the class of the task, that should be a milestone, it’s “gantt_task_line gantt_dependent_task”. This is wrong, this should be “gantt_milestone”, like in the Demo. It looks like the gantt is not looking at the type of the task. But i can’t find the Problem.

I would be really grateful for help!

different types of tasks (i.e. projects/milestones/custom types) are available only in commercial versions of the component
So such behavior is expected if you use GPL version of gantt. The solution could be either switching to commercial version or styling milestones manually - add some property to mark tasks as milestones, make such tasks always have zero duration and style them using task_class template - i.e. in order to have a ‘diamond’ shape you’ll need to make a rectangle (width = height) and rotate it by 45deg