Handling No Data Module with Dynamic x-Axis Range in Highcharts

I am currently working with Highcharts to display time-series data using linear graphs. I have implemented a temporal slider component that allows users to zoom in on specific time ranges. This slider adjusts the min and max values of the x-axis dynamically based on user interaction.

Here's my setup:

I pass all my data to Highcharts and dynamically update the min and max values of the x-axis as the slider is adjusted.
Occasionally, for some min and max settings, there are no data points available.

I would like to display a "No Data Available" message using Highcharts' no-data module when this situation occurs. However, since I am providing all the data to Highcharts and letting it handle the display based on the x-axis boundaries, the no-data label does not appear even when there are no visible data points within the selected range. I imported the module NoData in my code and added the noData label to display in my code as follows :

lang: {
      noData: 'No data available'
    },

When I try to pass an empty data array to Highcharts, this module works fine. However, when Highcharts is in charge of displaying the values according to the min and max, the message does not show.

Here is a JSFiddle link to illustrate the issue.

In this code, I put a static min and max to make it as easy as possible to reproduce. To reproduce my problem, you can change the maximum from 1435705200000 to 1335705200000 (to illustrate what would happen if a user tried to zoom in on the time range of the chart where no data is available).

Is there a way to make Highcharts recognize these scenarios and display the no-data message accordingly? Any suggestions or workarounds to achieve this behavior would be greatly appreciated.

Thank you for your assistance!

Solution

You can check if any point is visible, for example by checking if yAxis.dataMax is calculated and call chart.showNoData or chart.hideNoData accordingly.

  chart.xAxis[0].setExtremes(null, 1335705200000);

  if (chart.yAxis[0].dataMax === undefined) {
    chart.showNoData();
  } else {
    chart.hideNoData();
  }

Live example: https://jsfiddle.net/BlackLabel/tmgyv1fn/

API Reference: https://api.highcharts.com/highcharts/noData