Date display issue for 1st Jannuary on x-axis

First case: I am plotting column, line and area chart in single one. For this I am using date range to fetch data via API. If I am selecting date between 1st January 2020 to 31st January 2020 then API response gives me thirty-one records and chart plotting data as shown in below image which is not correct.

Second case: If I am selecting date between 1st December 2019 to 31st January 2020 then API response gives me sixty-two records and chart plotting data as shown in below image which is OK.

Third case: If I am selecting date between 1st January 2019 to 15th February 2020 then API response gives me forty-six records and chart plotting data as shown in below image. But here Feb '20 label is ok for the data of 1 February 2020 but Jan '19 in incorrect label for the date of 1 January 2020.

So, when I have data series starting from 1st January of any year then first x-axis label shown wrong with the month and the year of previous not current year.

This is my chart configuration: HTML: <apexchart type=line height=350 :options="clicksVsInquiriesOverTimeChartOptions" :series="clicksVsInquiriesOverTimeSeries" />

Script: clicksVsInquiriesOverTimeSeries: [ { name: 'Clicks', type: 'column', data: [], }, { name: 'Inquiries', type: 'area', data: [] } ],

clicksVsInquiriesOverTimeChartOptions: { colors: ['#2c256d', '#a0d468' ,'#ff7f0e'], stroke: { width: [0, 2, 5], curve: 'smooth' }, plotOptions: { bar: { columnWidth: '50%', } }, fill: { opacity: [0.85, 0.4, 1], }, markers: { size: 6, hover: { size: 10 } }, xaxis: { type: 'datetime', min: new Date('01/01/2020'), categories: [], labels: { hideOverlappingLabels: true, datetimeFormatter: { day: 'M/dd', }, } }, yaxis: [ { axisTicks: { show: true, }, axisBorder: { show: true, color: '#2c256d' }, labels: { style: { color: '#2c256d', } }, title: { text: "Clicks", style: { color: '#2c256d', } }, tooltip: { enabled: true } }, { seriesName: 'Inquiries', opposite: true, axisTicks: { show: true, }, axisBorder: { show: true, color: '#a0d468' }, labels: { style: { color: '#a0d468', } }, title: { text: "Inquiries", style: { color: '#a0d468', } }, }, ], tooltip: { shared: true, intersect: false, x: { show: true, format: 'M/dd', formatter: function(x) { if (typeof x !== "undefined") { let dd =new Date(x); dd.setDate(dd.getDate() + 1) let month = dd.getMonth() + 1; let day = dd.getDate(); let date = month + "/" + day; return date; } return x; } }, }, },

Please help me to resolve this issue.

Thank you!

[neverbe10]

I’m on

    "apexcharts": "^3.25.0",
    "react-apexcharts": "^1.3.7",

And the issues described above are occurring again. Could it be a regression? @junedchhipa And the codepen example provided is also showing the issues. Could you reopen the issues?

[hardikzignuts]

@junedchhipa I have update the version of chart and now it’s working. Thank you for your support.