Time Axis

The Time Axis is a crucial component that provides temporal navigation and visualization in your Gantt chart. This guide explains how to configure and customize the time axis effectively.

Time Units and Precision

The time axis supports multiple precision levels:

type TimeUnit = 'hour' | 'day' | 'date' | 'week' | 'month';

<g-gantt-chart
  :precision="'day'"
  :enable-minutes="false"
  :date-format="'YYYY-MM-DD HH:mm'"
/>

Precision and Zoom

The precision prop defines the finest time unit of the chart, not a fixed one. While zooming:

• Zooming in stops at the configured precision (e.g. with precision="day" the chart never switches to hour).
• Zooming out past the minimum zoom level switches to coarser units (day → week → month).
• Every unit switch emits the precision-change event with { precision, previousPrecision }.

<g-gantt-chart
  :precision="'day'"
  @precision-change="({ precision, previousPrecision }) => console.log(previousPrecision, '→', precision)"
/>

To keep the time unit fixed and let zoom only change the unit width, set fixed-precision:

<g-gantt-chart :precision="'day'" :fixed-precision="true" />

Format Patterns

Common date format patterns:

const formats = {
  hour: 'HH:mm',
  day: 'DD MMM',
  week: 'WW',
  month: 'MMMM YYYY'
};

Time Scale Customization

You can customize the time scale appearance:

<g-gantt-chart
  :day-option-label="['day', 'name', 'doy']"
  :highlighted-hours="[9, 10, 11, 12, 13, 14, 15, 16, 17]"
  :highlighted-days-in-week="[0, 6]"  
  :highlighted-days-in-month="[1, 15, 30]"
  :highlighted-months="[0, 6]"  
  :highlighted-date-ranges="[{ start: '2024-01-01', end: '2024-01-05', color: '#ff0000' }]"
  :holiday-highlight="'US'"
  :locale="'en'"
/>

Events Axis

The Gantt chart supports a third axis specifically for displaying timeline events such as releases, milestones, or any time-bound occurrences. This events axis appears below the regular time units and provides visual cues for important dates or periods.

Configuring Events

Events are defined using the timeaxisEvents property, which accepts an array of TimeaxisEvent objects:

const events = [
  {
    id: '1',
    label: 'Release v1.0',
    startDate: '2024-01-15',
    endDate: '2024-01-15',
    backgroundColor: '#42b883',
    color: '#ffffff',
    description: 'Product release v1.0'
  },
  {
    id: '2',
    label: 'Maintenance',
    startDate: '2024-02-10',
    endDate: '2024-02-12',
    backgroundColor: '#e67e22',
    description: 'Scheduled maintenance'
  }
]