How to make ApexCharts line graphs show zero values in tooltips?

Question

I am using ApexCharts to create line graphs in my application. However, when a series has a zero value, the tooltip still shows without displaying any value. Is there a way to configure ApexCharts to show zero values in tooltips?. Any guidance or code examples would be greatly appreciated.

Here's a simplified version of my code:

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) {
              return formatNumber(value);
            }
          }
        },
        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%"
      />
    );
  }
}

Answer 1

You can use hideEmptySeries for tooltip to manage the null/zero value visibility. Adding value below to your options should give you the expected result, I advise you to check tooltip documentation either way.

tooltip: {
    shared: true,
    hideEmptySeries: false,
},

Answer 2

I had the exact same issue. I fixed it by upgrading the apexcharts version to 3.46.0. It looks like it was a bug in previous versions.