search

apexcharts / apexcharts.js

📊 Interactive JavaScript Charts built on SVG
https://apexcharts.com
MIT License
14.44k stars 1.31k forks source link

Incorrect tick alignment in heatmap using irregular timeseries #4809

Open dschweinbenz opened 1 week ago

dschweinbenz commented 1 week ago

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: grafik

Actual Behavior

grafik Line chart is working as expected, heatmap not.

Reproduction Link

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

LukasBra commented 1 week ago

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