HideOverlappingLabels in ApexCharts for xAxis type category - apexcharts

Question

I have this apexcharts definition and when i've got more than e.g. 300 datasamples for my series things are overlapping on the xAxis like this
i would rather see something like this though
The option "hideOverlapLabels" does not work since it only works with timeseries from what i've read.
I know i can reduce the ticks but i want the chart to be zoomable and have all data in it.
Is there a way how i can prevent the labels to overlap?
var options_apex = {
series: null,
colors: [ '#0054ff', '#FF0000' ,'#FF0000'],
chart: {
height: 450,
type: 'line',
zoom: {
enabled: true
},
animations: {
enabled: false
}
},
stroke: {
width: [3, 3, 3],
curve: 'straight'
},
labels: null,
title: {
text: "Serial Data",
align: 'center',
margin: 10,
offsetX: 0,
offsetY: 0,
floating: false,
style: {
fontSize: '14px',
fontWeight: 'bold',
fontFamily: undefined,
color: '#263238'
},
},
subtitle: {
text: "the reckoning",
align: 'center',
margin: 10,
offsetX: 0,
offsetY: 20,
floating: true,
style: {
fontSize: '12px',
fontWeight: 'normal',
fontFamily: undefined,
color: '#9699a2'
},
},
xaxis: {
type:"category",
labels: {
rotate: -90,
rotateAlways: true,
hideOverlappingLabels: true,
style: {
colors: [],
fontSize: '7px',
fontFamily: 'Roboto',
fontWeight: 100,
cssClass: 'apexcharts-xaxis-label',
}
},
axisTicks: {
show: true,
borderType: 'solid',
color: '#78909C',
height: 6,
offsetX: 0,
offsetY: 0
},
tickAmount: undefined,
title: {
text: "STEP ID",
offsetX: 0,
offsetY: 0,
style: {
color: "#0000ff",
fontSize: '12px',
fontFamily: 'Helvetica, Arial, sans-serif',
fontWeight: 600,
cssClass: 'apexcharts-xaxis-title',
},
}
},
};

Answer 1

i used: tickAmount:15 , and work for my , this show 15 values and hide anothers, also you can try applied formatt and if condicional, to xaxis with:
formatter: function (value) {
if(value && ((value.split(':')[1][1] === '0') || (value.split(':')[1][1] === '5'))){
return (value);
}else{
value='';
return('');
}
}

Answer 2

I think i found the solution
xaxis: {
type:"category",
tooltip: {
enabled: false,
formatter: undefined,
offsetY: 0,
style: {
fontSize: 0,
fontFamily: 0,
},
},
labels: {
rotate: -45,
rotateAlways: true,
hideOverlappingLabels: true,
style: {
colors: [],
fontSize: '6px',
fontFamily: 'Roboto',
fontWeight: 80,
//cssClass: 'apexcharts-xaxis-label',
},
axisTicks: {
show: true,
borderType: 'solid',
color: '#78909C',
height: 6,
offsetX: 0,
offsetY: 0
},
},
With this setup and setting not the Labels but Categories with
options_apex.xaxis.categories = labels;
things seem to work without overlapping.