Highcharts Gantt navigator control1

by b_g_v

HTML

<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
<script src="https://code.highcharts.com/gantt/modules/exporting.js"></script>
<script src="https://code.highcharts.com/gantt/modules/accessibility.js"></script>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
        crossorigin="anonymous"></script>

<div id="container"></div>

CSS

#container{
  height: calc(100vh - 185px);
  min-height: 800px;
  border: solid red 2px;
  overflow: auto;
}
/**/
.highcharts-tooltip {
    z-index: 99999 !important;
}

.highcharts-tooltip-container {
    z-index: 99999 !important;
}
.highcharts-xaxis-labels,
.highcharts-yaxis-labels {
    z-index: 1000 !important;
}

.highcharts-xaxis-labels text,
.highcharts-yaxis-labels text {
    z-index: 1000 !important;
}
.highcharts-gantt-series .highcharts-tooltip {
    z-index: 100000 !important;
}
/*
.highcharts-container:hover .highcharts-xaxis-labels {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}
*/

JavaScript

var dataset = [];
let maxItems = 150;
for (let i = 0; i < maxItems; i++) {
  item={
          name: 'Project Work' + i,
          start: Date.UTC(2024, 1, 16, 10, 30),
          end: Date.UTC(2024, 1, 16, 17, 0),
          y: i
       },
  dataset.push(item);
}

/*
dataset = [
        {
          name: 'Morning Meeting',
          start: Date.UTC(2024, 1, 15, 9, 0),
          end: Date.UTC(2024, 1, 15, 10, 0),
          y: 0
        },
        {
          name: 'Project Work1',
          start: Date.UTC(2024, 1, 16, 10, 30),
          end: Date.UTC(2024, 1, 16, 17, 0),
          y: 1
        },
        {
          name: 'Project Work2',
          start: Date.UTC(2024, 1, 17, 10, 30),
          end: Date.UTC(2024, 1, 17, 17, 0),
          y: 1
        },
        {
          name: 'Project Work3',
          start: Date.UTC(2024, 1, 18, 10, 30),
          end: Date.UTC(2024, 1, 18, 17, 0),
          y: 1
        }
      ];
*/
/*
dataset = [
        {
          name: 'Morning Meeting',
          start: Date.UTC(2024, 1, 15, 9, 0),
          end: Date.UTC(2024, 1, 15, 10, 0),
          y: 0
        }
      ];
*/
const groupsNumber = dataset.length;

// Date utility functions
function formatDateToISO(date) {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
}

function parseISODate(dateString) {
    return Date(dateString);
    const [year, month, day] = dateString.split('-');
    return Date.UTC(parseInt(year), parseInt(month) - 1, parseInt(day));
}


// Gantt chart configuration
const chart = Highcharts.ganttChart('container', {
    //title: {text: 'Project Timeline'},
    credits: {
      enabled: false
    },

    chart: {
      marginTop: 200,
      marginBottom: -100,
      zoomType: 'x',
      height: 300,
      scrollablePlotArea: {
      ...