html5-gantt-chart-link-customization.png

You can customize the following link properties;

  • type ("FinishToStart" | "FinishToFinish", "StartToStart", "StartToFinish")
  • line width
  • color
  • line style ("dotted", "solid", etc.)
  • CSS class

If you want to define the link appearance using a custom CSS class you can use the following template (styles from the default CSS theme):

.gantt_default_link_horizontal { border-bottom-style: solid; border-bottom-color: red; }

.gantt_default_link_vertical { border-right-style: solid; border-right-color: red; }

.gantt_default_link_arrow_right:before { content: ''; border-width: 6px; border-color: transparent transparent transparent red; border-style: solid; width: 0px; height:0px; position: absolute; }

.gantt_default_link_arrow_left:before { content: ''; border-width: 6px; border-color: transparent red transparent transparent; border-style: solid; width: 0px; height:0px; position: absolute; }

.gantt_default_link_arrow_down:before { content: ''; border-width: 6px; border-color: red transparent transparent transparent; border-style: solid; width: 0px; height:0px; position: absolute; 

Note: If you specify custom link color the link will be rendered using inline styles (the link CSS classes will not be applied).

JavaScript

Use the link properties to set the custom properties.

<div id="gantt"></div>

<script type="text/javascript">
var dp = new DayPilot.Gantt("gantt");
// ...
dp.links.list = [
  {
    id: "link1",
    from: "task1",
    to: "task2,
    width: 2,
    color: "blue",
    style: "solid",
    type: "FinishToStart"
  },
  {
    id: "link2",
    from: "task2",
    to: "task3,
    width: 2,
    color: "red",
    style: "dotted",
    type: "FinishToStart"
  }
];
dp.init();
</script>

ASP.NET WebForms

In DayPilot Pro for ASP.NET WebForms you can set the link properties using BeforeLinkRender event handler.

Example:

void DayPilotGantt1_BeforeLinkRender(object sender, BeforeLinkRenderEventArgs e)
{
  e.Color = "blue";
  e.Style = LinkStyle.Dotted;
  e.CssClass = "mylink";
}