Default ordering of event markers

[Sean]

How can we specify the vertical ordering of the event markers in the gantt chart ? 

Our event markers json payload is as follows:

  "eventMarkers": [

    {

      "day": "17/02/2022 00:00",

      "label": "PreFac Start"

    },

    {

      "day": "01/04/2022 00:00",

      "label": "PreFac Finish"

    },

    {

      "day": "27/06/2022 00:00",

      "label": "Set Start"

    },

    {

      "day": "29/06/2022 00:00",

      "label": "Set Finish"

    },

    {

      "day": "30/06/2022 00:00",

      "label": "SL1Const Start"

    },

    {

      "day": "07/07/2022 00:00",

      "label": "SL1Const Finish"

    },

    {

      "day": "08/07/2022 00:00",

      "label": "SL2Const Start"

    },

    {

      "day": "08/07/2022 00:00",

      "label": "SL2Const Finish"

    }

  ],

Problems:

1. Why is Set Start below Set Finish? Surely if Set Start's date is < Set Finish, it should render higher in vertical positioning.
2. Why is SL2Const Start and SL2Const Finish rendering higher than SL1Const Finish? 

We need more options here to apply positions to the event markers, other than a CSS class. 

[Pooja Priya Krishna Moorthy]

Hi Samantha, 

Thanks for contacting Syncfusion support. 

We can specify different heights for labels by using cssClass properties itself as like below code example. 

eventMarkers: [ 

   { 

     day: "02/17/2022 00:00", label: "PreFac Start", 

    cssClass: "e-start", 

   }, 

   { 

      day: "04/01/2022 00:00", label: "PreFac Finish", 

     cssClass: "e-finish", 

   }, 

] 

<style> 

    .e-event-markers.e-finish .e-span-label { 

        top: 100px !important; 

    } 

    .e-event-markers.e-finish .e-gantt-right-arrow { 

        top: 110px !important; 

    } 

</style> 

Sample - https://codesandbox.io/s/vue-template-forked-38nhb 

Regards, 

Pooja K. 

[Sean]

Hi Pooja, 

Surely the chart should not require us to provide custom css to render the event markers in a chronological order?

Considering that the control already has the "day" property, should the gantt control not be able to render this correctly for a list of event markers ?

Thanks

[Pooja Priya Krishna Moorthy]

Hi Samantha, 

Currently, we don’t have direct support to render labels at different heights based on day. We logged a feature report for this. The status can be tracked from below feedback link. 

https://www.syncfusion.com/feedback/23794/provide-support-to-render-event-markers-at-different-heights 

As we have already lined up some major features, we could not implement this feature immediately. Please cast your vote to make it count. We will prioritize the features for every release based on demands. 

 

Regards, 

Pooja K.