Quick start

We are going to set up a new React project with Vite

Run Vite project creation

npm create vite@latest gi-gantt-app -- --template react-ts

This will create a new directory gi-gantt-app, create the Vite scaffolding and install deps with NPM

Open the new directory

cd gi-gantt-app

Install GI-Gantt via the short-lived try link

Go to GI-Gantt Buy Page and copy the temporary installation link.

The temporary link will be similar to https://buy.gi-gantt.dev/try/gi-gantt-core/1.0.0/long-temp-token-here

Go to your newly created project and run the command

npm i https://buy.gi-gantt.dev/try/gi-gantt-core/1.0.0/long-temp-token-here

Install the React wrapper from NPM

The React wrapper library handles using React components

npm i @gantt-insights/gi-gantt-react

Add a GI-Gantt component

Open src/App.tsx and replace the whole file contents with the following

import { GanttChart } from "@gantt-insights/gi-gantt-react";

export default function App() {
  return (
    // eslint-disable-next-line tailwindcss/no-custom-classname
    <div className="not-content" style={{ height: 120 }}>
      <GanttChart
        data={[
          {
            id: "1",
            fields: {
              id: () => <>1</>,
            },
            activities: [
              {
                id: "1-1",
                from: new Date(2024, 1, 3),
                to: new Date(2024, 1, 12),
                renderElement: () => (
                  <div
                    style={{ width: "100%", height: "100%", padding: "8px" }}
                  >
                    <div
                      className="size-full bg-sky-400"
                      style={{
                        width: "100%",
                        height: "100%",
                        backgroundColor: "#4f46e5",
                      }}
                    ></div>
                  </div>
                ),
              },
            ],
          },
        ]}
        columns={[
          {
            id: "id",
            renderElement: () => <>ID</>,
            width: 50,
          },
        ]}
        links={[]}
        timeframes={[]}
        markers={[
          {
            from: new Date(2024, 1, 4),
            to: new Date(2024, 1, 4),
            renderElementHeader: () => (
              <div
                style={{
                  width: "100%",
                  height: "100%",
                  borderLeft: "1px dashed red",
                }}
              ></div>
            ),
            renderElementBody: () => (
              <div
                style={{
                  width: "100%",
                  height: "100%",
                  borderLeft: "1px dashed red",
                }}
              ></div>
            ),
          },
        ]}
        zoomLevel={14}
        chartStyle={{
          tableHeaderBackgroundColor: "#1f2937",
          tableHeaderBorderSize: [1, 0, 1, 0],
          tableHeaderBorderColor: "#374151",
          tableRowBackgroundColor: "transparent",
          tableRowHighlightColor: "rgba(0,0,0,0.1)",
          tableRowBorderSize: [1, 0, 1, 0],
          tableRowBorderColor: "#1f2937",
          timelineHeaderBackgroundColor: "#1f2937",
          timelineHeaderHighlightColor: "rgba(0,0,0,0.1)",
          timelineHeaderBorderSize: 1,
          timelineHeaderBorderColor: "#374151",
          timelineActivityBackgroundColor: "transparent",
          timelineActivityHighlightColor: "rgba(0,0,0,0.1)",
          timelineActivityBorderSize: 1,
          timelineActivityBorderColor: "transparent",
          tableResizerColor: "transparent",
          tableResizerActiveColor: "#1e1b4b",
          tableResizerHoverColor: "#c7d2fe",
          tableResizerWidth: 2,
          fieldResizerColor: "transparent",
          fieldResizerActiveColor: "#1e1b4b",
          fieldResizerHoverColor: "#c7d2fe",
          fieldResizerWidth: 2,
          linkColor: "#c7d2fe",
          linkWidth: 3,
          rowHeight: 30,
        }}
        dateTimeframeRenderElements={{
          day: (_year, _monthIndex, day) => () => <>{day}</>,
          month: (year, monthIndex) => () => (
            <>
              {year}-{monthIndex + 1}
            </>
          ),
        }}
        tableContainerWidth={55}
      />
    </div>
  );
}

Run your Vite app

npm run dev