Layout 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.

This chart is styled only with passing colours and border values to the chart structure

Hex codes, css variables as well as colour names can be used.

Border sizes and colours can be specified as a single value or as an array with 4 values for [top, right, bottom, left]

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
        chartStyle={{
          tableHeaderBackgroundColor: "red",
          tableHeaderBorderSize: [0, 4, 0, 4],
          tableHeaderBorderColor: "darkred",
          tableRowBackgroundColor: "green",
          tableRowHighlightColor: "#FFFF00",
          tableRowBorderSize: 4,
          tableRowBorderColor: "orange",
          timelineHeaderBackgroundColor: "var(--sl-color-accent-low)",
          timelineHeaderHighlightColor: "rgba(0,0,0,0.1)",
          timelineHeaderBorderSize: 6,
          timelineHeaderBorderColor: "var(--sl-color-accent)",
          timelineActivityBackgroundColor: "pink",
          timelineActivityHighlightColor: "rgba(0,0,0,0.1)",
          timelineActivityBorderSize: 4,
          timelineActivityBorderColor: [
            "hotpink",
            "lime",
            "transparent",
            "orange",
          ],
          tableResizerColor: "transparent",
          tableResizerActiveColor: "var(--sl-color-text-invert)",
          tableResizerHoverColor: "var(--sl-color-text-accent)",
          tableResizerWidth: 2,
          fieldResizerColor: "transparent",
          fieldResizerActiveColor: "var(--sl-color-text-invert)",
          fieldResizerHoverColor: "var(--sl-color-text-accent)",
          fieldResizerWidth: 2,
          linkColor: "var(--sl-color-text-accent)",
          linkWidth: 3,
          rowHeight: 30,
        }}
        dateTimeframeRenderElements={{
          day: (_year, _monthIndex, day) => () => <>{day}</>,
          month: (year, monthIndex) => () => (
            <>
              {year}-{monthIndex + 1}
            </>
          ),
        }}
        tableContainerWidth={55}
        data={[
          {
            id: "1",
            fields: {
              id: () => <>1</>,
            },
            activities: [
              {
                id: "1-1",
                from: new Date(2024, 1, 4),
                to: new Date(2024, 1, 8),
                renderElement: () => <></>,
              },
            ],
          },
        ]}
        columns={[
          {
            id: "id",
            renderElement: () => <>ID</>,
            width: 50,
          },
        ]}
        links={[]}
        timeframes={[]}
        markers={[]}
        zoomLevel={7}
      />
    </div>
  );
}