End the graph line with a marker and current value

[markuska00]

Is it possible to end the graph line with a marker and current value?

Like this:

Info here:
https://stackoverflow.com/questions/66190574/plotly-how-to-annotate-end-of-multiple-lines-with-text-and-marker-colors-that-m

[dbuezas]

This I the best I managed:

type: custom:plotly-graph
entities:
  - entity: sensor.openweathermap_temperature
    yaxis: y1
    line:
      color: red
  - entity: sensor.openweathermap_temperature
    yaxis: y1
    unit_of_measurement: W floor
    mode: markers+text
    texttemplate: '%{y}'
    textposition: top middle
    showlegend: false
    marker:
      color: red
    textfont:
      color: red
    lambda: (ys) => ys.map((y,i)=> (i=== ys.length-1) && y)

hours_to_show: 24
refresh_interval: 10

Here are the default plotly colors:

[
    '#1f77b4',  # muted blue
    '#ff7f0e',  # safety orange
    '#2ca02c',  # cooked asparagus green
    '#d62728',  # brick red
    '#9467bd',  # muted purple
    '#8c564b',  # chestnut brown
    '#e377c2',  # raspberry yogurt pink
    '#7f7f7f',  # middle gray
    '#bcbd22',  # curry yellow-green
    '#17becf'   # blue-teal
]

More about colors here

More info about texttemplate here

You can do textposition: middle right but you'll sometimes have to scroll to the right

[dbuezas]

Oh, I found a way to force a right padding in the graph so the text fits to the right.
The idea is to add an invisible but big marker.

type: custom:plotly-graph-dev
entities:
  - entity: sensor.openweathermap_temperature # the lines
    yaxis: y1
    line:
      color: '#1f77b4'
  - entity: sensor.openweathermap_temperature # the text
    yaxis: y1
    unit_of_measurement: W floor
    mode: text+markers
    texttemplate: '%{y}'
    textposition: middle right
    showlegend: false
    marker:
      color: '#1f77b4'
    textfont:
      color: '#1f77b4'
    lambda: (ys) => ys.map((y,i)=> (i=== ys.length-1) && y)
  - entity: sensor.openweathermap_temperature # the invisible marker to make space for the text
    yaxis: y1
    mode: markers
    showlegend: false
    marker:
      opacity: 0
      size: 50
    lambda: (ys, xs) => ys.map((y,i)=> (i=== ys.length-1) && y)
hours_to_show: 24
refresh_interval: 10

[markuska00]

Absolutely amazing!
Thank you very much!

[dbuezas]

It's a bit convoluted, but it seems to work fine :)

I added this example in the discussions, including the legend grouping thing from the link you sent. You will probably want to use that one instead.
#16

[dbuezas]

BTW: I'd really appreciate it if you would make a post in https://github.com/dbuezas/lovelace-plotly-graph-card/discussions/categories/show-and-tell with some of your plots (yaml+screenshot) so others can use it as an example. You seem to be keen on getting to the advanced stuff :)

[markuska00]

I need some more help here. 😄
When we force the right padding we get the same space at the left.

The space disappears when I press a rangeselector button.
But will come back when I press reset.

I have succeeded by manually forcing "range" to 2 hours more than the time I want to show. I normally show 12 hours.
But I do not figure out how to make automatic time range

.

[AleXSR700]

@markuska00:
did you figure out how to prevent the left space? I stumbled across this nice idea but the left space looks a bit weird ^^