Date display issue for 1st Jannuary on x-axis

[hardikzignuts]

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!

[junedchhipa]

@hardikzignuts Please specify which version of apexcharts are you using?

Also, you have already tried a workaround of setting xaxis.min, but xaxis.min accepts timestamp. So, try it like this min: new Date('01/01/2020').getTime().

Meanwhile, I will try to reproduce the issue on my side.

[hardikzignuts]

@junedchhipa First I would like to thank you for prompt response for this issue.

Currently I am using below version:
"apexcharts": "^3.2.1",
"vue-apexcharts": "^1.4.0",

I have tried solution provided by you like this:
xaxis: { type: 'datetime', min: new Date('01/01/2020').getTime(), categories: [], labels: { hideOverlappingLabels: true, datetimeFormatter: { day: 'M/dd', }, } },

But unfortunately this is not working in my case.

Can you provide me another solution?

Thank you!

[hardikzignuts]

@junedchhipa Any update from your side?

I have created codepen demo:

https://codepen.io/hardikzignuts/pen/dyomzJR

[junedchhipa]

@hardikzignuts Thanks for creating the codepen demo.
I can clearly see the issue, it will be addressed soon.
You can expect a fix in a week or two. Thanks for your patience.

[junedchhipa]

Fixed it, a patch version will be released soon.
Meanwhile, you can use UTC date-times to get precise tick placements.

var TIME = [
  new Date('2020-01-01T00:00:00.000Z'),
  new Date('2020-01-02T00:00:00.000Z'),
  new Date('2020-01-03T00:00:00.000Z'),
  new Date('2020-01-04T00:00:00.000Z'),
  new Date('2020-01-05T00:00:00.000Z'),
  new Date('2020-01-06T00:00:00.000Z'),
  new Date('2020-01-07T00:00:00.000Z'),
  new Date('2020-01-08T00:00:00.000Z'),
  new Date('2020-01-09T00:00:00.000Z'),
  new Date('2020-01-10T00:00:00.000Z')
]

[hardikzignuts]

@junedchhipa I have tried UTC date-times but this don't plot the chart at all.

So, Am I doing any mistake to configure the chart options as I have provided above.

[junedchhipa]

Codepen

[hardikzignuts]

@junedchhipa Thank you for your prompt response.
I have checked on codepen with your solution which is working fine and also check with below code

var TIME = ['2020-01-01','2020-01-02','2020-01-03','2020-01-04','2020-01-05','2020-01-06','2020-01-07', '2020-01-08','2020-01-09','2020-01-10'];

This is also working fine. Here I have just change the date format from mm-dd-yyyy to yyyy-mm-dd

but if I am configuring same things in my project it doesn't work.

[junedchhipa]

The codepen uses the latest version of ApexCharts. Make sure you are also using the latest version.

[hardikzignuts]

Ok I will try with latest version.

[hardikzignuts]

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