It is possible to shift the data and move to 1 day less?

[octaviz]

Well, I have been dealing with this issue for days, I have a bar chart that the data are correct but according to the hovertext and the tick of the lower xaxis correspond really to 1 day less, is it possible to move the bars so that they are 1 day less. For example those of the day 31/8 correspond to the day of the 30th. I think that the sensor is not reset exactly at 00:00 every day, it is reset a few seconds later, so that is why the data does not correspond to the day it marks.

I have tried several options with filters but I am not an expert in that, I need some help. I have tried several options like for example "period: day" and "statistic: state" but without correct result, the bars are not drawn. I have only managed to see the bars with the correct data and without the correct date by adding "time_offset: 2h" and with the filter "resample: 24h", it is the only thing that makes the data come out correctly.

Maybe the tickformat of the xaxis can be used to subtract or remove a day, I don't know if this option is also possible.

The sensor I use is the one created by Home Assistant with the iOS App to measure walking distance.

My code working values and data error:

type: custom:plotly-graph
title: null
autorange_after_scroll: true
time_offset: 8h
hours_to_show: 7d
config:
  displaylogo: false
  scrollZoom: true
  displayModeBar: true
entities:
  - entity: sensor.hok_distance
    type: bar
    bargap: 10
    time_offset: 2h
    showlegend: true
    visible: true
    filters:
      - resample: 24h
      - map_y_numbers: y / 1000
    mode: markers+lines
    hovertemplate: >-
      <span style="text-align: center; font-size: 20px;">%{y:.1f}
      km</span><br>%{x}<extra></extra>    
    yaxis: y1
    xaxis: x1
    name: Distancia
    texttemplate: <b> %{y:.1f}</b><br>km
    marker:
      width: 2
      color: rgba( 0, 201, 255 ,0.5)
    textfont:
      color: rgba (  255, 255, 255 , 0.9)
      size: 14
    line:
      width: 2
      color: rgba (   0, 201, 255  , 0.5)
  - entity: ''
    hovertemplate: '<span style="display: none;"> <extra></extra>     '
    name: Now
    yaxis: y9
    texttemplate: 🔄
    showlegend: false
    show_value: true
    line:
      width: 1
      color: rgba (   255,255,255 , 1 )
    x: $ex [Date.now(), Date.now()]
    'y':
      - 0
      - 1
defaults:
  entity:
    show_value: false
  yaxes:
    fixedrange: true
    rangemode: tozero
fn: |
  $fn({getFromConfig, vars})=> {
    const range = getFromConfig("visible_range");
    const width = range[1] - range[0];
    vars.scroll = (label, p) => ({
      args: [
        {
          layout: {
            "xaxis.range": [range[0] + width*p, range[1] + width*p],
          }
        }, {
          transition: {
            duration: 150,
          }
        }
      ],
      label,
      method: "animate",
    })
    vars.zoom = (label, h) => ({
      args: [
        {
          layout: {
            "xaxis.range": [Date.now()-1000*60*60*h, Date.now()],
          }
        }
      ],
      label,
      method: "animate",
    })
  }      
layout:
  bargap: 0
  modebar:
    orientation: v
  xaxis:
    tickformat: null
    tickfont:
      size: 10
    ticklen: 2
    tickangle: 0
    minor:
      nticks: 3
      tickmode: linear
      showgrid: false
      tickformat: auto
      gridcolor: '   #454545   '
  yaxis2:
    side: left
    ticksuffix: null
    showticklabels: true
    tickangle: 0
    minor:
      nticks: 4
      tickmode: auto
      showgrid: true
      gridcolor: '   #454545   '
      tickformat: auto

  yaxis:
    side: right
    showticklabels: true
    title: km
    tickangle: 0
    minor:
      nticks: 3
      tickmode: auto
      showgrid: true
      gridcolor: '   #454545   '
      tickformat: auto
  annotations:

    - text: |-
        $fn ({hass}) =>
          "<span style='font-size: 28px;'><span style='font-weight: bold; color: rgba(  0, 201, 255  , 1)'>"
          + hass.states['sensor.hok_iphone_distance_km'].state + "</span></span>km<br>"
          +  "</span><span style='font-weight: bold; color: rgba( 0, 201, 255   , 1)'>Distancia Hoy ↔</span><br>"
          + (hass.states['sensor.aire_acondicionado_temperature']  ? "<br><span style='font-size: 30px;color: rgba( 0, 221, 51   , 1)'></span>":'')
          
      xref: x domain
      yref: y1 domain
      xanchor: center
      yanchor: top
      x: 0.68
      'y': 1.45
      showarrow: false
  height: 400
  margin:
    l: 40
    r: 40
    t: 120
    b: 60
  updatemenus:
    - buttons: null
      direction: right
      active: -1
      pad:
        r: 10
        t: -90
      type: buttons
      x: 1
      xanchor: right
      'y': 1
      yanchor: top
    - buttons:
        - $fn({vars}) => vars.zoom( '3m', 24*90)
        - $fn({vars}) => vars.zoom( '1m', 24*30)
        - $fn({vars}) => vars.zoom( '2w', 24*14)
        - $fn({vars}) => vars.zoom( '2d', 24*2)
      direction: right
      active: -1
      pad:
        l: -15
        t: -90
      type: buttons
      x: 0
      xanchor: left
      'y': 1
      yanchor: top
  font:
    family: Roboto,Noto,sans-serif
    size: 14
    color: $fn ({css_vars}) => css_vars['primary-text-color']
  paper_bgcolor: rgba(0, 0, 0, 0.4)
  plot_bgcolor: rgba(0, 0, 0, 0)
  legend:
    itemwidth: 1

[dbuezas]

That's some pretty lot you have there 👌👌👌

To shif data in time you have the time_offser parameter inside the traces (entity:)

Just set it to time_offset: -1d instead of the 2h you have there

[octaviz]

Hi David, it did not work for me to set the time_offset: -1d, finally I found the problem, it is the damn sensor, it resets it after midnight, about 00:00:50 seconds, it is very strange, but that's how it is. I solved it by creating a counter helper with the sensor and resetting it at exactly 00h, then if the period & statistic parameters work and the date is correct.

Thank you very much for your help, this hack is amazing, it has a lot of configuration work but once you get it is spectacular.