Datetime axis doesn't respect "tickAmount"

[JCQuintas]

Datetime axis doesn't respect any given "tickAmount"

Example:
https://codesandbox.io/s/w0rxpzwznw

[junedchhipa]

Yes, as of now - the timescale ticks calculation is totally dependent on how many days/months is the gap and based on that - tickAmount is dynamically calculated discarding the option set by the user.

One way is to set the options.xaxis.formatter function and then it will take into account the tickAmount set by the user. One disadvantage when using this function is you get the same result whether the x-axis timescale difference is years/months/days/hours

xaxis: {
  tickAmount: 6,
  labels: {
    formatter: function(val, timestamp) {
      return moment(timestamp).format("DD MMM YYYY");
    }
  }
},

[JCQuintas]

I see, is this documented somewhere? We could have a least a hint for that.

[junedchhipa]

Just added.
https://apexcharts.com/docs/options/xaxis/#tickAmount

[pnemi]

Is there any possibility how to achieve this behavior then, please? I just want 3 ticks (start date, middle date, end date).

[junedchhipa]

You may try setting the xaxis.tickAmount: 4 along with xaxis.labels.formatter as suggested above.

xaxis: {
  tickAmount: 6,
  labels: {
    formatter: function(val, timestamp) {
      return moment(timestamp).format("MMM YY");
    }
  }
},

You may not get the labels exactly on the places you described (start/middle/end) but it will be close to it.

[jatindumka]

can heat map have a datetime axis?????

[ayaz2929]

can we set the resolution, like we want to show data of 5 years then 3 years 1 month.. is there any option we can set it from chart

[joykliu]

@junedchhipa I was able to control the number of ticks by following your suggestion, however two things happened.
1, the chart's grid lines disappeared:

    grid: {
      xaxis: {
        lines: {
          show: true
        }
      },
      yaxis: {
        lines: {
          show: false
        }
      },
      borderColor: "#B0B0B0",
      position: "front"
    },

2. the timestamp param of formatter is inaccurate and it is actually the index of that label rather than a timestamp

[and-mine]

How can i show regular interval of time in y axis. for eg. 10:30 , 11:00, 11:30 . In my case its populating automically based on data passed to chart. Iam usig range bar chart. Please help me .

[FrenchyProds]

How can i show regular interval of time in y axis. for eg. 10:30 , 11:00, 11:30 . In my case its populating automically based on data passed to chart. Iam usig range bar chart. Please help me .

What does your data look like ? If your timestamps are not populating your data following the half an hour trend you seem to want to produce, then unfortunately I don't think there's a way to display half an hour steps on your xaxis.

However if your timestamps are 30 minute steps, then you need to do as described above :

• Create an xaxis label formatter
• Specify the tickAmount for your xaxis to match what you wish to display. If you have 10x 30 minute steps, then set the tickAmount to 11

[YFarias]

Guys, I'm using vue.js, and you helped me too much with the comments. I'm pasting my piece of code, maybe it could help someone else. In my case, the user could "zoom in" the chart intervals. That's why I calculated the max and min and replaced the format to show hours.

   xaxis: {
		type: "numeric",
		min: this.minX - margin,
		max: this.maxX + margin,
		tickAmount: 7,
		tickPlacement: "between",
		labels: {
			formatter: function(val, timestamp, opt) {
				const formatAvailabe = ["DD MMM", "HH:mm"];
				let _max = opt?.w?.config?.xaxis.max;
				let _min = opt?.w?.config?.xaxis.min;

				if (!_max || !_min) return "";

				if (_max - _min < 24 * 60 * 60 * 1000) {
					return moment(val).format(formatAvailabe[1]);
				} else {
					return moment(val).format(formatAvailabe[0]);
				}
			},
			show: true,
			minHeight: 70,
			rotateAlways: false,
			maxTicksLimit: 7
		}
     }