End the graph line with a marker and current value

[dbuezas]

Extract from #15

type: custom:plotly-graph-dev
entities:
  - entity: sensor.openweathermap_temperature # the lines
    legendgroup: sensor.openweathermap_temperature
    yaxis: y1
    line:
      color: '#1f77b4'
  - entity: sensor.openweathermap_temperature # the text
    legendgroup: sensor.openweathermap_temperature
    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
    legendgroup: sensor.openweathermap_temperature
    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

[dbuezas]

thanks @markuska00 for the idea

[fgonza2]

can you update it without using lambda as it is now not supported? thanks

[dbuezas]

Update: use show_value
https://github.com/dbuezas/lovelace-plotly-graph-card#show_value

[dbuezas]

If you need to do something else and just need to know how to do this now, check out the "filters" section in the readme. And also "universal functions" if filters aren't enough

[fgonza2]

thanks! yeah i found the show_value. works great, great work by the way.

Also is this example is there a way to increase the font size only of the value marker ?

[dbuezas]

Setting show_value results in a new trace that inherits all properties of the original trace, but only has the last datapoint and the trace type is set to text.
This means that you style it by configuring the original trace "as if it was type=text"

To set the size, use this: https://plotly.com/javascript/reference/scatter/#scatter-textfont-size

i.e:

show_value: true
textfont:
  size: 10

[dbuezas]

Here's the source code in case you are interested
https://github.com/dbuezas/lovelace-plotly-graph-card/blob/master/src/parse-config/parse-config.ts#L198

[dbuezas]

Uhm... I'm overwriting the whole textfont key, this won't work as intended. Feel free to open a bug issue.