Stacking only enforced when times overlap

[karlrez]

Describe the bug
Using param stackItems={true} I am finding the stacking only occurs where there would be overlap in times, otherwise the same row is shared

To Reproduce
Code Sandbox

Data:

    {
      id: 1,
      title: "Workers",
      color: "purple"
    }
  ];

  const items = [
    {
      id: 1,
      group: 1,
      title: "team1",
      tip: "custom tip",
      start_time: 1695840363319.992,
      end_time: 1695845741319.996,
      canMove: false,
      canResize: false,
      canChangeGroup: false,
      itemProps: {
        style: {
          background: "green",
          color: "black",
          textAlign: "center"
        }
      }
    },
    {
      id: 2,
      group: 1,
      title: "team1",
      tip: "custom tip",
      start_time: 1695850355319.972,
      end_time: 1695850360319.976,
      canMove: false,
      canResize: false,
      canChangeGroup: false,
      itemProps: {
        style: {
          background: "green",
          color: "black",
          textAlign: "center"
        }
      }
    },
    {
      id: 3,
      group: 1,
      title: "team1",
      tip: "custom tip",
      start_time: 1695852660319.98,
      end_time: 1695854210319.996,
      canMove: false,
      canResize: false,
      canChangeGroup: false,
      itemProps: {
        style: {
          background: "green",
          color: "black",
          textAlign: "center"
        }
      }
    },
    {
      id: 4,
      group: 1,
      title: "TEAM5",
      tip: "custom tip",
      start_time: 1695827220319,
      end_time: 1695837600000,
      canMove: false,
      canResize: false,
      canChangeGroup: false,
      itemProps: {
        style: {
          background: "red",
          color: "black",
          textAlign: "center"
        }
      }
    },
    {
      id: 5,
      group: 1,
      title: "TEAM6",
      tip: "custom tip",
      start_time: 1695852660319.98,
      end_time: 1695854210319.996,
      canMove: false,
      canResize: false,
      canChangeGroup: false,
      itemProps: {
        style: {
          background: "orange",
          color: "black",
          textAlign: "center"
        }
      }
    }
  ];

Timeline:

<Timeline
      groups={groups}
      items={items}
      defaultTimeStart={new Date(items[0].start_time)}
      defaultTimeEnd={new Date(items[items.length - 1].end_time)}
      stackItems={true}
      // onTimeChange={onTimeChange}
    >
      <TimelineHeaders style={{ background: "Grey" }}>
        <SidebarHeader>
          {({ getRootProps }) => {
            return (
              <div {...getRootProps()}>
                <div
                  style={{
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                    height: "60px",
                    color: "white"
                  }}
                >
                  Groups
                </div>
              </div>
            );
          }}
        </SidebarHeader>
        <DateHeader unit="primaryHeader" />
        <DateHeader />
      </TimelineHeaders>
    </Timeline>`

Expected behavior
Have stacking enforced even when times do not overlap

Screenshots

Library Version
Please provide version of library in which this bug is occurring.
0.28.0

Desktop (please complete the following information):

• OS: Windows 10
• Browser: chrome, edge
• Version: latest

[PieterT2000]

Same issue here. Is there an option for each item to be rendered on its own row, regardless of time overlap with other items in the group?

[lnagel]

Triage Review (0.30.0-beta.9)

Status: By design — feature request 📋

The current stackItems behavior is working as designed. The stacking algorithm uses 2D collision detection — it only places items on separate rows when they would visually overlap. Non-overlapping items in the same group share a row to save vertical space.

What's being requested is a different feature: "force each item onto its own row" regardless of time overlap. This would be more of a forceStack or itemsPerRow: 1 type option.

In the 0.30 codebase, the stacking logic is the same (collision() function in calendar.tsx line ~321). Per-group stacking is supported via group.stackItems, but there's no option to force unique rows per item.

This is a feature request, not a bug. It could be addressed by:

• Adding a forceStack option that assigns a minimum collision padding equal to the full time range
• Or allowing users to use sub-groups (one per item) to achieve the same visual result

Low priority for the stable release — the current behavior is the standard expected behavior for timeline stacking.