Element styling

GI-Gantt component can be styled by either providing simple rules to style the structure itself or by providing custom elements to fit within the structure and establish completely custom styling.

Custom elements can support any styling

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

export function Example() {
  return (
    // eslint-disable-next-line tailwindcss/no-custom-classname
    <div className="not-content">
      <GanttChart
        dateTimeframeRenderElements={{
          day: (_year, _monthIndex, day) => () => (
            <div
              className="size-full rounded-lg"
              style={{ background: day % 2 === 0 ? "red" : "blue" }}
            >
              {day}
            </div>
          ),
          month: (year, monthIndex) => () => (
            <div className="size-full rounded-lg bg-teal-800">
              {year}-{monthIndex + 1}
            </div>
          ),
        }}
        tableContainerWidth={55}
        data={[
          {
            id: "1",
            fields: {
              id: () => <div className="size-full bg-green-500">1</div>,
            },
            activities: [
              {
                id: "1-1",
                from: new Date(2024, 1, 4),
                to: new Date(2024, 1, 8),
                renderElement: () => <div className="size-full bg-sky-500" />,
              },
            ],
          },
        ]}
        columns={[
          {
            id: "id",
            renderElement: () => (
              <div className="size-full bg-amber-600">ID</div>
            ),
            width: 50,
          },
        ]}
        chartStyle={{
          tableHeaderBackgroundColor: "transparent",
          tableHeaderBorderSize: 0,
          tableHeaderBorderColor: "transparent",
          tableRowBackgroundColor: "transparent",
          tableRowHighlightColor: "transparent",
          tableRowBorderSize: 0,
          tableRowBorderColor: "transparent",
          timelineHeaderBackgroundColor: "transparent",
          timelineHeaderHighlightColor: "transparent",
          timelineHeaderBorderSize: 0,
          timelineHeaderBorderColor: "transparent",
          timelineActivityBackgroundColor: "transparent",
          timelineActivityHighlightColor: "transparent",
          timelineActivityBorderSize: 0,
          timelineActivityBorderColor: "transparent",
          tableResizerColor: "blue",
          tableResizerActiveColor: "transparent",
          tableResizerHoverColor: "darkblue",
          tableResizerWidth: 2,
          fieldResizerColor: "blue",
          fieldResizerActiveColor: "transparent",
          fieldResizerHoverColor: "transparent",
          fieldResizerWidth: 2,
          linkColor: "transparent",
          linkWidth: 3,
          rowHeight: 30,
        }}
        links={[]}
        timeframes={[]}
        markers={[]}
        zoomLevel={7}
      />
    </div>
  );
}