How to make the show_value better visible on the right?

[Photelegy]

I know that there is a right_margin: but this is bound to the zoom of the x-axis (if I'm not mistaken).
Now I have the problem that when I choose different rangeselector: buttons: it doesn't show the show_value good visable.

[1d] looks fine and the unites are fully shown (without the need of moving the x-axis):

[7d] doesn't look fine (the unites are cut off): (With 1month, ... it's even worth)

[12h] the space on the right is way to big:

My card-configuration:

type: custom:plotly-graph
entities:
  - entity: sensor.vierwaldstettersee_temperatur
    yaxis: y1
    legendgroup: 1
    name: Vierwaldstättersee
  - entity: sensor.vierwaldstattersee_pegel
    yaxis: y2
    showlegend: false
    legendgroup: 1
  - entity: sensor.lauerzersee_temperatur
    yaxis: y1
    legendgroup: 2
    name: Lauerzersee
  - entity: sensor.lauerzersee_pegel
    yaxis: y2
    legendgroup: 2
    showlegend: false
  - entity: sensor.zugersee_temperatur
    yaxis: y1
    legendgroup: 3
    name: Zugersee
  - entity: sensor.zugersee_pegel
    yaxis: y2
    legendgroup: 3
    showlegend: false
  - entity: sensor.zurichsee_temperatur
    yaxis: y1
    legendgroup: 4
    name: Zürichsee
  - entity: sensor.zurichsee_pegel
    yaxis: y2
    legendgroup: 4
    showlegend: false
  - entity: sensor.agerisee_temperatur
    yaxis: y1
    legendgroup: 5
    name: Ägerisee
  - entity: sensor.agerisee_pegel
    yaxis: y2
    legendgroup: 5
    showlegend: false
hours_to_show: 24
refresh_interval: 60
title: Seen (Temperatur und Wasser-Pegel)
layout:
  height: 500
  margin:
    t: 80
    l: 50
    r: 5
  xaxis:
    rangeselector:
      'y': 1.05
      buttons:
        - count: 12
          step: hour
        - count: 1
          step: day
        - count: 7
          step: day
        - count: 1
          step: month
        - count: 6
          step: month
        - count: 1
          step: year
  dragmode: pan
  showlegend: true
  legend:
    x: 0
    'y': -0.12
    bgcolor: rgba(0,0,0,.7)
    orientation: h
    itemsizing: constant
    font:
      size: 10
  grid:
    rows: 2
    columns: 1
    roworder: top to bottom
  yaxis:
    title: Temperatur [°C]
  yaxis2:
    title: Pegel [m.ü.M.]
no_default_layout: true
defaults:
  entity:
    show_value:
      right_margin: 22
    line:
      shape: line
color_scheme:
  - '#1f77b4'
  - '#1f77b4'
  - '#aec7e8'
  - '#aec7e8'
  - '#ff7f0e'
  - '#ff7f0e'
  - '#9d5dcf'
  - '#9d5dcf'
  - '#2ca02c'
  - '#2ca02c'

[dbuezas]

Unfortunately there is no way to always keep a zoom independent right margin for the values at the moment

[AleXSR700]

Why does it get into an infinite update? Will it not just update once on manual zoom or on span select?

[commentsonly]

right-aligned text above or below the marker would likely do the trick. Unsure if that's possible, though.

[dbuezas]

Why does it get into an infinite update? Will it not just update once on manual zoom or on span select?

Because once you scroll or zoom, this would kick in and change your scroll/zoom, which would then jump and trigger another relayout.

right-aligned text above or below the marker would likely do the trick. Unsure if that's possible, though.

The issue with right align text above or below was that the text would be covered by the trace itself it came from below/above. When I tried it was often impossible to read :(

[commentsonly]

opacity perhaps. I followed now various tips in here without a solution. Some claimed it to be and it mostly works but not under all circumstances. What I found out ... most solutions would work ok, not matter which rangebutton one selected if only I would find a way to not only show the defined number or days, hours but perform an autoscale right behind. Sort of a post-button-pressed option. But I had no lucky so far.

[quantum-byte]

Hi @dbuezas, i recently stumbled over your lib and played around with it. Quite nice. Thanks for your work!

I might have found another way of displaying the data markers + text without needing to use the hidden "future time" xaxis (which messes up the rangeselector).
Its a little bit uglier and more code, since i mess around with all kind off margins and ways to control position of things but it seems pretty stable to me. Some of the code is also not necessary and just me making it a bit nicer. I highlighted the important bits with comments.

Inspired by #17 and #15. Please have a look, and let me know what you think:

Default: 2 days data frame

Rangeselector: 2 hours data frame

Rangeselector: 7 days data frame - Its not a bug. I just dont have enough data yet :).

panning left: 2 days data frame - makes the marker and text go away:

Card configuration:
(Please keep in mind that i use a horizontal stack. It might not look perfect scaled down. Then you need to mess with the margin, padding and y,x and anchor values):

cards:
type: custom:plotly-graph
entities:
  - entity: sensor.hum_temp_ts0201_humidity
    legendgroup: sensor.hum_temp_ts0201_humidity
    yaxis: y1
    name: humidity (%)
    statistic: mean
    line:
      color: '#9FD1FF'
  # Similiar to the other solution in #17 i am using a separate entity with the last value 
  # to display the marker and the text. Same things apply here as well.
  - entity: sensor.hum_temp_ts0201_humidity
    legendgroup: sensor.hum_temp_ts0201_humidity
    yaxis: y1
    mode: markers+text
    showlegend: false
    statistic: mean
    marker:
      color: '#9FD1FF'
    textfont:
      color: '#9FD1FF'
    # I think this lambda should be more performant since it just takes the last value from the array
    # instead of mapping all values except the last one to false
    lambda: |-
      (ys, xs) => (
        {
          x: xs.slice(-1).map(x=> x && x),
          y: ys.slice(-1).map(y=> y && y),
        }
      )
  - entity: sensor.hum_temp_ts0201_temperature
    legendgroup: sensor.hum_temp_ts0201_temperature
    yaxis: y2
    name: temparature
    statistic: mean
    line:
      color: '#FF8B8B'
  - entity: sensor.hum_temp_ts0201_temperature
    legendgroup: sensor.hum_temp_ts0201_temperature
    yaxis: y2
    mode: markers+text
    showlegend: false
    statistic: mean
    marker:
      color: '#FF8B8B'
    textfont:
      color: '#FF8B8B'
    lambda: |-
      (ys, xs) => (
        {
          x: xs.slice(-1).map(x=> x && x),
          y: ys.slice(-1).map(y=> y && y),
        }
      )
  - entity: sensor.thermal_comfort_absolutehumidity
    legendgroup: sensor.thermal_comfort_absolutehumidity
    yaxis: y2
    name: humidity (abs)
    statistic: mean
    line:
      color: '#FFAEF7'
  - entity: sensor.thermal_comfort_absolutehumidity
    legendgroup: sensor.thermal_comfort_absolutehumidity
    yaxis: y2
    mode: markers+text
    showlegend: false
    statistic: mean
    marker:
      color: '#FFAEF7'
    textfont:
      color: '#FFAEF7'
    lambda: |-
      (ys, xs) => (
        {
          x: xs.slice(-1).map(x=> x && x),
          y: ys.slice(-1).map(y=> y && y),
        }
      )
minimal_response: false
significant_changes_only: false
defaults:
  entity:
    line:
      width: 1.5
      shape: spline
    period:
      24h: 5minute
      7d: hour
      6M: week
      1y: month
    texttemplate: <b> %{y:.4}</b> %{customdata.unit_of_measurement}
    textposition: middle right
    # This here is the first magic line. 'cliponaxis: false' is the one thing, which needs to be configured on every entity
    # to allow the marker + text to be rendered above the right y axis. 
    cliponaxis: false
    connectgaps: false
  yaxes:
    fixedrange: true
    # This is magic line number two. This makes sure that the traces are rendered above the right y axis, 
    # including the marker and its text. 
    layer: below traces
layout:
  title:
    text: Hum + Temp
    font:
      size: 24
    pad:
      t: 0
      b: 50
    'y': 1
    yanchor: top
    x: 0.5
    xanchor: center
  height: 400
  legend:
    'y': 0.977
    yanchor: bottom
    x: 0.25
    xanchor: center
    itemsizing: constant
  dragmode: pan
  margin:
    t: 40
    b: 60
    # This right margin as well is making space on the right for the marker + text going
    # across the right y axis.
    r: 70
    l: 35
  yaxis2:
    title:
      text: C°
      standoff: 0
    # this is important to push the right y axis labels to the right and make space
    # for the marker + text hanging over the y axis.
    ticklen: 35
  xaxis:
    type: date
    # This is important line number 3. I explicitly set autorange to false since it messes up
    # the rangeselector functionality due to the still existing fake "future time" x axis.
    autorange: false
    rangeselector:
      'y': 0.99
      yanchor: bottom
      x: 0.75
      xanchor: center
      buttons:
        - count: 2
          step: hour
        - count: 12
          step: hour
        - count: 2
          step: day
        - count: 7
          step: day
        - count: 1
          step: month
hours_to_show: 48
refresh_interval: 10
config:
  displayModeBar: false
  responsive: false
  modeBarButtonsToRemove:
    - lasso2d
    - toImage
    - select2d
    - resetScale2d

[dbuezas]

This is really good! I searched the docs like crazy for ways to disable the axis clipping exactly for this, and failed!
Great finding, I think I'll make this the default in the next version.
I was planning to add an option to make the right margin take pixels, and internally compute what this means in time, but this is much clearer.

I may even remove right_margin completely, there is an upcoming offset feature that can do the same but much cleaner (even though it won't be strictly needed anymore with your technique)

Would you like to make a PR with the change yourself? I can guide you and you'll appear as contributor (bragging rights)