Setting xaxis ticks and labels in a datetime chart to a minimum time resolution

[alon-loris]

My data contains values per days, not per hours. For example:
series: [['2021-05-02', 0], ['2021-05-03', 100], ['2021-05-04', 0]]

For some reason (the calculation of the number of ticks and their labels in a datetime chart is not fully documented), for the above example I get a chart with hour-based ticks:

I want the x-axis to show labels of days if the range is up to X months, of months if there are more than X months etc.
In other words, I do want the labels to be dynamic based on the scale, but I want to be able to set the minimum resolution to be days and not hours, and also, as a bonus, to control the thresholds for when the labels change resolution.

Is this possible in any way?
The only solution I found for getting rid of the hour labels is setting the xaxis.labels.formatter property but then I get:

I have no idea what's the calculation that determines the number of ticks here and why is it different just because I changed the formatting function, and I don't know why there are duplicate labels. Setting xaxis.labels.showDuplicates: false didn't help.

What fixed this was setting xaxis.tickAmount to series.length - 1:

But this is not a good solution because:

• the labels won't change anymore based on the scale. They will remain in the format of "day/month" always.
• i'm forcing the number of ticks to be the same as the number of data points, which can be crowded when there are many data points and there's no real need for this many ticks, I only added them to fix the duplicate labels issue.
• the last tick is missing for some reason

How can this be achieved?

As a side note, the example in the docs for xaxis.labels.formatter doesn't work!

formatter: function(value, timestamp, opts) {
    return opts.dateFormatter(new Date(timestamp)).format("dd MMM")
}

It throws an error: Cannot read properties of undefined (reading 'replace')

[tiagojdf]

I am experiencing a similar issue. Without formatting I am getting:

But when I add my own formatter:

formatter: (value) => {
  return dayjs(value).format(
    granularity === 'MONTH'
    ? 'MMM YY'
    : granularity === 'DAY'
    ? 'D MMM'
    : 'HH:mm'
  );
},

I get fewer ticks:

[mehdi-song]

Hi
@tiagojdf Can you help me to show my chart as you?
Data [10.9,11.1,9.8,8.8,11.9]
label ['15:01:00','15:01:10','15:02:00','15:03:00','15:06:00']
Thanks regards

[tiagojdf]

Sorry, I haven't used apexcharts in years. Hope someone else can help you.

[wowo]

 xaxis: {
      type: 'datetime',
      labels: {
        showDuplicates: false,
        datetimeFormatter: {
          year: 'yyyy',
          month: 'MMM \' yy',
          day: 'dd MMM',
          hour: 'dd MMM',
        }
      }
    },

Combination of setting same formatter for hour and day and settgin showDuplicates to false helped in my case