如何为ApexCharts的Y轴添加背景色？

问题原因 #

ApexCharts 官方的 yaxis.labels.style 配置项原生不支持 backgroundColor 属性，你在这里添加的背景色配置不会被组件识别渲染。

解决方法 #

有两种常用方案可以实现你要的Y轴标签带灰色背景的效果：

方案一：使用自定义HTML标签渲染标签

开启Y轴标签的HTML解析支持，通过formatter函数给标签内容包裹自定义样式的span标签，修改后的yaxis配置如下：

yaxis: {
  labels: {
    // 开启HTML内容解析支持
    html: true,
    formatter: function (val) {
      return `<span style="background-color: #e7e7e7; padding: 2px 6px; border-radius: 3px; color: #7286EA; font-size: 12px; font-weight: 400; font-family: Open Sans;">${val}</span>`
    }
  }
}

原来写在yaxis.labels.style里的字体、颜色等样式都可以直接放到span的行内样式里，效果和你预期的一致。

方案二：直接通过CSS覆盖组件样式

你也可以通过全局CSS修改ApexCharts生成的Y轴标签元素的样式，直接添加如下CSS代码即可：

.apexcharts-yaxis-label {
  background-color: #e7e7e7 !important;
  padding: 2px 6px !important;
  border-radius: 3px;
}

这里加!important是为了覆盖组件默认生成的行内样式，保证自定义样式生效。

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