如何在ApexCharts中单独修改某一个x轴标签的font-size？

ApexCharts官方没有提供逐个配置x轴标签fontSize的参数，可通过以下两种方式实现需求： #

方法1：CSS定向匹配修改 #

你现有配置中已经为所有x轴标签配置了统一的cssClass apexcharts-xaxis-label，标签在DOM中按categories的顺序排列，可直接用CSS伪类选中对应位置的标签修改样式：

/* 示例：修改周三（第三个标签，:nth-child索引从1开始）的字体大小 */
.apexcharts-xaxis-label:nth-child(3) tspan {
  font-size: 16px !important;
  /* 可额外添加加粗、变色等效果强化展示 */
  font-weight: 700;
}

该方法适合固定位置高亮的场景，无需修改JS配置。 #

方法2：JS动态修改（适配按当前日期高亮场景） #

如果需要根据当前日期自动匹配对应的星期标签，可在图表的渲染和更新事件回调中动态修改DOM样式：

1. 首先计算当前日期对应的星期索引：

// new Date().getDay()返回值：0为周日，1为周一...6为周六
// 转换为和categories匹配的索引（Mon对应0，Sun对应6）
const todayWeekIndex = new Date().getDay() === 0 ? 6 : new Date().getDay() - 1;

2. 调整图表配置，新增事件监听：

const chartOptions = {
  // 你原有的其他配置保持不变
  xaxis: {
    categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    position: 'bottom',
    labels: {
      show: true,
      style: {
        colors: ['#53599A', '#53599A', '#53599A', '#53599A', '#53599A', '#53599A', '#53599A'],
        fontSize: '12px',
        fontFamily: 'IBM Plex Sans, sans-serif',
        cssClass: 'apexcharts-xaxis-label'
      }
    }
  },
  chart: {
    // 新增事件监听配置
    events: {
      // 图表首次渲染完成后执行
      rendered: function() {
        const xAxisLabels = document.querySelectorAll('.apexcharts-xaxis-label tspan');
        if(xAxisLabels[todayWeekIndex]) {
          xAxisLabels[todayWeekIndex].style.fontSize = '16px';
          xAxisLabels[todayWeekIndex].style.fontWeight = 'bold';
        }
      },
      // 图表数据/配置更新后重新执行，避免样式被覆盖
      updated: function() {
        const xAxisLabels = document.querySelectorAll('.apexcharts-xaxis-label tspan');
        if(xAxisLabels[todayWeekIndex]) {
          xAxisLabels[todayWeekIndex].style.fontSize = '16px';
          xAxisLabels[todayWeekIndex].style.fontWeight = 'bold';
        }
      }
    }
  }
}

注意事项 #

• CSS方法要加!important覆盖ApexCharts默认的内联样式优先级
• JS方法直接修改元素内联样式，优先级更高，不会被图表默认样式覆盖

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