Created by Thomas Zimmermann, last modified on Nov 18, 2021

It is possible to display multiple GanttCharts and it is also possible to keep their layouts (same table width, same timeline) and their scrolling and zooming behaviour in sync. The screenshot below shows a multiple GanttCharts context.

Synchronisation of the Timeline

To keep the timeline in sync with two or more GanttCharts we have to use a single instance of the timeline and share it with the GanttCharts we desire to link. Any timeline-related action like zooming, selecting a time interval using lasso, or moving to the left or to the right will have an impact on all linked GanttCharts.

An example implementation could use the following approach :

example.component.ts
export class ExampleComponent extends TransactionalAbstractComponent {

  // Higher level shared Timeline.

  readonly timeline: Timeline = new Timeline(this._injector);

  constructor(private readonly _appTransactionalService: AppTransactionalService,
              private readonly _injector: Injector) {
    super(_appTransactionalService);
  }

}
example.component.html
<div class="gantts-container">

  <first-gantt class="first-gantt"
               [timeline]="timeline"> <!-- Pass the Timeline -->
  </first-gantt>

  <second-gantt class="second-gantt"
                [timeline]="timeline">
  </second-gantt>

</div>

The two related GanttChart components would need to set their timeline on the same object.

An example implementation could be :

first-gantt.component.ts / second-gantt.component.ts
// Timeline
private _timeline: Timeline;

@Input()
set timeline(timeline: Timeline) {
  this._timeline = timeline;
  this.gantt.setTimeline(this._timeline);
  this.gantt.getGraphics().setTimeline(this._timeline);
  this._timeline.showTemporalUnit(ChronoUnit.DAYS, 50);
}