Highcharts甘特图行高过大，无法完整显示全部行且任务条未居中

我创建了一个简单的Highcharts甘特图，但样式不符合预期：行高过高，导致4行内容仅能显示1.5行；此外，行内的任务条未与行垂直居中。烦请指点我遗漏了哪些配置，谢谢。

核心配置调整方案 #

• 解决行高过高、内容显示不全：

  1. 在yAxis配置中添加rowHeight属性，直接指定每行的高度（示例设为40），替代默认的自动计算逻辑；同时设置minPadding: 0和maxPadding: 0，减少y轴上下的留白空间。
  2. 调整series中的pointWidth值，使其小于等于rowHeight，避免任务条尺寸过大撑高行高。

• 解决任务条垂直居中：
  在每个series配置中添加pointPlacement: 'middle'，让任务条在对应行内自动垂直居中对齐。

修改后的完整配置代码 #

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

<script>
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":25,
            "pointPlacement": "middle"
        },
        {
            "name":"Process 2",
            "color":"#00FF00",
            "data":[
                {
                    "start":1727161200000,
                    "end":1727168400000,
                    "name":"Process 2"
                },
                {
                    "start":1727247600000,
                    "end":1727251200000,
                    "name":"Process 2"
                }
            ],
            "pointWidth":25,
            "pointPlacement": "middle"
        },
        {
            "name":"Process 3",
            "color":"#0000FF",
            "data":[
                {
                    "start":1727184000000,
                    "end":1727184900000,
                    "name":"Process 3"
                },
                {
                    "start":1727210700000,
                    "end":1727211600000,
                    "name":"Process 3"
                }
            ],
            "pointWidth":25,
            "pointPlacement": "middle"
        },
        {
            "name":"Process 4",
            "color":"#00FFFF",
            "data":[
                {
                    "start":1728108000000,
                    "end":1728152400000,
                    "name":"Process 4"
                }
            ],
            "pointWidth":25,
            "pointPlacement": "middle"
        }
    ],
    "xAxis":{
        "currentDateIndicator":true,
        "min":1727136000000,
        "max":1728431999000,
        "grid":{
            "enabled":true
        },
        "gridLineWidth":1
    },
    "yAxis":{
        "title":"",
        "reversed":true,
        "uniqueNames":true,
        "grid":{
            "enabled":true
        },
        "rowHeight": 40,
        "minPadding": 0,
        "maxPadding": 0
    },
    "tooltip":{
        "pointFormat":"<span>{point.name}</span><br/>Start: {point.start:%Y-%m-%d %H:%M}<br/>Ende: {point.end:%Y-%m-%d %H:%M}"
    }
});
</script>

内容的提问来源于stack exchange，提问作者Felix H