Customization

Apart from the built-in task types and default bar styles, Gantt lets you add your own task types, style them with CSS, and render custom content inside task bars with a template.

Adding custom task types

In addition to the built-in task types, you can add custom task types. Custom task types are defined via taskTypes and then used in the tasks array.

const taskTypes = [
  { id: "task", label: "Task" },
  { id: "urgent", label: "Urgent" },
];

const tasks = [
  {
    id: 5,
    text: "Critical fix",
    start: new Date(2024, 3, 18),
    end: new Date(2024, 3, 19),
    type: "urgent",
  },
]

Styling

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

import { Gantt } from "@svar-ui/react-gantt";
import "./custom.css";

const tasks = [
  {
    id: 1,
    text: "Urgent task",
    start: new Date(2024, 3, 10),
    end: new Date(2024, 3, 13),
    progress: 40,
    type: "urgent",
  },
];

const taskTypes = [
  { id: "task", label: "Task" },
  { id: "urgent", label: "Urgent" },
];

export default function App() {
  return <Gantt tasks={tasks} taskTypes={taskTypes} />;
}

/* custom.css */
.wx-gantt .wx-bar.wx-task.urgent {
  background-color: #f49a82;
  border: 1px solid #f45e36;
}

.wx-gantt .wx-bar.wx-task.urgent .wx-progress-percent {
  background-color: #f45e36;
}

Custom task types behave like standard tasks unless additional behavior is implemented via API interception.

Related sample:

• Task types

Applying template to task bars

You can define your own template for task bars using the taskTemplate property.

Below is an example of the component that uses the onAction callback to send the custom-click action to Gantt.

// MyTaskContent.jsx

export default function MyTaskContent({ data, onAction }) {
  const doClick = (ev) => {
    ev.stopPropagation();

    onAction({
      action: "custom-click",
      data: {
        clicked: !data.clicked,
        id: data.id,
      },
    });
  };

  if (data.type !== "milestone") {
    return (
      <>
        <div className="wx-text-out text-right">{data.text || ""}</div>
        <button onClick={doClick}>
          {data.clicked ? "Was clicked" : "Click Me"}
        </button>
      </>
    );
  }

  return <div className="wx-text-out text-left">{data.text || ""}</div>;
}

/* MyTaskContent.css */
button {
  font-size: 10px;
  position: relative;
  z-index: 2;
  font: var(--wx-gantt-bar-font);
}

.text-right {
  left: 100%;
  top: -2px;
}

.text-left {
  right: 100%;
  top: -2px;
}

.text-right,
.text-left,
button {
  padding: 0 2px;
  font-size: 12px;
}

In the next example we import the component above and listen to the custom-click action to trigger the update-task action on click.

import { getData } from "../data";
import { Gantt } from "@svar-ui/react-gantt";
import MyTaskContent from "../custom/MyTaskContent.jsx";
import { useRef } from "react";

const data = getData();

export default function App() {
  const apiRef = useRef(null);

  const doClick = (ev) => {
    apiRef.current.exec("update-task", {
      id: ev.id,
      task: {
        clicked: ev.clicked,
      },
    });
  };

  return (
    <Gantt
      onCustomClick={doClick}
      taskTemplate={MyTaskContent}
      tasks={data.tasks}
      links={data.links}
      scales={data.scales}
      ref={apiRef}
    />
  );
}