Directive not working with gantt chart

[himrocks]

"type": "gantt",
"theme": "light",
"marginRight": 70,
"period": "DD",
"dataDateFormat": "YYYY-MM-DD",
"balloonDateFormat": "JJ:NN",
"columnWidth": 0.2,
"valueAxis": {
"type": "date",
"minimum": 0,
"maximum": 365
},
"brightnessStep": 10,
"graphs": {
"fillAlphas": 1,
"balloonText": "[[task]]: [[open]] [[value]]"
},
"rotate": true,
"categoryField": "category",
"segmentsField": "segments",
"colorField": "color",
"startDate": "2016-01-01",
"startField": "start",
"endField": "end",
"durationField": "duration",
"data": [
{
"category": "New Years Eve",
"segments": [{
"start": 0,
"duration": 98,
"color": "#7E585F",
"task": "New Years Eve"
}]
}, {
"category": "Valentines Day",
"segments": [{
"start": 44,
"duration": 98,
"color": "#7B742C",
"task": "Valentines Day"
}]
}, {
"category": "Good Friday",
"segments": [{
"start": 83,
"duration": 98,
"color": "#CF794A",
"task": "Good Friday"
}]
}, {
"category": "Easters Sunday",
"segments": [{
"start": 86,
"duration": 98,
"color": "#FFE4C4",
"task": "Easters Sunday"
}]
}, {
"category": "Vesak Day",
"segments": [{
"start": 141,
"duration": 98,
"color": "#7E585F",
"task": "Vesak Day"
}]
}, {
"category": "Hari Raya Puasa",
"segments": [{
"start": 187,
"duration": 98,
"color": "#7B742C",
"task": "Hari Raya Puasa"
}]
}, {
"category": "National Day",
"segments": [{
"start": 221,
"duration": 98,
"color": "#CF794A",
"task": "National Day"
}]
}, {
"category": "Hari Raya Haji",
"segments": [{
"start": 255,
"duration": 98,
"color": "#FFE4C4",
"task": "Hari Raya Haji"
}]
}, {
"category": "Diwali",
"segments": [{
"start": 302,
"duration": 98,
"color": "#7E585F",
"task": "Diwali"
}]
}, {
"category": "Christmas Day",
"segments": [{
"start": 360,
"duration": 98,
"color": "#7B742C",
"task": "Christmas Day"
}]
}],
"chartScrollbar": {},
"chartCursor": {
"valueBalloonsEnabled": false,
"cursorAlpha": 0.1,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"fullWidth": true
},
"export": {
"enabled": true
},
"responsive": {
"enabled": true
}

[fassetar]

I'm able to get the graph to display on version 3.21.11- amcharts. This what my object looks like,

 $ctrl.ganttOptions = {
            type: "gantt",
            theme: "light",
            period: "DD",
            dataDateFormat: "YYYY-MM-DD",
            valueAxis: {
              type: "date"
            },
            brightnessStep: 7,
            graph: {
              "fillAlphas": 1,
              "lineAlpha": 1,
              "lineColor": "#fff",
              "fillAlphas": 0.85,
              "balloonText": "<b>[[task]]</b>:<br />[[open]] -- [[value]]"
            },
            categoryField: "category",
            segmentsField: "segments",            
            startDateField: "start",
            endDateField: "end",
            data: [ {
              "category": "Module #1",
              "segments": [ {
                "start": "2016-01-01",
                "end": "2016-01-14",
                "color": "#b9783f",
                "task": "Gathering requirements"
              }, {
                "start": "2016-01-16",
                "end": "2016-01-27",
                "task": "Producing specifications"
              }, {
                "start": "2016-02-05",
                "end": "2016-04-18",
                "task": "Development"
              }, {
                "start": "2016-04-18",
                "end": "2016-04-30",
                "task": "Testing and QA"
              } ]
            },{
                "start": "2016-02-10",
                "end": "2016-02-18",
                "task": "Testing and QA"
              } ]
            }, {
              "category": "Module #3",
              "segments": [ {
                "start": "2016-01-02",
                "end": "2016-01-08",
                "color": "#cd82ad",
                "task": "Gathering requirements"
              }, {
                "start": "2016-01-08",
                "end": "2016-01-16",
                "task": "Producing specifications"
              }, {
                "start": "2016-01-19",
                "end": "2016-03-01",
                "task": "Development"
              }, {
                "start": "2016-03-12",
                "end": "2016-04-05",
                "task": "Testing and QA"
              } ]
            }, {
              "category": "Module #4",
              "segments": [ {
                "start": "2016-01-01",
                "end": "2016-01-19",
                "color": "#2f4074",
                "task": "Gathering requirements"
              }, {
                "start": "2016-01-19",
                "end": "2016-02-03",
                "task": "Producing specifications"
              }, {
                "start": "2016-03-20",
                "end": "2016-04-25",
                "task": "Development"
              }, {
                "start": "2016-04-27",
                "end": "2016-05-15",
                "task": "Testing and QA"
              } ]
            }, {
              "category": "Module #5",
              "segments": [ {
                "start": "2016-01-01",
                "end": "2016-01-12",
                "color": "#448e4d",
                "task": "Gathering requirements"
              }, {
                "start": "2016-01-12",
                "end": "2016-01-19",
                "task": "Producing specifications"
              }, {
                "start": "2016-01-19",
                "end": "2016-03-01",
                "task": "Development"
              }, {
                "start": "2016-03-08",
                "end": "2016-03-30",
                "task": "Testing and QA"
              } ]
            } ],
            "valueScrollbar": {
              "autoGridCount": true
            },
            "chartCursor": {
              "cursorColor": "#55bb76",
              "valueBalloonsEnabled": false,
              "cursorAlpha": 0,
              "valueLineAlpha": 0.5,
              "valueLineBalloonEnabled": true,
              "valueLineEnabled": true,
              "zoomable": false,
              "valueZoomable": true
            },
            "export": {
              "enabled": true
            }
        };

Mostly from what's on the site's demo. The data doesn't populate but I think its with the object's data.