Milestone Image


Is it possible to have different images for milestone? Or change/specify the size for a milestone?
Currently, the size of the milestones offered by the different themes, seems to be bigger than what we would like for our application.
If there are two milestones in consecutive rows, then the edges seem to overlap.
We would like to use either the skyblue theme or the terrace(default) theme.


there are not much settings for custom content for a milestone. The default look is made from square task rotated by 45 degree, so event if you set a background images - you’ll have to consider this.
Alternatively, you can render milestones manually, using this function … rtasktypes

If you need only to change the sizes of milestone, it can be achieved using some css tweaks.
The size of a milestone element depends on a size of the task bar and can’t be set separately. However, you can change their visual appearance using css templates, please check this snippet:


Thanks for the reply.
I checked the snippet, and noticed one thing with the provided CSS.
Although the size of the milestone decreases, if I link the milestone to another task/milestone, the link lines seem to have a certain gap between the end of milestone, and beginning of the link.
Is there a way to get around this problem?
If i choose to make the milestone smaller, it will increase the gap between the beginning of the link, and end of the milestone corner, since the link’s starting point is always the same, irrespective of the size of the milestone.

Unfortunately there is not good solution for this.
Positions of links are calculated based on sizes and dates of gantt items. When the size and position of an element is changed via css, a helper that draws the links won’t have information about it and won’t do any correction.
The possible solution would be to either rewrite an inner function that calculates a position of a link … t.js#L2838
(however I can’t guarantee that this methods won’t be refactored in one of updates), or to leave the gaps.