Highcharts gantt row hight too large and not showing all rows

I create a simple Highcharts gantt chart but the style is not as expected. The height of the row is way too high. Thus, of the 4 rows only 1.5 rows are shown. Additionally, the bars of the row are not vertically centered with respect to the row. Can someone please give me a hint what I am missing. Thanks.

I created a Fiddle for testing: Link to Fiddle

My config looks like this:

<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
<div id="container" style="height: 350px; min-width: 310px;"></div>

    Highcharts.ganttChart('container', {
           "credits":{
          "enabled":true,
          "href":"https://www.google.com",
          "text":"My credit"
       },
       "title":{
          "text":""
       },
       "series":[
          {
             "name":"Process 1",
             "color":"#FF0000",
             "data":[
                {
                   "start":1727224500000,
                   "end":1727227500000,
                   "name":"Process 1"
                },
                {
                   "start":1727232900000,
                   "end":1727288700000,
                   "name":"Process 1"
                },
                ...
             ],
             "pointWidth":30
          },
          {
             "name":"Process 2",
             "color":"#00FF00",
             "data":[
                {
                   "start":1727161200000,
                   "end":1727168400000,
                   "name":"Process 2"
                },
                {
                   "start":1727247600000,
                   "end":1727251200000,
                   "name":"Process 2"
                },
                ...
             ],
             "pointWidth":30
          },
          {
             "name":"Process 3",
             "color":"#0000FF",
             "data":[
                {
                   "start":1727184000000,
                   "end":1727184900000,
                   "name":"Process 3"
                },
                {
                   "start":1727210700000,
                   "end":1727211600000,
                   "name":"Process 3"
                },
                ...
             ],
             "pointWidth":30
          },
          {
             "name":"Process 4",
             "color":"#00FFFF",
             "data":[
                {
                   "start":1728108000000,
                   "end":1728152400000,
                   "name":"Process 4"
                }
             ],
             "pointWidth":10
          }
       ],
       "xAxis":{
          "currentDateIndicator":true,
          "min":1727136000000,
          "max":1728431999000,
          "grid":{
             "enabled":true
          },
          "gridLineWidth":1
       },
       "yAxis":{
          "title":"",
          "reversed":true,
          "uniqueNames":true,
          "grid":{
             "enabled":true
          }
       },
       "tooltip":{
          "pointFormat":"<span>{point.name}</span><br/>Start: {point.start:%Y-%m-%d %H:%M}<br/>Ende: {point.end:%Y-%m-%d %H:%M}"
       }
    });

The most straight-forward answer would be to combine all of your data into a single series, since with multiple series and uniqueNames: true, it starts grouping them vertically: https://github.com/highcharts/highcharts/issues/11796#issuecomment-963625962.

You can also set the chart.height value to match the container's height or adjust yAxis.staticScale in order to controll the rows height.

yAxis: {
    uniqueNames: true,
    staticScale: 10
}

References:
https://api.highcharts.com/gantt/chart.height
https://api.highcharts.com/gantt/yAxis.staticScale