X-axis label issue with less records | Incorrect x-axis labels

[mohityadav-11]

Issue:
When we have less than 4 records then the data label on the x-axis are showing incorrect values. Working fine with more records.

Version:
apexcharts@3.40.0
react-apexcharts@1.4.0

View:

Data:
let datalabel = [ { "HighCount": 1, "MediumCount": 0, "LowCount": 2, "FormatDate": "2024-04-14T00:00:00" }, { "HighCount": 1, "MediumCount": 1, "LowCount": 0, "FormatDate": "2024-04-16T00:00:00" }, ];

Series:
let series = [{ name: 'High', data: (datalabel || []).map(d => d.HighCount), color: "#FF7F29" }, { name: 'Medium', data: (datalabel || []).map(d => d.MediumCount), color: "#FFCC21" }, { name: 'Low', data: (datalabel || []).map(d => d.LowCount), color: "#02B8AB" },];

Options:
let options = { dataLabels: { enabled: false, }, grid: { strokeDashArray: 7, xaxis: { lines: { show: false }, }, yaxis: { lines: { show: true }, }, }, states: { active: { filter: { type: 'none', }, }, hover: { filter: { type: 'none', }, }, }, chart: { type: 'bar', height: 350, stacked: true, toolbar: { show: true, tools: { download: false, selection: true, zoom: true, zoomin: true, zoomout: true, pan: true, reset: true | '<img src="/static/icons/reset.png" width="20">', customIcons: [] }, }, }, stroke: { width: 0, colors: ['#fff'] }, xaxis: { type: 'datetime', title: { text: 'Date', offsetX: 0, offsetY: 0, style: { color: "black", fontSize: '12px', fontFamily: '"Roboto","Segoe UI","Bebas Neue",Tahoma,Geneva,Verdana,sans-serif', fontWeight: "normal" }, }, labels: { format: 'MMM dd', showDuplicates: false, }, tickPlacement: 'on', categories: (datalabel || []).map(d => d.FormatDate) }, yaxis: { axisBorder: { // for yaxis line show: true, offsetX: 0, offsetY: 0 }, show: true, title: { text: "Count", rotate: -90, offsetX: 0, offsetY: 0, style: { color: "black", fontSize: '12px', fontFamily: '"Roboto","Segoe UI","Bebas Neue",Tahoma,Geneva,Verdana,sans-serif', fontWeight: "normal" }, }, }, fill: { opacity: 1 }, legend: { show: false }, };

Chart:
<Chart options={options} series={series} type="bar" width="1112" height="340" />