Incorrect tick alignment in heatmap using irregular timeseries

[dschweinbenz]

Description

When using a heatmap and having inconsistent timeseries (e.g. one time series is missing some ticks) the data is not visualized correctly. If there are missing values on the x axis no gap is shown instead the next data point is directly placed next to the previous data point. Hovering the item shows the correct datetime of the x value, but the visualization is broken. Here is a codepen that shows the behaviour (line vs heatmap) based on datetimes as x axis. Series 1 should start at 15:30 and not be visualized at 10:30. Next to that also gaps within a time range should be handled properly.

A line chart is able to handle that as documented here: https://apexcharts.com/javascript-chart-demos/area-charts/irregular-timeseries
Maybe this is related to this historic issue: 3483 (PR: 3505)

Steps to Reproduce

1. Create a heatmap based on datetime as x axis
2. Create multiple series that contain an inconsistent length of data

Expected Behavior

Gaps inside the series is visualized as white space and x values are correctly aligned across the x axis. Example in elastic:

Actual Behavior

Line chart is working as expected, heatmap not.

Reproduction Link

https://codepen.io/Schweini/pen/poMYEgL

[LukasBra]

We ran into the same issue, a solution for this would be awesome!