ApexCharts.js：如何设置X/Y轴宽度？

你要调整的是水平条形图的Y轴（分类标签所在的轴）宽度，ApexCharts提供了直接配置轴宽度的属性，以下是具体实现方法：

核心配置 #

在图表的options中添加yaxis配置项，通过width属性设置轴的固定宽度（单位：像素）：

yaxis: {
  width: 250 // 根据需求调整数值
}

如果是垂直条形图需要调整X轴宽度，对应使用xaxis.width属性即可。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Grafik Batang dengan ApexCharts.js</title>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts-zoom"></script>
</head>
<body>
    <div class="row">
        <div class="container" style="min-width: 500px">
            <div id="chart"></div>
        </div>
    </div>
    <script>
        var options = {
            series: [{
                data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
            }],
            chart: {
                type: 'bar',
                height: 350
            },
            plotOptions: {
                bar: {
                    borderRadius: 10,
                    horizontal: true,
                }
            },
            dataLabels: {
                enabled: false
            },
            xaxis: {
                categories: ['South Korea asdsad asd asdas asdasda asda', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan','United States', 'China', 'Germany'],
            },
            // 新增Y轴宽度配置
            yaxis: {
                width: 250
            }
        };
        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();
    </script>
</body>
</html>

额外优化建议 #

如果长标签仍然显示不全，可以配合调整Y轴标签的换行或字体大小：

yaxis: {
  width: 250,
  labels: {
    style: {
      fontSize: '12px'
    },
    wrapText: true,
    maxWidth: 230 // 标签最大宽度，超出自动换行
  }
}

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