Datetime

a). xaxis.labels.datetimeFormatter

This is the default settings for x-axis labels generation in a time series.

  xaxis: {
    labels: {
      datetimeFormatter: {
        year: 'yyyy',
        month: 'MMM \'yy',
        day: 'dd MMM',
        hour: 'HH:mm'
      }
    }
  }

Based on the difference between minX (leftmost datetime) and maxX (rightmost datetime), xaxis labels are generated.
If the difference is > 5 years – the labels are generated in yyyy format.

If the difference is > 2 years and < 5 years - the labels are a mix of yyyy and MMM 'yy

and so on till it gets to the hours.

b). xaxis.labels.format

The X values formatting for datetime values can also be formatted by:
xaxis.labels.format = 'dd/MM'

This will fix the labels formatter and will not consider whether the difference in time is in years/months/days/hours

xaxis: {
  labels: {
    format: 'dd/MM',
  }
}

c). xaxis.labels.formatter

Overrides everything and applies a custom function for the xaxis value.

xaxis: {
  labels: {
    formatter: function (value, timestamp) {
      return new Date(timestamp) // The formatter function overrides format property
    }, 
  }
}

The table shows the valid options available for format specifiers.

Format Specifier	Description
“dddd”	The full name of the day of the week.
“ddd”	The abbreviated name of the day of the week.
“dd”	The day of the month, from 01 through 31.
“d”	The day of the month, from 1 through 31.
“MMMM”	The full name of the month.
“MMM”	The abbreviated name of the month.
“MM”	The month, from 01 through 12.
“M”	The month, from 1 through 12.
“yyyy”	The year as a four-digit number.
“yy”	The year, from 00 to 99.
“y”	The year, from 0 to 99.
“hh”	The hour, using a 12-hour clock from 01 to 12.
“h”	The hour, using a 12-hour clock from 1 to 12.
“HH”	The hour, using a 24-hour clock from 00 to 23.
“H”	The hour, using a 24-hour clock from 0 to 23.
“mm”	The minute, from 00 through 59.
“m”	The minute, from 0 through 59.
“ss”	The second, from 00 through 59.
“s”	The second, from 0 through 59.
“fff”	The value of milliseconds in three digits.
“ff”	The value of hundredth and tenth millisecond.
“f”	The value of hundredth millisecond.
“tt”	The am/pm designator. (lower case)
“t”	The first character of the am/pm designator. (lower case)
“TT”	The AM/PM designator. (upper case)
“T”	The first character of the AM/PM designator. (upper case)

Why Choose ApexCharts

Datetime

Stay Updated