How do I properly format HighStock x-axis ticks based on unix timestamps?

Question

I'm having trouble properly labeling the x-axis ticks in my HighStock chart. Currently my chart looks like this:

The x-axis ticks are incorrect. The ticks should change dynamically based on the unixtimestamps within the data. An example of how it should look would be this:

How can I format the ticks based on dynamic unix timestamps?

For context, I'm using SignalR and a background task in an ASP.NET Core MVC application to periodically send CoinGecko API data to the client, and displaying that data in a HighStock chart. My data is formatted as an array of arrays, var dataArray = [ [unixTimeStamp, cryptoPrice], [unixTimeStamp, cryptoPrice], ...]. Click here if you would like to see the specific API data I am receiving.

HTML:

<div id="myChart" style="width:100%; height:500px;"></div>

JavaScript:

<script src="https://cdnjs.cloudflare.com/ajax/libs/highstock/6.0.3/highstock.js" integrity="sha512-xStuxZIFeepdcpLwBhqIuU761mDfYUDbV8C8lUiTX96W+kyL+AYmY9l3o/Ku30gEek9l+hUJGQpmT4pcVm6LeA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
//Get data from Web API, I simplified this part for the question
var dataArray = [[insert unixtime, insert price], [[insert unixtime, insert price], ...]

//Get client time zone
var clientTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;

            //Initialize chart
            Highcharts.stockChart('myChart', {

                title: {
                    text: 'Bitcoin Price'
                },
                time: {
                    timezone: clientTimeZone
                },
                series: [{
                    name: 'Price',
                    data: dataArray,
                    tooltip: {
                        valueDecimals: 2
                    },
                    showInNavigator: false,
                }],

                rangeSelector: {
                    enabled: false
                },
                xAxis: {
                    labels: {
                        formatter: function () {
                            return Highcharts.dateFormat('%H:%M', this.value);
                        }
                    }
                }
            });
</script>

Answer 1

You will need to convert the unix Epoch time. Below is sample method that may help. Ideally you will have the Zone id in the source, but I am not sure from where you are getting the data. If not use the Locale to find timezone info. Once you have converted the Unix Epoch date value you can use X axis Label format "g"

public DateTime convertUnixEpochToLocalDateTime(long dateEpoch, string zoneId) {
  DateTime localDateTime;

  DateTimeOffset dateTimeOffset = DateTimeOffset.FromUnixTimeSeconds(dateEpoch);
  string timeZoneId = findTimeZoneId(zoneId);
  TimeZoneInfo currentTimeZone = TimeZoneInfo.FindSystemTimeZoneById(timeZoneId);
  localDateTime = TimeZoneInfo.ConvertTimeFromUtc(dateTimeOffset.UtcDateTime, currentTimeZone);

  return localDateTime;
}

You can do the opposite as below

public long convertDateTimeToUnixEpoch(DateTime dtToConvert) {
  DateTimeOffset dtoffset = new DateTimeOffset(new DateTime(dtToConvert.Year, dtToConvert.Month, dtToConvert.Day, 0, 0, 0, DateTimeKind.Utc));

  return dtoffset.ToUnixTimeSeconds();
}