ApexCharts 3折线图X轴首个标签默认加粗问题及关闭方法咨询

嗨，这个问题我刚好碰到过，来给你捋一捋～

首先，你观察得很仔细：ApexCharts默认会把X轴的第一个和最后一个标签设为加粗，目的是强调坐标轴的起止范围，所以“1 May 2025”加粗确实是框架的默认行为。

想要关掉这个效果很简单，只需要在你的xaxis配置里，给labels加上style属性，手动指定fontWeight为normal（正常字重）就行。

修改后的关键配置片段 #

你只需要把现有代码里的xaxis部分改成下面这样：

xaxis: {
  type: 'datetime',
  labels: {
    show: true,
    format: 'd MMM yy',
    // 新增这部分配置，关闭默认加粗
    style: {
      fontWeight: 'normal'
    }
  },
  tickPlacement: 'on'
}

完整的修改后chartOptions参考 #

为了方便你直接替换，我把整个更新后的chartOptions贴出来：

chartOptions: {
  colors: ["blue", "green"], // set tooltip color by Series
  chart: {
    id: 'basic-line',
    type: 'line', // line or area
    fontFamily: "Tahoma",
  },
  theme: {
    mode: 'light',
    palette: 'palette5',
  },
  legend: {
    position: 'top',
    fontFamily: "Georgia",
    offsetY: -25,
    markers: {
      fillColors: ["blue", "green"],
    }
  },
  xaxis: {
    type: 'datetime',
    labels: {
      show: true,
      format: 'd MMM yy',
      // 新增样式配置，关闭默认加粗
      style: {
        fontWeight: 'normal'
      }
    },
    tickPlacement: 'on'
  },
  yaxis: {
    max: 60,
    title: { text: "BMI" }
  },
  title: {
    text: "Title of my Line Chart !!",
    align: 'center',
    offsetY: 10,
    style: {
      fontSize: '22px',
      fontWeight: 'bold',
      fontFamily: "Georgia",
      color: '#117a65'
    },
  },
  subtitle: {
    text: "Amazing right?",
    align: 'center',
    offsetY: 40,
    style: {
      fontSize: '18px',
      fontWeight: 'normal',
      fontFamily: "Georgia",
      color: '#2980b9'
    },
  },
  markers: {
    size: [5, 5],
    colors: ["blue", "green"],
    strokeColors: 'yellow'
  },
  stroke: {
    curve: 'smooth',
    width: 3,
    colors: ["blue", "green"],
    dashArray: 5
  }
}

补充说明 #

其实你可以留意一下，默认情况下X轴的最后一个标签（也就是“10 May 2025”）也是加粗的，只是你没注意到～ 上面的配置会把所有X轴标签都改成正常字重，如果你有特殊需求想单独调整某一个标签的样式，ApexCharts没有直接的配置项，不过一般场景下统一设置正常字重就足够解决问题啦。

内容来源于stack exchange