Smart UI Components & Libraries – Grid, Scheduler, Gantt, Kanban for Angular, React, Next.js, Vue, Blazor, JavaScript › Forums › Gantt › Different Color Per Task
- This topic has 2 replies, 2 voices, and was last updated 3 years ago by
svetoslav_borislavov.
-
AuthorPosts
-
February 7, 2023 at 1:17 am #104357
D G
ParticipantHello
In our use case, each task may be separately colored based on data held against the task (based on user “picking” the task color). In this case it’s not possible to use the “–smart-gantt-chart-task-color” CSS variable (combined with the task “class” attribute) as:
- We don’t know the colors in advance.
- There would be too many potential colors if we had hundreds of tasks.
Is there a way to pass the color (and potentially other styling elements) directly in the dataSource item? (i.e. not using the “class” attribute)
Thanks 🙂
February 8, 2023 at 4:08 am #104358D G
ParticipantUpdate: I have managed to work around this issue by setting up a class per color (and restricting the task color selection to about 12 colors).
I am currently evaluating your software and have a few quick questions:
- Is there a way to have a quarterly view? Similar to the year view except showing quarters instead of months. This is a very common view for timelines.
- Is there a way to customize the task predecessor connector lines? I’d like to draw a SVG spline instead of the current square look.
- Do you support drag-scroll for the main gantt view? Scroll bars can be fiddly to use especially on smaller (mobile) screens.
If the answer to the above questions is “no”, am I allowed to modify the source code to implement those features? (if I purchase the developer or team license)
Thanks in advance.
Darren
February 8, 2023 at 7:28 am #104359svetoslav_borislavov
ParticipantHi,
We do support only the following views: “day” | “week” | “month” | “year”.
To style the task connections you can use its class smart-task-connection
You can scroll by dragging tasks. On mobile devices the drag scroll is available.
You may open a demo from a mobile device to see. Here is an example of a demo:
https://www.htmlelements.com/react/demos/gantt/overview/Other custom modifications should be implemented by you.
Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/ -
AuthorPosts
- You must be logged in to reply to this topic.