A graphics header should be displayed in place of the timeline when creating a Multiple GanttCharts context.

For example, when you are sharing your timeline between two GanttCharts you should use the usual timeline location to create a separation so one can distinguish a GanttChart from another.

The above HTML Template file would look like this:

Multiple Gantt HTML example
<div class="gantts-container">

  <first-gantt class="first-gantt"

  <!-- Graphics header -->

  <div class="gantt-header">Gantt header</div>

  <second-gantt class="second-gantt"


And the associated SCSS:

Multiple Gantt scss example
dual-gantt {

  display: block;
  height: 100%;
  position: relative;

  .gantts-container {

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;

    .first-gantt {
      flex: 1;

	.gantt-header {
      height: 50px;
      background: gray;
      border: solid 3px red;

    .second-gantt {
      flex: 1;