Tooltip incorrect for some values when offset is used.

[edwardhorsford]

Checklist

• [x] I updated the card to the latest version available
• [x] I cleared the cache of my browser
• [x] I verified that I'm really running the latest version in my browser console
• [x] I checked if there is another issue opened with the same problem

Describe the bug When you plot column data with Apex, it sometimes seems to include columns prior to the start - my guess is so that the intended start column is not obscured.

The bug is that if an offset is set, the prior columns shown have the incorrect tooltip.

Here is my graph:

It is plotted from 48 values in an entity that contains the current day's data.

It's set up using:

graph_span: 18h
span:
  start: day
  offset: +6h

This should plot the latter 18 hours of the day from 6am. You can see however that one bar is shown prior to 6am. I don't mind that it's shown, but the tooltip is not for 5:30am, and instead midnight:

Several hovers between 5:30am and 7am are incorrect:

I think the column that's plotted is at the right value, but clearly the tooltips are wrong - both the value and the time. I do not observe this if I remove the offset.

My solution for now is to use the data_generator to filter out values prior to 6am so they cannot be plotted.

Version of the card Version: 2.04

To Reproduce This is the configuration I used:

type: custom:apexcharts-card
experimental:
  color_threshold: true
header:
  show: true
  show_states: true
  colorize_states: true
  title: Today’s rates
stacked: false
graph_span: 18h
span:
  start: day
  offset: +6h
now:
  show: true
  label: Now
  color: black
yaxis:
  - min: 0
    max: 30
    decimals: 1
    apex_config:
      tickAmount: 4
      labels:
        formatter: |
          EVAL: (value) => {
            return `${Math.round(value)}p`
          }
apex_config:
  plotOptions:
    bar:
      columnWidth: 95%
  tooltip:
    enabled: true
    x:
      show: true
      formatter: |
        EVAL:function(val, opts) {
          function formatTimeRange(start, end) {
            const formatDate = date => {
              const day = date.getDate()
              const month = date.toLocaleString('en-GB', { month: 'short' })
              return `${day} ${month}`
            }

            const formatTime = date => {
              let hours = date.getHours()
              let minutes = date.getMinutes()
              hours = hours < 10 ? '0' + hours : hours
              minutes = minutes < 10 ? '0' + minutes : minutes
              return `${hours}:${minutes}`
            }

            return `${formatDate(start)}: ${formatTime(start)} to ${formatTime(end)}`
          }
          let offset = 15 * 60 * 1000 // 15 minutes
          let periodWidth = 30 * 60 * 1000 // 30 minutes
          let startDate = new Date(val - offset)
          let endDate = new Date(val - offset + periodWidth)
          return formatTimeRange(startDate, endDate)
        }
  xaxis:
    tickPlacement: 'on'
    tooltip:
      enabled: false
series:
  - entity: >-
      [entity here]
    type: column
    name: Price
    color: gray
    opacity: 1
    offset: '-15min'
    stroke_width: 0
    unit: p/kWh
    show:
      in_header: false
      legend_value: false
      header_color_threshold: true
      offset_in_name: false
    color_threshold:
      - value: -100
        color: cyan
      - value: 0
        color: green
      - value: 20
        color: orange
      - value: 30
        color: red
    data_generator: >
      let daytimeRates = entity.attributes.rates

      return daytimeRates.map((entry) => {
         return [new Date(entry.start), entry.value_inc_vat * 100];
      })

Screenshots Added above

Expected behavior Tooltips should match the data shown

Desktop (please complete the following information):

• Browser [Chrome]
• Version [120]

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[edwardhorsford]

Commenting to keep alive.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 10 days with no activity.

[edwardhorsford]

Commenting to say that this issue still exists. A pity the bot closes it with no way to re-open.