> ## Documentation Index
> Fetch the complete documentation index at: https://learn.nextedy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Adjust Gantt Row Height

> This guide shows you how to make Nextedy GANTT rows smaller or larger to fit more items on screen or improve readability.

export const LastReviewed = ({date}) => {
  if (!date) return null;
  const formatted = new Date(`${date}T00:00:00Z`).toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
    timeZone: "UTC"
  });
  return <p className="mt-10 text-sm text-gray-400 dark:text-zinc-500 not-prose">
      Last reviewed on {formatted}
    </p>;
};

## Set Row and Task Height

Navigate to **Widget Properties > Advanced > Gantt Config Script** and add the following properties:

```javascript theme={null}
gantt.config.task_height = 22;
gantt.config.row_height = 28;
```

| Property                   | Description                             | Default |
| :------------------------- | :-------------------------------------- | :------ |
| `gantt.config.task_height` | Height of the task bar in pixels        | 32      |
| `gantt.config.row_height`  | Height of the entire grid row in pixels | 38      |

<Warning title="Task height must be smaller than row height">
  Always set `task_height` to a value smaller than `row_height`. If the task bar is taller than the row, it will overlap adjacent rows and produce rendering artifacts.
</Warning>

## Compact Mode for Large Charts

When working with charts containing many items, reduce both values to show more rows on screen. For example, a compact configuration:

```javascript theme={null}
gantt.config.task_height = 20;
gantt.config.row_height = 22;
```

This produces a dense layout where task bars are closely packed, maximizing the number of visible items without scrolling.

For comparison, the default configuration with `task_height = 32` and `row_height = 38` provides more padding between rows and larger task bars, which improves readability when you have fewer items.

<Frame>
  <img src="https://mintcdn.com/none-17b4493f/Jklvz9qm2AdmIvBG/gantt/diagrams/guides/visualization/row-height/diagram-1.svg?fit=max&auto=format&n=Jklvz9qm2AdmIvBG&q=85&s=8e11474d7f9164c012d81a8bc27e8755" alt="diagram" style={{ maxWidth: "480px", width: "100%" }} width="480" height="180" data-path="gantt/diagrams/guides/visualization/row-height/diagram-1.svg" />
</Frame>

## Pair with Right-Side Text

If you are using [right-side text](/gantt/guides/visualization/right-side-text) on task bars, adjust the row height to accommodate both the task bar and the text label. A tight row height may cause text to overlap adjacent rows. Start with a configuration like:

```javascript theme={null}
gantt.config.task_height = 20;
gantt.config.row_height = 22;
```

Then increase `row_height` if the right-side text appears clipped or overlaps.

<Tip title="Use fullscreen mode for large charts">
  When working with compact row heights and many items, enable **Widget Properties > Advanced > Maximize** to expand the Gantt chart to fill the browser window. This maximizes the number of visible rows. See [Use Fullscreen and Maximize Mode](/gantt/guides/layout/fullscreen-mode).
</Tip>

## Verification

You should now see the Gantt chart rows rendered at your configured height. Compare the row spacing before and after the change to confirm the values took effect. If rows appear too cramped, increase `row_height` by a few pixels.

## See also

* [Configure Right-Side Text on Task Bars](/gantt/guides/visualization/right-side-text)
* [Configure the Time Scale](/gantt/guides/visualization/timescale)
* [Use Fullscreen and Maximize Mode](/gantt/guides/layout/fullscreen-mode)
* [Write Gantt Config Scripts](/gantt/guides/scripting/gantt-config-script)
* [Apply Custom CSS to the Gantt Widget](/gantt/guides/integration/custom-css-styling)

<LastReviewed date="2026-07-02" />