Gantt not recognising milestones


I am trying to implement milestones following this guide:

I am using a custom lightbox so I have ignored step 1. However I have followed steps 2 and 3.

Step 2 required a tweak because I am using remote JSON and have to escape all values with quotation marks “”.

gantt.templates.rightside_text = function(start, end, task){ if(task.type == "gantt.config.types.milestone"){ return task.text; } return ""; };
The right side text is working now, however the milestone still shows as a regular event with zero duration.

My JSON looks like:

{ "data":[{"id":"1","text":"This is a test task","duration":"2","type":"0","start_date":"13-04-2013","parent_id":"0"},{"id":"2","text":"Another Awesome Task","duration":"4","type":"0","start_date":"13-04-2013","parent_id":"0"},{"id":"3","text":"This is a milestone","duration":"0","type":"gantt.config.types.milestone","start_date":"13-04-2013","parent_id":"0"}]}

Thank-you for your assistance.


“gantt.config.types.milestone” - you need to remove quotes from this.
Gantt configuration has option which holds all defined types (so you can add custom types there). They are stored as ‘name’->‘value’ map.
The default value of types config is following:gantt.config.types = { 'task': 'task', 'project': 'project', 'milestone': 'milestone' };
Types can be mapped to different database values (e.g. if you have existing data, which can be loaded to gantt), in that case config can be redefined.
So you data should contain a value of gantt.config.types.milestone property, not the property name itself. With the default settings your code should look following:gantt.templates.rightside_text = function(start, end, task){ if(task.type == gantt.config.types.milestone){ return task.text; } return ""; };

{"id":"3","text":"This is a milestone","duration":"0","type":"milestone","start_date":"13-04-2013","parent_id":"0"} … onfig.html

Thank-you so much for this!

I was getting confused with the quotes because it was not valid JSON. Redefining the tasks as you explained means its now working perfectly!



I am using dxhtml gantt chart in angular 6. Milestones is not displaying even i give the type: gantt.config.types.milestone like this.


Hello Gayathri,
The milestone type is not available in the standard version:
If you have the PRO version, you need to install it on Angular.

To install the Pro/Trial version, you need to apply the following command:

npm install 'path to gantt folder with package.json file'

for example:

npm install /opt/gantt_trial

If you don’t have package.json file near the codebase folder, you can download the following one:

After you install the PRO version, you will be able to resize the grid and the tasks with the “milestone” type will look as milestones.

Hi Ramil,

Thanks for your reply…

What is this '‘path to gantt folder with package.json file’ where i get this?

whats the meaning of /opt/gantt_trial


Hello Gayathri,
After you purchase the license, you will get an archive with the Pro version. You will find the codebase folder there. You need to unpack the archive somewhere.
/opt/gantt_trial is an example of the path to a folder on Linux. Here is an example with another folder on Linux:

If you use Windows, it can be:


In Mac it can be: