Datetime series: tooltip dates do not align with x-axis

[alexjameslowe]

Bug report

Codepen

https://codepen.io/CodeOwl/pen/KKdevvK

Explanation

• What is the behavior you expect?
  I expect that when you roll over the graph, the date advertised by the tool tip will fall in between the x-ticks. i.e. rolling over the graph between xaxis-tick N and xaxis-tick M should produce a date between N and M.

• What is happening instead?
  I'm getting a date on the tooltip outside the range of the x-ticks. Roll between the x-axis 1352592011 and 1352592013 ticks and note that the tooltip says 1352592010, i.e., the timestamp is not between the ticks.

• What error message are you getting?
  I'm not getting an error message.

[marcioelias]

I have the same problem, and in my case, when I reset zoom, the labels align correctly.

Searching on issues here, I've found a few times this same problem (or something related), there is no one that found a viable solution until now?

[alexjameslowe]

@marcioelias I cobbled this together. I hope it helps.
`normalizedStartAndEndTime(start, end) {

  //interval of 2-seconds, and we want 6 ticks on the axis.
  const stride = 2
  const numberOfTicks = 6 

  //now normalize them to the intervals. make them divisible
  //by the stride.
  const startTimeInterval = start - (start % stride)
  const endTimeInterval = end - (end % stride)

  //Unfortunately our work isn't done and we have to accommodate apex-charts.
  //https://github.com/apexcharts/apexcharts.js/issues/1601
  //https://codepen.io/CodeOwl/pen/KKdevvK

  //let's say that the above calculation gives us 2 and 16, and we want 4 tick marks. for
  //easiness we're saying that the number of tick marks is a whole multiple of stride. that is
  //to say that if some number is evenly divisible by the number of tick marks, then it it is
  //automatically evenly divisible by the stride amount.

  //alright, well we can't mess around with the startTimeInterval, because that might take us into negative
  //territory if we extended it in the -x direction from the start. But we're free to pad the ending boundary
  //as much as we want. So, let's say it's like: 2 and 16 and we need 4 tick marks.
  // so 16-2 = 14, and we need it to be a multiple of 4, so what we're going to do is
  //So Math.ceil( 14/4 ) = 4. So nearest whole-number multiple is 4.
  //So 4*4 is 16 and therefore our adjusted maximum interval is 2 + 16 = 18. The boundary 2 and 18 will
  //evenly accommodate 4 tick-marks:

  //02  04  06  08  10  12  14  16 18
  //*       *       *       *

  //And then apexcharts doesn't seem to want to render the last tick, so the topology of this is that
  //the number of gaps equals the number of ticks, and it starts with a tick.

  const strideNormalizedDelta = endTimeInterval - startTimeInterval

  if (strideNormalizedDelta % numberOfTicks == 0) {
    return { start: startTimeInterval, end: endTimeInterval }
  } else {
    const nextNearestMultiple = Math.ceil(
      strideNormalizedDelta / numberOfTicks,
    )
    const adjustedEndInterval =
      startTimeInterval + nextNearestMultiple * numberOfTicks
    return { start: startTimeInterval, end: adjustedEndInterval }
  }

}`

[williams335]

Hello,

Test this, add these tootltip parameters in your option

options: {
   	tooltip: {
   	x: {
   		format: "dd MMM yyyy",
   		formatter: function(value, { series, seriesIndex, dataPointIndex, w }) {
   		return new Date(value)
   	        }
        }
} 

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.