如何设置ApexCharts热力图的单元格边框？

之前添加的grid配置仅作用于图表背景的坐标轴网格参考线，和热力图渲染的单元格元素完全独立，因此配置不生效，可根据自身场景选择以下方案实现：

方案1：原生配置实现（推荐） #

直接在图表配置项中添加stroke相关属性即可为所有热力图单元格添加边框，参考配置如下：

{
  // 原有chart、series、xaxis、yaxis等配置保持不变
  plotOptions: {
    heatmap: {
      // 原有热力图配置（如colorScale、数据标签配置等）保持不变
      borderRadius: 0, // 需要直角单元格设为0即可，圆角效果可按需调整数值
    }
  },
  stroke: {
    show: true,
    width: 1, // 边框宽度可根据视觉需求自行调整
    colors: ['#90A4AE'] // 目标边框色
  }
}

配置生效后边框会和单元格完全贴合，相邻单元格共用同一条边框，不会出现双边框问题，单元格区分度提升明显。

方案2：CSS样式实现（全版本兼容） #

若使用的ApexCharts版本较低，原生配置不生效，可直接通过CSS选中热力图对应的SVG矩形元素添加边框，无需修改图表实例配置：

.apexcharts-heatmap-rect {
  stroke: #90A4AE;
  stroke-width: 1px;
}

该方案无版本限制，适配所有ApexCharts发行版，适合不方便升级依赖的场景。

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