Highcharts Y轴分类未与轴线对齐问题：如何使首个分类紧贴X轴线

嗨，我完全理解你的需求——就是想让Y轴上的第一个分类「Low」直接对齐到X轴线，没有半点儿多余的间距对吧？这在Highcharts的分类轴里是个挺常见的小需求，默认框架会在轴的两端预留一些空间，咱们只要调整几个配置项就能轻松解决！

你需要给带有「Severity」分类的第一个Y轴，添加几个关键配置：

• startOnTick: false：关闭“强制从刻度线起始”的默认行为，避免轴的起始端自动留白
• min: 0：明确设置轴的最小值为第一个分类的索引（Highcharts分类轴的索引从0开始，刚好对应「Low」）
• 如果你也不想让最后一个分类「High」顶端留空，还可以加上endOnTick: false和max: 2（对应第三个分类的索引）

下面是修改后的完整代码，我还顺便修正了你代码里的一个拼写小错误：「Meduim」→「Medium」😉

修改后的JavaScript代码 #

Highcharts.chart("container", {
  chart: {
    type: "line",
  },
  title: {
    text: "Monthly Data",
  },
  xAxis: {},
  yAxis: [{
      opposite: true,
      categories: ["Low", "Medium", "High"],
      title: {
        text: "Severity",
      },
      startOnTick: false, // 新增：关闭起始端刻度留白
      min: 0, // 新增：绑定到第一个分类的索引
      endOnTick: false, // 可选：关闭末端刻度留白（按需添加）
      max: 2 // 可选：绑定到最后一个分类的索引（按需添加）
    },
    {
      title: {
        text: "Measurment",
      },
    },
  ],
  series: [{
      yAxis: 0,
      name: "Severity",
      data: [0, 1, 0, 1, 0, 0, 0, 1, 1],
    },
    {
      yAxis: 1,
      name: "Measurment",
      data: [0, 5, 20, 5, 2, 5, 1],
    },
  ],
  tooltip: {
    shared: true,
    valueSuffix: "",
  },
})

HTML代码（无需修改） #

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 300px; margin-top: 1em"></div>
<button id="button">Export chart</button>

简单说下原理：
startOnTick: false 会让Highcharts放弃默认的“轴必须从刻度线开始”的规则，配合min: 0就能让第一个分类「Low」精准对齐到X轴线的位置，完全消除多余的padding。如果只需要处理起始端，那只保留startOnTick: false和min: 0就足够啦！

备注：内容来源于stack exchange，提问作者nullException