HighChart skipping x-axis years plot point

Question

I am trying to create a chart by using highChart from some given values. Everything looks fine except it is skipping x-axis years plot points. So here is the code what I have made

let Rank = [
    {year: "2019", value: "1007", color: "#90ed7d"},
    {year: "2021", value: "1126", color: "#f15c80"}
];
let data = [];
let zones = [];

$.each(Rank, function (key, value) {
    data[key] = [Date.UTC(value.year), parseInt(value.value)];
    zones[key] = { "value": Date.UTC(value.year), "color": value.color };
});

Highcharts.chart(container, {
        animation: {
          duration: 0
        },
        responsive: true,
        title: {
          text: null
        },
        credits: {
          text: ''
        },
        legend: {
          enabled: false
        },
        xAxis: {
          type: 'datetime',
          dateTimeLabelFormats: {
            year: '%Y',
          },
         
          labels: {
            style: {
              fontSize: '18px',
            },
            step : 1,
            //reserveSpace: true,
          },
        },
        yAxis: {
          reversed: true,
          opposite: false,
          title: false,
          min: 1,
          step : 1,
          minPadding: 0.2,
          maxPadding: 0.2,
          allowDecimals: false,
          labels: {
            align: 'left',
            reserveSpace: true,
            style: {
              fontSize: '18px',
            },
          },
        },
        hover: {
          mode: 'nearest',
          intersect: false
        },
        tooltip: {
          borderColor: 'rgb(255, 255, 255)',
          backgroundColor: 'rgb(255, 255, 255)',
          formatter: function () {
            const dateObject = new Date(this.x);
            const humanDateFormat = dateObject.getFullYear();
            return '<b>' + humanDateFormat + ' </b><span style="color:#606060">#' + this.y + '</span>';
          }
        },
        plotOptions: {
          series: {
            allowPointSelect: true,
            marker: {
              enabled: true
            }
          }
        },
        series: [{
          marker: {
            fillColor: '#fff',
            radius: 8,
            lineWidth: 2,
            margin: 2,
            lineColor: "rgba(70,69,71,0.5)"
          },
          name: 'Rank',
          data: data,
          zoneAxis: "x",
          zones: zones,
          pointIntervalUnit: 'year',
        }]
      });

In x-axis you can see I have data for 2019 and 2021. But it is not showing year 2019 and 2021 in x-axis. It is only showing 2020.

So can someone tell me why it is skipping those years in x-axis. How to show those years in HighChart?

FYI: Here is the working fiddle link

Answer 1

There is something called tickInterval in highChart which needs to be used there. So I have used

tickInterval: 1000 * 60 * 60 * 24 * 365

and it worked like a charm.

FYI Here is the working fiddle link.