HighCharts Dates not filling in on xAxis using JSON data feed

Question

/* Historical Performance */
document.addEventListener('DOMContentLoaded', function() {

  const lineChartUrl = 'https://bfc-dashboard-api.herokuapp.com/line_chart';

  Highcharts.getJSON(lineChartUrl, function(data) {

    var seriesData = [];
    var dates = [];

    var options = {
      series: [{
        name: 'Fund',
        data: seriesData,
      }],
      xAxis: {},
      yAxis: {
        title: {
          text: 'Value',
          style: {
            fontWeight: 'bold'
          }
        },
        crosshair: true,
        labels: {
          style: {
            color: '#77e8e3'
          }
        },
        gridLineColor: '#777'
      }
    };


    for (var i = 0; i < data.length; i++) {
      date = new Date(data[i][0]);
      seriesData.push(
        data[i][1],
        date
      );
    };

    //options.xAxis.categories = dates;  

    console.log(options);

    Highcharts.stockChart('chart-one', options);


  });

});

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<script src="https://code.highcharts.com/stock/modules/accessibility.js"></script>

<div id="chart-one"></div>

Having a hard time getting this data formatted properly to display in Highcharts. I can get the line chart to show the data points but the dates on the xAxis all show Jan 1, 1970 in a long time stamp. see screenshot

As of now I'm pulling in the JSON data, formatting the date string to a Data object and pushing the values back to a new array "seriesData" that I use to populate the points on the chart.

Ultimately I need the dates to show in this format (DD/MM/YYY) and correspond to their respective data point plotted in the chart. I'm open to any suggestions here. I know there are similar topics but I couldn't seem to find a good solution to the issue I'm having.

document.addEventListener('DOMContentLoaded', function () {
    
    const lineChartUrl = 'https://bfc-dashboard-api.herokuapp.com/line_chart';
    
    Highcharts.getJSON(lineChartUrl, function(data) {
        
        var seriesData = [];
        var dates = [];
        
        var options = {
            series: [{
    name: 'Fund',
                data: seriesData,
            }],
            xAxis: {
            },
            yAxis: {
                title: {
                    text: 'Value',
                    style: {
                        fontWeight: 'bold'
                    }
                },
                crosshair: true,
                labels: {
                    style: {
                        color: '#77e8e3'
                    }
                },
                gridLineColor: '#777'
            }
        };
        
        
        for (var i = 0; i < data.length; i++) {
            date = new Date( data[i][0] );
            seriesData.push(
                data[i][1],
                date
            );
        };
        
        //options.xAxis.categories = dates;  
        
        console.log(options);
        
        Highcharts.stockChart('chart-one', options);

        
    });
    
});

Answer 1

The issue is caused by the x value (date) format that your JSON provide. It would be possible to use string as a date in Highcharts, by changing xAxis.type to category.

Demo: https://jsfiddle.net/BlackLabel/kgcvh4L7/

In the case of Highstock, the xAxis.type can be dateTime only, so you should phrase your data first and provide the date as a number (timestamp). Then you will be able to format xAxis.labels as you expect:

Sample config:

Highcharts.getJSON('https://bfc-dashboard-api.herokuapp.com/line_chart', function(json) {

  const data = [];

  json.forEach(point => {
    const myDate = point[0].split("/"),
      newDate = new Date(Date.UTC(myDate[2], myDate[0] - 1, myDate[1])).getTime();
    data.push([newDate, point[1]])
  })

  Highcharts.stockChart('container', {
    xAxis: {
      type: 'datetime',
      labels: {
        format: '{value:%d/%m/%Y}'
      }
    },

    series: [{
      data: data
    }]
  })

});

Demo: https://jsfiddle.net/BlackLabel/bvk45tsg/

API Reference: https://api.highcharts.com/highstock/xAxis.labels.format