xAxis label is not visible properly in Highcharts

if I have a large amount of data then the xAxis label is not showing properly. you can see in this code: https://jsfiddle.net/4nvmuc25/127/

if I have a low amount of data then it's fine my xAxis label is showing correctly.

so I want to show the xAxis label properly if I have a large amount of data.

Restriction: 1:you can't change the rotation property for xAxis. 2:xAxis labels should not intercept each other. 3:you can't do by css.

Not restriction: you can set tickInterval, step property in xAxis but remember the amount of data is dynamic, it could be any number.

You should not use category x-axis type in this case. In API we can read:

step: number

... By default, when 0, the step is calculated automatically to avoid overlap. To prevent this, set it to 1. This usually only happens on a category axis, and is often a sign that you have chosen the wrong axis type.

As a solution use linear axis with a custom formatter function for labels:

const labels = [
    "Apr-1",
    "May-2",
    ...
];

Highcharts.chart('container', {
    xAxis: {
        ...,
        labels: {
            ...,
            formatter: function() {
                return labels[this.pos]
            }
    },
    ...
});

Live demo: https://jsfiddle.net/BlackLabel/Lk8aogpq/

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