softMin/softMax for xAxis in HighStock doesnt set?

Question

When looking at the Highstock documentation, it says there is a softMin and softMax for the xAxis, but if i leverage dates, it doesnt seem to properly represent the date ranges requested.

I have been needing to do the following: find the interval of the xAxis data, then padd the front/end of the array with null data at those timepoints to properly convey the info.

This works, but I figured HighStock's soft values should be able to handle this.

In a sample use case: you can set the following:

{
    chart: {
      type: this.type || 'line',
    },
    title: {
      text: this.title || ''
    },
    credits: {
      enabled: false
    },
    rangeSelector: {
      inputEnabled: false,  // Specific to the Date Range Picker.
      enabled: false         // Specific to the Quick Selects for YTD, 6 mo, zoom.
    },
    navigator: {
      adaptToUpdatedData: true
    },
    scrollbar: {
      enabled: false
    },
    legend: {
      enabled: true
    },
    xAxis: {
      min: undefined,
      max: undefined,
      softMin: undefined,
      softMax: undefined,
      type: 'datetime',
      dateTimeLabelFormats: {
        day: '%b %e'
      }
    },
    // yAxis: {
    //   title: { text: ''}, opposite: true, type: 'linear'
    // },
    plotOptions: {
      series: {
        dataGrouping: {
          approximation: 'sum',
          groupPixelWidth: 25,
          forced: true,
          units: [
            ['minute', [30]],
            ['day', [1, 7, 15]],
            ['month', [1, 3, 6]]
          ]
        }
      }
    },
    series: []
  }

So I look at the dates as if they are numbers, new Date().getTime() but if i want to set the softMin and softMax, I wanted to do something like:

xAxis: {
  softMin: new Date().getTime() - 1000 * 3600 * 24 * days_back
  softMax: new Date().getTime()
  }

where days_back is a user defined variable for how many days previously to look.

The way i pad out the series info is as follows:

const endtime = new Date().getTime();   //The current definition of endtime is now as there is no data for the future.
    const starttime = endtime - 1000 * 3600 * 24 * days;
    opts.series = dataset.map((item, idx, arr) => {
      const name: string = item.name || '';
      const data: any[] = item.data || []; // data is a list of lists.    ][time_as_number, value],...]
      if (data.length > 1) {
        /// The purpose of this code block is to padd out the dataset to the start and end ranges.
        ///  While there is a softMin and softMax, it doesnt work too when with regards to dates.
        ///  This will padd the data to be represenative of the users base selection.
        ///  If the list of data has 0 or 1 points, there is not enough data to define an interval for the target range.
        const difference = data[1][0] - data[0][0];
        let low = data[1][0];
        while (low > starttime) {
          low -= difference;
          data.unshift([low, null]);
        }
        let high = data[data.length - 1][0];
        while (high < endtime) {
          high += difference;
          data.push([high, null]);
        }
      }
      return {
        marker: { enabled: true },
        showInNavigator: true,
        type: 'line',
        name,
        data
      };
    });

Is there something I am missing which i should be taking into account? min/max/minRange/maxRange according to the docs are not the correct keys i wanted to assign to.

For ease of understanding, HighStock Documentation is located here: https://api.highcharts.com/highstock/xAxis.softMin

Here is a sample: https://jsfiddle.net/sp18efkb/ You will see in this sample i set the softMin but it is not reflected. If i use a chart object though, it works. It seems that while it is valid according to the API, is not a valid or monitored property.

Answer 1

When looking at HighStock charts, there is an additional variable which needs to be set if you are looking at this.

In the xAxis you need to set the property ordinal property to false. In order to get the navigator to function in the same way, you need to use that property, set the softmin and soft max as the same, and also turn off ordinal.

It would look something like this:

...

  navigator: {
    adaptToUpdatedData: true,
    xAxis: {
      ordinal: false,
      min: undefined,
      max: undefined,
      softMin: new Date().getTime() - 1000 * 3600 * 24 * 5,
      softMax: undefined
    }
  },
  xAxis: {
    ordinal: false,
    min: undefined,
    max: undefined,
    softMin: new Date().getTime() - 1000 * 3600 * 24 * 5,
    softMax: undefined,
    type: 'datetime',
    dateTimeLabelFormats: {
      day: '%b %e'
    }
  },
...