ApexCharts柱状图仅显示X轴首尾标签的实现方法

你可以通过自定义X轴标签的格式化函数实现仅显示首尾两个标签的需求，具体配置如下：

针对分类型X轴（categories） #

如果X轴基于分类数组定义，使用xaxis.labels.formatter回调函数，通过索引判断是否为首尾项：

var chartOptions = {
  chart: {
    type: 'bar'
  },
  xaxis: {
    categories: ['0', '50000', '100000', '150000', '200000', '250000', '300000', '350000'],
    labels: {
      formatter: function(value, index) {
        const allCategories = this.w.globals.categories;
        // 仅返回第一个和最后一个标签文本，其余返回空
        return index === 0 || index === allCategories.length - 1 ? value : '';
      }
    }
  }
};

// 初始化并渲染图表
const chart = new ApexCharts(document.getElementById('your-chart-id'), chartOptions);
chart.render();

针对数值型X轴 #

如果X轴是数值类型，直接判断当前值是否等于最小值或最大值即可：

var chartOptions = {
  chart: {
    type: 'bar'
  },
  xaxis: {
    type: 'numeric',
    min: 0,
    max: 350000,
    labels: {
      formatter: function(value) {
        // 仅显示最小值0和最大值350000
        return value === 0 || value === 350000 ? value.toString() : '';
      }
    }
  }
};

const chart = new ApexCharts(document.getElementById('your-chart-id'), chartOptions);
chart.render();

配置完成后，X轴只会显示首尾两个标签，解决标签重叠问题。

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