Apexcharts分组柱状图能否从指定基准值（非0）绘制？

Apexcharts没有内置类似amCharts的base value配置，但可以通过数据转换+Y轴自定义格式化实现需求，核心思路是把柱子的高度表示为与基准值的差值，再让Y轴刻度显示实际数值：

具体步骤 #

• 数据预处理：将每个系列的原始数据减去你的基准值（比如100），这样柱子的高度就对应相对于基准值的变化量
• Y轴刻度自定义：在Y轴配置中，用formatter把刻度值加回基准值，让界面显示的是实际数值而非差值
• Tooltip优化：同样在tooltip的formatter中，把差值转换回实际数值，避免用户看到处理后的数据

示例代码（分组柱状图） #

// 基准值
const baseValue = 100;

// 原始数据
const originalData = {
  categories: ['Q1', 'Q2', 'Q3', 'Q4'],
  series: [
    { name: 'Series A', data: [120, 90, 130, 110] },
    { name: 'Series B', data: [110, 105, 125, 95] }
  ]
};

// 转换数据：原始值 - 基准值
const transformedSeries = originalData.series.map(series => ({
  ...series,
  data: series.data.map(val => val - baseValue)
}));

// 初始化图表
var options = {
  chart: {
    type: 'bar',
    height: 350
  },
  plotOptions: {
    bar: {
      horizontal: false,
      columnWidth: '55%',
      endingShape: 'rounded'
    }
  },
  dataLabels: {
    enabled: false
  },
  yaxis: {
    // Y轴刻度显示实际值：刻度值 + 基准值
    labels: {
      formatter: function(val) {
        return val + baseValue;
      }
    },
    // 可选：设置Y轴范围，避免自动刻度出现不必要的空白
    min: Math.min(...transformedSeries.flatMap(s => s.data)) - 10,
    max: Math.max(...transformedSeries.flatMap(s => s.data)) + 10
  },
  tooltip: {
    // Tooltip显示实际值：差值 + 基准值
    y: {
      formatter: function(val) {
        return val + baseValue;
      }
    }
  },
  series: transformedSeries,
  xaxis: {
    categories: originalData.categories
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

关键说明 #

• 转换后的数据如果是负数，柱子会向下延伸（低于基准值100），正数则向上延伸，完美展示相对于基准值的变化趋势
• Y轴的min和max可以根据转换后的数据动态计算，保证图表布局紧凑
• 所有用户可见的数值（刻度、tooltip）都会被转换回实际值，不会暴露处理逻辑

内容的提问来源于stack exchange，提问作者Marek Wilczyński