javascripthtmlcssapexcharts

Apexcharts show datetime axis beyond series length

I have an apex chart of xaxis-type datetime. I have a data series with values between 16:30-17:05. However, I want to display the full current day as xaxis range (from 00:00-23:59) and the series graph should only be "visible" for the time I have datapoints for.

How to achieve this?

enter image description here

Desired output:

xaxis range from 00:00-23:59.

Solution

  • When using datetime on the xaxis, the range to be displayed can be specified with millisecond timestamps:

    options = {
  xaxis: {
    min: new Date().setHours(0, 0, 0, 0),  // start of current day
    max: new Date().setHours(23, 59, 59, 999), // end of current day
    labels: {
      datetimeUTC: false // show local time
    }
  }
}

    The datetimeUTC only needs to be set if you'd like to show the labels in local time instead of UTC.