Dynamic timeoffset in the bar chart

[eiderterra]

Hello,
I would like to make the setting for “timeoffset” in the bar chart dynamic depending on the period selected. In my example: when selecting “day” for “timeoffset” 5h, or -5h, when selecting “month” 120h, or -120h. If this works, it would be very nice if the setting for “customdata” also corresponded to the date change by 1 or 31. I've already tried a lot, but I just can't get any further. Maybe the professionals among you can give me the necessary impulse, that would be nice.

Code:

type: custom:plotly-graph
defaults:
  yaxes:
    fixedrange: true
  entity:
    type: bar
    unit_of_measurement: kWh
    statistic: state
    texttemplate: "%{y:.1f}"
    textposition: auto
entities:
  - entity: sensor.senec_webapi_powergenerated_total
    name: Erzeugung
    period:
      0m: day
      3M: month
    marker:
      color: "#4169E1"
      opacity: 2
    filters:
      - filter: i>=0
      - delta
      - store_var: erz
    customdata: |-
      $fn ({ xs }) => 
      xs.map(date => {
      let newDate = new Date(date);
      newDate.setDate(newDate.getDate() + 1);
      return newDate.toISOString().split("T")[0];
      })
    hovertemplate: |-
      <b> Erzeugung</b><br>
      <i>%{customdata|%d %b, %Y}</i><br>
      %{y:.3f} kWh
      <extra></extra>
    time_offset: "-5h"
  - entity: sensor.senec_webapi_consumption_total
    name: Verbrauch
    period:
      0m: day
      3M: month
    marker:
      color: "#428c75"
      opacity: 2
    filters:
      - filter: i>=0
      - delta
      - force_numeric
    time_offset: 5h
layout:
  paper_bgcolor: rgba(0,0,0,0)
  plot_bgcolor: rgba(0,0,0,0)
  barmode: stack
  bargap: 0.1
  bargroupgap: 0
  uniformtext:
    minsize: 10
    mode: show
  modebar:
    orientation: v
    remove: zoom
  margin:
    t: 25
    l: 50
    r: 60
  height: 500
  legend:
    "y": -0.25
    x: 0.02
  xaxis:
    rangeselector:
      "y": 1.15
      buttons:
        - count: 3
          step: day
        - count: 10
          step: day
        - count: 30
          step: day
        - count: 6
          step: month
        - count: 12
          step: month
    gridcolor: rgba(238,235,235,0.3)
    autorange: true
    showgrid: true
    linewidth: 0
    linecolor: null
    nticks: 6
    tickformat: |-
      %d %b
       %Y
  xaxis2:
    visible: false
    matches: x
  yaxis:
    side: left
    visible: true
    autorange: true
  yaxis2:
    range:
      - 0
      - 102
  yaxis3:
    visible: false
    side: left
    matches: "y"
hours_to_show: 10d
refresh_interval: 60
title: test
view_layout:
  position: main
modebar:
  orientation: h
  remove: pan

[dbuezas]

try with:

timeoffset: |
  $ex {
     const [from, to] = get('visible_range');
     const hours = (+to - +from) / 1000 / 60 / 60 ;
     const days = hours / 24;
     if (hours <= 24) return "10m";
     if (days <= 31) return "5h";
     return "5d";
  }

[eiderterra]

Hello David,
Thank you for the solution, it works great.
Greetings
Hans