Adding a custom task type

Default types

Task types can be added via the taskTypes property. Default types are the following:

Task
Milestone
Summary task

The description of each type you can find here: Task types.

Adding a custom type

To add a new task type, add a new object to the taskTypes array:

Example:

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" },
    { id: "round", label: "Rounded" },
];

You can also 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>

Adding a custom task type

Default types​

Adding a custom type​

Default types

Adding a custom type