Task types in Gantt

Marek

Can I create and use custom task types with different colors in the Gantt chart? I want to distinguish between different types of tasks visually. For example, red for urgent/high priority tasks and blue for low priority tasks. Can I link these task types with the task editor dialog?

SVAR_tech

You can customize the look of a task type by adding CSS rules for each task type using its id.
Example:

<script>
   import { getData } from "../data";
   import { Gantt } from "../../src/";

   const {links, scales, columns} = getData();

   const tasks = [
   {
       id: 1,
       start: new Date(2024, 3, 2),
       end: new Date(2024, 3, 17),
       text: "Project planning",
       progress: 30,
       parent: 0,
       type: "summary",
       open: true,
       details: "Outline the project's scope and resources.",
   },
   {
       id: 10,
       start: new Date(2024, 3, 2),
       end: new Date(2024, 3, 5),
       text: "Marketing analysis",
       progress: 100,
       parent: 1,
       type: "task",
       details: "Analyze market trends and competitors.",
   },
   {
       id: 11,
       start: new Date(2024, 3, 5),
       end: new Date(2024, 3, 7),
       text: "Discussions",
       progress: 100,
       parent: 1,
       type: "task",
       details: "Team discussions on project strategies.",
   },
   {
       id: 110,
       start: new Date(2024, 3, 6),
       end: new Date(2024, 3, 9),
       text: "Initial design",
       progress: 60,
       parent: 11,
       type: "urgent",
       details: "Draft initial design concepts.",
   },
   {
       id: 111,
       start: new Date(2024, 3, 9),
       text: "Presentation",
       progress: 0,
       parent: 11,
       type: "milestone",
       details: "Present initial designs to stakeholders.",
   },
   {
       id: 112,
       start: new Date(2024, 3, 7),
       end: new Date(2024, 3, 12),
       text: "Prototyping",
       progress: 10,
       parent: 11,
       type: "narrow",
   },
   {
       id: 113,
       start: new Date(2024, 3, 8),
       end: new Date(2024, 3, 17),
       text: "User testing",
       progress: 0,
       parent: 11,
       type: "progress",
   },];

   const taskTypes = [
   { id: "task", label: "Task" },
   { id: "summary", label: "Summary task" },
   { id: "milestone", label: "Milestone" },
   { id: "urgent", label: "Urgent" },
   { id: "narrow", label: "Narrow" },
   { id: "progress", label: "Progress" },
];

</script>

<div class="demo">
   <Gantt {links} {scales} {columns} {tasks} {taskTypes} />
</div>

<style>
   .demo {
       overflow: hidden;
       height: 100%;
   }
   //style rules for the "narrow" type
   .demo > :global(.wx-gantt .wx-bar.wx-task.narrow) {
       background-color: #676a81;
       color: transparent;
       height: 10px !important;
       margin-top: 10px;
       border: 1px solid #63667a;
   }
   .demo > :global(.wx-gantt .wx-bar.wx-task.narrow .wx-progress-percent) {
       background-color: #1a2630;
   }
   .demo > :global(.wx-gantt .wx-bar.wx-task.narrow .wx-link) {
       background-color: #384047;
       border-radius: 0px;
   }
   .demo > :global(.wx-gantt .wx-bar.wx-task.narrow .wx-link .wx-inner) {
       border-radius: 0px;
   }
  
   .demo > :global(.wx-gantt .wx-progress-percent) {
       background-color: #ffc107;
   }
   //style rules for the "progress" type
   .demo > :global(.wx-gantt .wx-bar.wx-task.progress) {
       background-color: transparent;
       color: var(--wx-color-font);
       border-radius: 50px;
       border: 1px solid #00bcd4;
   }
   .demo > :global(.wx-gantt .wx-bar.wx-task.progress .wx-progress-percent) {
       background-color: #00bcd4;
   }
   .demo > :global(.wx-gantt .wx-bar.wx-task.progress .wx-progress-wrapper) {
       border-radius: 50px;
   }
   //style rules for the "urgent" type
   .demo > :global(.wx-gantt .wx-bar.wx-task.urgent) {
       background-color: #f49a82;
       border: 1px solid #f45e36;
   }
   .demo > :global(.wx-gantt .wx-bar.wx-task.urgent .wx-progress-percent) {
       background-color: #f45e36;
   }
</style>