如何配置ApexCharts折线图在工具提示中显示零值？

要让ApexCharts在工具提示中显示零值，核心是通过自定义tooltip格式化函数强制渲染零值，同时确保tooltip配置未过滤零值。以下是具体修改方案：

关键配置修改 #

在你的options对象中添加tooltip配置，覆盖默认的数值过滤逻辑：

tooltip: {
  enabled: true,
  // 自定义格式化函数，确保零值被显示
  formatter: function(val) {
    return val === 0 ? '0' : formatNumber(val);
  },
  // 不对系列做显示限制，确保所有数据点（包括零值）触发tooltip
  enabledOnSeries: undefined
}

如果你的图表启用了对数轴（logarithmic: true），由于对数轴无法处理零值，还需要在y轴的formatter中同步处理零值，避免渲染异常：

yaxis: {
  show: false,
  logarithmic: props.logarithmic,
  type: props.logarithmic ? "logarithmic" : "numeric",
  labels: {
    formatter: function (value) {
      // 对数轴下零值特殊处理
      if (props.logarithmic && value === 0) {
        return '0';
      }
      return formatNumber(value);
    }
  }
}

修改后的完整代码 #

class LineChartTiny extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      series: props?.series,
      labels: props?.labels ? props?.labels : [],
      options: {
        chart: {
          id: "line-chart",
          width: 50,
          height: 100,
          toolbar: {
            show: false
          },
          zoom: {
            enabled: false
          }
        },
        colors: ["#A3E0FF"],
        grid: {
          xaxis: {
            lines: {
              show: false
            }
          },
          yaxis: {
            lines: {
              show: false
            }
          }
        },
        legend: {
          show: false
        },
        xaxis: {
          show: true,
          categories: props?.labels ? props?.labels : [],
          labels: {
            show: false
          },
          tooltip: {
            enabled: false
          }
        },
        yaxis: {
          show: false,
          logarithmic: props.logarithmic,
          type: props.logarithmic ? "logarithmic" : "numeric",
          labels: {
            formatter: function (value) {
              // 对数轴下零值特殊处理
              if (props.logarithmic && value === 0) {
                return '0';
              }
              return formatNumber(value);
            }
          }
        },
        // 新增tooltip配置
        tooltip: {
          enabled: true,
          formatter: function(val) {
            return val === 0 ? '0' : formatNumber(val);
          },
          enabledOnSeries: undefined
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          curve: "straight"
        }
      }
    };
  }

  componentDidUpdate(prevProps) {
    if (prevProps.series !== this.props.series) {
      const { series } = this.props;
      this.setState({
        series: series?.length > 0 ? series : this?.state?.series
      });
    }
    if (prevProps.labels !== this.props.labels) {
      const { labels } = this.props;
      this.setState(
        {
          labels: labels ? labels : this.state.labels
        },
        () => {
          this.updateChartOptions();
        }
      );
    }
  }

  updateChartOptions = () => {
    const { labels } = this.state;
    const newOptions = {
      ...this.state.options,
      xaxis: {
        ...this.state.options.xaxis,
        categories: labels
      }
    };
    this.setState({
      options: newOptions
    });
  };

  render() {
    return (
      <Chart
        options={this.state.options}
        series={this.state.series}
        type="area"
        width="100%"
        height="100%"
      />
    );
  }
}

说明 #

• 自定义tooltip.formatter直接判断数值是否为0，强制返回"0"，避免默认逻辑过滤零值
• enabledOnSeries: undefined确保所有系列的数据点都能触发工具提示
• 对数轴场景下，额外在y轴的formatter中处理零值，避免对数计算导致的异常

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