Apexcharts.js: Datetime axis doesn't respect "tickAmount"

Created on 12 Sep 2018 · 10Comments · Source: apexcharts/apexcharts.js

Datetime axis doesn't respect any given "tickAmount"

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

Source

JCQuintas

Most helpful comment

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");
    }
  }
},

junedchhipa on 12 Sep 2018

👍4 🚀1 😕1

All 10 comments

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

junedchhipa on 12 Sep 2018

👍4 🚀1 😕1

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

JCQuintas on 12 Sep 2018

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

junedchhipa on 12 Sep 2018

❤2

Is there any possibility how to achieve this behavior then, please? I just want 3 ticks (start date, middle date, end date).
screen shot 2018-09-12 at 13 55 58

pnemi on 13 Sep 2018

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.

junedchhipa on 13 Sep 2018

🎉1

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

jatindumka on 6 Dec 2019

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

ayaz2929 on 7 Jul 2020

@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"
    },

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

Screen Shot 2020-07-28 at 8 20 05 PM

joykliu on 29 Jul 2020

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 .

and-mine on 22 Feb 2021

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