ApexCharts横轴刻度缺失问题：固定0-12范围时跳过刻度

需求与问题 #

需要制作横向柱状图：

• Y轴展示items数量，标签格式为N items
• X轴代表月份，固定在0-12范围

当前配置代码：

var options = {
        series: [{ data: [3,4,6,7,8.5] }],
        chart: { type: 'bar', height: 250 },
        plotOptions: {
          bar: { borderRadius: 4, horizontal: true }
        },
        dataLabels: { enabled: false },
        xaxis: {
            categories: [2,3,5,6,7],
            min: 0,
            max: 12,
        },
        yaxis: {
            labels: { formatter: function (val) { return val + ' items'; } },
        },
        title: {
            text: 'Chart title', floating: true, align: 'center',
            style: { color: '#444' }
          }
      };

遇到的异常：

• 设置X轴min:0、max:12后，刻度会跳过部分值（如9）
• 移除min/max后刻度显示正常，但无法固定0-12范围
• 设置tickAmount:12可临时解决，但设置13时会重复显示6刻度，而非预期的小数刻度

解决方法 #

这是ApexCharts自动刻度计算逻辑导致的，并非Bug，通过以下配置可解决：

显示完整整数刻度（0-12） #

修改X轴配置，同时指定tickAmount、开启forceNiceScale，确保刻度整齐无遗漏：

xaxis: {
    categories: [2,3,5,6,7],
    min: 0,
    max: 12,
    tickAmount: 13, // 0到12共13个整数刻度
    forceNiceScale: true,
    labels: {
        formatter: function(val) {
            return val.toFixed(0); // 强制显示整数
        }
    }
}

显示小数刻度（可选） #

若需要显示间隔更小的刻度（如0.5步长），调整tickAmount并修改格式化规则：

xaxis: {
    categories: [2,3,5,6,7],
    min: 0,
    max: 12,
    tickAmount: 25, // 0到12共25个刻度，步长0.5
    forceNiceScale: true,
    labels: {
        formatter: function(val) {
            return val.toFixed(1); // 显示一位小数
        }
    }
}

配置说明 #

• tickAmount：设置刻度总数，需与min/max范围匹配（比如0-12要显示所有整数，总数是13）
• forceNiceScale：强制图表使用均匀的刻度间距，避免自动优化导致的跳过或重复
• labels.formatter：自定义刻度显示格式，确保符合需求

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