Skip to main content

Gantt Overview

Available in: All plans
Last updated: 26-Feb-2026

Overview

The Gantt chart is a fully interactive, canvas-rendered schedule visualization built into Kazinex. It supports bar styles, dependency lines, drag interactions, zoom controls, and a minimap — all powered by a custom rendering engine optimized for large schedules.

Access the Gantt by switching to Split or Gantt view using the view mode toggle in the toolbar.

Bar Styles

Every activity is drawn as a bar whose appearance is determined by bar style rules. Kazinex ships with 12 default bar styles that are applied in priority order — the first matching style wins.

Default Bar Styles

StyleColourWhen It AppliesVisible by Default
Normal TaskBlueAll activities (fallback)Yes
Critical TaskRedTotal float ≤ 0Yes
MilestonePurple diamondMilestone activitiesYes
SummaryDark, pointed endsWBS summary rowsYes
Level of EffortCyan, stripedLOE activitiesYes
ProgressDark overlayActivities with progress > 0%Yes
Constraint MarkerRose diamondActivities with constraintsYes
BaselineSlate greyAll activities (below main bar)No
ActualEmeraldAll activities (actual dates)No
Total FloatLime, stripedActivities with float > 0No
Late DatesAmber, dashedAll activities (late dates)No
Remaining WorkOrange, hollowActivities < 100% completeNo

Styles marked "No" are hidden by default but can be enabled in the Bar Styles dialog.

Bar Shapes

Each bar consists of a start cap, body, and end cap, each with its own shape:

End Shapes (start and end caps):

ShapeDescription
FlatStraight vertical edge
PointedArrow/chevron pointing outward
RoundedSemicircle cap
FencedPicket fence style (P6-style for LOE)
NotchedV-notch
DiamondDiamond/lozenge (milestones)
NoneNo visible cap

Body Shapes:

ShapeDescription
SolidFilled rectangle
HollowOutline only
StripedDiagonal hatch lines
DashedDashed outline
DottedDotted outline
GradientGradient fill (default for tasks)
NeckedPinched at progress point (P6-style)

Dependencies

Relationship lines connect activities to show scheduling logic. Kazinex supports all four Primavera relationship types:

TypeMeaningConnection
FS (Finish-to-Start)Successor starts after predecessor finishesRight edge → Left edge
SS (Start-to-Start)Both start togetherLeft edge → Left edge
FF (Finish-to-Finish)Both finish togetherRight edge → Right edge
SF (Start-to-Finish)Predecessor start drives successor finishLeft edge → Right edge

Routing

Dependency lines use orthogonal routing (right-angle turns only) to avoid crossing through bars:

  • Lines exit from the bar edge with a short horizontal stub.
  • Vertical segments route through channels between rows.
  • Multiple parallel lines spread across 3 lanes with 10 px spacing to avoid overlapping.
  • Same-row FS relationships route through the row's top gutter.
  • Each line ends with an arrowhead pointing toward the successor.

Critical Path Dependencies

When both the predecessor and successor are on the critical path, the dependency line is coloured red for easy identification.

Zoom

Six zoom levels let you see your schedule at different time granularities:

LevelViewPixels/Day
HourIndividual hours within days480
DayDaily view30
WeekWeekly view (default)15
MonthMonthly view3
QuarterQuarterly view1
YearYearly overview0.25
  • Use Ctrl+Scroll (or pinch on touch devices) to zoom in and out.
  • Right-click the Gantt background for Zoom In, Zoom Out, and Fit to Window options.

Pan

Click and drag the Gantt background to pan horizontally and vertically. The grid and Gantt share a synchronized vertical scroll in Split mode.

Minimap

A small minimap (200 × 40 px) in the corner shows the full project date range as a grey bar with your current viewport highlighted in blue. Click or drag on the minimap to quickly navigate to any part of the schedule. Date labels in the corners show the project start and end dates.

Timeline Header

The timeline header runs along the top of the Gantt with two tiers:

TierPurpose
Top tierCoarser time units (years, quarters, months)
Bottom tierFiner time units (months, weeks, days)

Five pre-configured tier modes are available:

ModeTop TierBottom TierBest For
Year / QuarterYearQuarterMulti-year programmes
Year / MonthYearMonth1–3 year projects (default)
Quarter / MonthQuarterMonth6–18 month programmes
Month / WeekMonthWeek3–12 month projects
Week / DayWeekDay1–3 month lookahead

Configure the tier mode in the Timescale dialog.

Data Date Line

A vertical data date line marks the project status date (data date) on the Gantt:

  • Default colour: red, 2 px wide
  • A small triangle indicator at the top makes it easy to spot.
  • Hover to see a tooltip with the exact date.
  • Click to pin the tooltip until you dismiss it (press Escape or click elsewhere).

Configure the data date display (colour, width, style, label) in the Chart Options dialog.

Drag Interactions

In Editor Mode, three drag interactions are available:

Move a Bar

Drag an activity bar left or right to change its start date. The bar snaps to the nearest day boundary by default.

Resize a Bar

Drag the left or right edge of a bar to change its start or finish date independently.

Drag from one bar's edge to another bar's edge to create a new relationship. A rubber-band line follows your cursor, with green anchor circles at the source and target. The relationship type (FS, SS, FF, SF) is determined by which edges you connect.

All drag operations support snap-to-grid at hour, day, or week granularity.

Right-Click Context Menus

Bar Context Menu

Right-click an activity bar for:

  • View Activity Details — Open the details panel for this activity
  • Show Critical Path — Highlight the critical path
  • Show Total Float — Display float information
  • Filter to This Activity — Apply a filter showing only this activity
  • Zoom to Fit This Bar — Zoom and pan to centre on this bar
  • Find in Grid — Scroll the grid to this activity's row

Background Context Menu

Right-click the Gantt background for:

Settings Dialogs

Bar Styles Dialog

Customize how bars look on the Gantt:

  • Add, clone, or delete bar styles
  • Drag to reorder style priority (first match wins)
  • Toggle visibility per style
  • Per-style settings across 4 tabs:
    • General — Name, row position, filter condition, height (10–100%)
    • Shape & Colour — Start shape, body shape, end shape with colour pickers
    • Date Mapping — Which date fields drive the bar (early, late, actual, baseline, planned)
    • Labels — Add text labels at left, right, top, or bottom of the bar (activity name, dates, float, etc.)
  • Click Reset to Defaults to restore the factory bar style set

Chart Options Dialog

Control the Gantt's visual behaviour across 7 tabs:

TabKey Settings
DisplayShow/hide dependencies, baseline bars, critical path, float bars, progress labels, milestones, summary bars. Color-by mode (criticality, status, calendar, activity code).
GeneralGrid lines (column/row), line colour and width, weekend/holiday/non-work shading with colours, chart background.
Data DateShow/hide, line colour, width (1–6 px), style (solid/dashed/dotted), label font size.
Sight LinesUp to 3 configurable vertical marker lines with custom label, date, colour, and style.
Progress LineShow/hide, on-track colour, behind-schedule colour, date labels.
Collapsed BarsHow very short bars appear: threshold, height, colour.
DependenciesLine and critical-line colour, line width (0.5–4 px).

Timescale Dialog

Configure the timeline header:

SectionSettings
Timescale FormatNumber of header rows (2 or 3), tier mode preset
Zoom & DensityZoom level, pixels per day (0.25–50)
Unit OverridesOverride major/minor unit independently
Calendar OptionsShow weekends, enable fiscal year display, fiscal year start month

Next Steps