ApexCharts如何修改tooltip格式 移除points及更改区域/折线颜色

移除tooltip中的「points」字样 #

你当前tooltip显示points是因为y轴格式化函数中主动对返回值拼接了+ " points"字符串，删除该拼接逻辑即可，修改后的tooltip配置如下：

tooltip: {
  shared: false,
  intersect: false,
  y: {
    formatter: function (y) {
      if(typeof y !== "undefined") {
        return y.toFixed(0);
      }
      return y;
    }
  }
}

修改折线/区域填充颜色 #

ApexCharts原生支持自定义折线、区域填充颜色，配置方式如下：

• 全局颜色配置：在图表配置项顶层添加colors数组，按系列顺序传入对应色值即可，单系列图表直接传一个色值即可生效
• 折线样式配置：通过stroke配置项可单独控制折线宽度、颜色
• 区域填充配置：通过fill配置项可控制填充类型（纯色/渐变/图案）、填充色、透明度

完整参考配置：

const chartOptions = {
  // 按系列顺序配置主色，第一个值对应第一个系列的折线、填充基础色
  colors: ['#165DFF', '#FF7D00', '#00B42A'],
  chart: {
    type: 'area',
    height: 350
  },
  // 折线样式配置
  stroke: {
    width: 2,
    // 如需单独指定折线色可在此传数组，和colors保持一致时可省略
    colors: ['#165DFF', '#FF7D00', '#00B42A']
  },
  // 区域填充配置
  fill: {
    type: 'gradient', // 可选值：solid/gradient/pattern
    opacity: 0.2, // 填充透明度，取值0-1
    // 渐变填充可自定义渐变方向、色阶，纯色填充直接指定colors即可
  },
  series: [/* 你的系列数据 */],
  // 上述修改完成的tooltip配置
  tooltip: {
    shared: false,
    intersect: false,
    y: {
      formatter: function (y) {
        if(typeof y !== "undefined") {
          return y.toFixed(0);
        }
        return y;
      }
    }
  }
}

如果需要给单个系列单独配置特殊样式，在对应series的配置项里单独指定color、fill、stroke属性即可，优先级高于全局配置。

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