Skip to content
RevoGrid [Pro]

Gantt Timeline and Zoom

The Gantt timeline can be configured at two levels:

  1. zoomPreset for fast setup with built-in levels.
  2. zoom for full control over levels, wheel behavior, and anchor strategy.
Source code 
---
import GanttScheduling from './GanttScheduling.vue';
---


<GanttScheduling client:only="vue" />

Quick Start with zoomPreset

Section titled “Quick Start with zoomPreset”

Use a built-in preset when you only need a standard timeline scale:

grid.gantt = {
  // ...required project fields
  zoomPreset: 'week-month',
};

Supported presets:

  • 'day-week'
  • 'week-month'
  • 'month-quarter'
  • 'quarter-year'
  • 'year-quarter'
  • 'multi-year-quarter'

Full Zoom Configuration

Section titled “Full Zoom Configuration”

Use zoom when you need custom levels, min/max bounds, locale, or wheel interaction rules.

grid.gantt = {
  // ...required project fields
  zoomPreset: 'week-month',
  zoom: {
    enabled: true,
    defaultLevelId: 'week-month',
    minLevelId: 'day-week',
    maxLevelId: 'quarter-year',
    locale: 'en-US',
    zoomAnchorMode: 'pointer',
    wheelZoomEnabled: true,
    wheelZoomTrigger: 'ctrlKey',
    wheelZoomMode: 'discrete',
    invertWheelDirection: false,
  },
};

Custom Zoom Levels

Section titled “Custom Zoom Levels”

You can define your own zoom.levels list from finest to coarsest.

grid.gantt = {
  // ...required project fields
  zoom: {
    levels: [
      {
        id: 'day-week',
        label: 'Day / Week',
        tickUnit: 'day',
        tickWidth: 56,
        headerRows: [
          { id: 'week', unit: 'week' },
          { id: 'day', unit: 'day' },
        ],
      },
      {
        id: 'week-month',
        label: 'Week / Month',
        tickUnit: 'week',
        tickWidth: 84,
        headerRows: [
          { id: 'month', unit: 'month' },
          { id: 'week', unit: 'week' },
        ],
      },
      {
        id: 'month-quarter',
        label: 'Month / Quarter',
        tickUnit: 'month',
        tickWidth: 120,
        headerRows: [
          { id: 'year', unit: 'year' },
          { id: 'month', unit: 'month' },
        ],
      },
    ],
    defaultLevelId: 'week-month',
  },
};

Wheel Zoom Options

Section titled “Wheel Zoom Options”

Control whether users can zoom with the mouse wheel and which modifier key is required.

grid.gantt = {
  // ...required project fields
  zoom: {
    wheelZoomEnabled: true,
    wheelZoomTrigger: 'metaKey', // macOS Cmd key
    wheelZoomMode: 'smooth-discrete',
    invertWheelDirection: false,
  },
};

Available wheelZoomTrigger values:

  • 'ctrlKey'
  • 'metaKey'
  • 'altKey'
  • 'shiftKey'
  • 'none'

Anchor Behavior During Zoom

Section titled “Anchor Behavior During Zoom”

zoomAnchorMode controls which point in the viewport stays stable when switching levels:

  • 'pointer': keeps the date under the mouse pointer fixed.
  • 'center': keeps the center date fixed.
  • 'start': keeps the left edge date fixed.
grid.gantt = {
  // ...required project fields
  zoom: {
    zoomAnchorMode: 'center',
  },
};

Timeline Overlays

Section titled “Timeline Overlays”

Timeline visuals are configured in visuals.

grid.gantt = {
  // ...required project fields
  visuals: {
    projectLineDate: '2026-04-06',
    timeRanges: [
      {
        id: 'sprint-1',
        startDate: '2026-04-06',
        endDate: '2026-04-17',
        label: 'Sprint 1',
        color: '#5B8DEF',
      },
      {
        id: 'freeze',
        startDate: '2026-05-18',
        endDate: '2026-05-22',
        label: 'Code Freeze',
        color: '#F59E0B',
      },
    ],
    shadeNonWorkingTime: true,
  },
};