Baselines (Planned vs Actual)

A baseline is the original planned schedule for a task. When baseline.enabled is true, ApexGantt renders a thin secondary bar directly below each task bar that has a baseline field. The gap between the actual bar and the baseline bar shows schedule variance at a glance.

Adding baselines to tasks

Attach a baseline object to any TaskInput. It requires two fields: start and end (the originally planned dates):

const tasks = [
  {
    id: 'task-1',
    name: 'Research Phase',
    startTime: '2024-03-01',
    endTime: '2024-03-20',     // actual end (slipped)
    progress: 100,
    baseline: {
      start: '2024-03-01',    // planned start
      end: '2024-03-10',      // planned end
    },
  },
  {
    id: 'task-2',
    name: 'Design',
    startTime: '2024-03-21',
    endTime: '2024-04-05',
    progress: 60,
    baseline: {
      start: '2024-03-11',
      end: '2024-03-31',
    },
  },
]

Enabling baseline rendering

Enable it once at the chart level with baseline.enabled: true:

const gantt = new ApexGantt(document.getElementById('chart'), {
  series: tasks,
  baseline: {
    enabled: true,
  },
})

Tasks that do not have a baseline field show no secondary bar. Tasks that do show a thin striped bar below the main bar.

BaselineOptions

Option	Type	Default	Description
enabled	boolean	false	Whether to render baseline bars
color	string	'#9E9E9E'	Primary bar color (fills solid when striped: false; paints the stripes when striped: true)
striped	boolean	true	Fill with diagonal stripes instead of a flat color
stripeColor	string	'#FFFFFF'	Color of the gaps between stripes
stripeWidth	number	3	Width of each stripe band in pixels
stripeAngle	number	45	Stripe angle in degrees

Customizing the baseline bar

const gantt = new ApexGantt(el, {
  series: tasks,
  baseline: {
    enabled: true,
    color: '#6366F1',        // indigo stripes
    striped: true,
    stripeColor: '#EEF2FF',  // light indigo gaps
    stripeWidth: 4,
    stripeAngle: 45,
  },
})

Solid baseline bar (no stripes)

baseline: {
  enabled: true,
  striped: false,
  color: '#94A3B8',   // flat slate color
},

Baseline tooltip

When a user hovers the baseline bar, a tooltip appears showing the planned start and end dates. The label strings come from locale.messages:

• baselineLabel defaults to 'Baseline:'
• startLabel defaults to 'Start:'
• endLabel defaults to 'End:'

Override them via locale.messages for localization:

const gantt = new ApexGantt(el, {
  series: tasks,
  baseline: { enabled: true },
  locale: {
    messages: {
      baselineLabel: 'Plan:',
      startLabel: 'From:',
      endLabel: 'To:',
    },
  },
})

Updating baselines at runtime

Call updateTask() to set or revise a task's baseline after the initial render — for example, when a project is re-baselined after a scope change:

gantt.updateTask('task-1', {
  baseline: {
    start: '2024-03-01',
    end: '2024-03-15',   // revised plan
  },
})

Call update({ series: newTasks }) to replace the full dataset when all baselines change.

React example

import { ApexGanttChart } from 'react-apexgantt'
import type { GanttUserOptions, TaskInput } from 'react-apexgantt'

const tasks: TaskInput[] = [
  {
    id: 'task-1',
    name: 'Research',
    startTime: '2024-03-01',
    endTime: '2024-03-20',
    progress: 100,
    baseline: { start: '2024-03-01', end: '2024-03-10' },
  },
  {
    id: 'task-2',
    name: 'Design',
    startTime: '2024-03-21',
    endTime: '2024-04-05',
    progress: 60,
    baseline: { start: '2024-03-11', end: '2024-03-31' },
  },
  {
    id: 'task-3',
    name: 'Development',
    startTime: '2024-04-06',
    endTime: '2024-05-10',
    progress: 20,
    baseline: { start: '2024-04-01', end: '2024-04-30' },
  },
]

const options: Omit<GanttUserOptions, 'series'> = {
  baseline: {
    enabled: true,
    color: '#6366F1',
    striped: true,
    stripeColor: '#EEF2FF',
  },
}

export default function BaselineGantt() {
  return (
    <ApexGanttChart
      tasks={tasks}
      options={options}
      viewMode="week"
      height="500px"
    />
  )
}

Vue example

<template>
  <ApexGanttChart :tasks="tasks" :options="ganttOptions" view-mode="week" height="500px" />
</template>

<script setup lang="ts">
import type { GanttUserOptions, TaskInput } from 'vue-apexgantt'

const tasks: TaskInput[] = [
  {
    id: 'task-1',
    name: 'Research',
    startTime: '2024-03-01',
    endTime: '2024-03-20',
    progress: 100,
    baseline: { start: '2024-03-01', end: '2024-03-10' },
  },
  {
    id: 'task-2',
    name: 'Design',
    startTime: '2024-03-21',
    endTime: '2024-04-05',
    progress: 60,
    baseline: { start: '2024-03-11', end: '2024-03-31' },
  },
]

const ganttOptions: Partial<GanttUserOptions> = {
  baseline: {
    enabled: true,
    color: '#6366F1',
    striped: true,
  },
}
</script>