Adding latest value to graph title (& custom legend colours)

[CKerswell]

I have a graph to show the current temperature and thermostat setpoint for a given room and I wanted to put the room name and current temperature at the top of the graph as a title:

As you can see, I have achieve the goal, but I think in a very complicated way!
I could not see how to pull in an entity value to a text label, so instead I created a whole new entity and messed with the series formatting and axis values to position it where I wanted!

My question is, is there a better way to achieve what I am looking for that I have missed, and if not, is this a feature that others may also be interested in to add to the pot of future improvements?

type: custom:plotly-graph
entities:
  - entity: climate.loungetrv_climate::current_temperature
    name: °C
  - entity: climate.loungetrv_climate::temperature
    name: Target
  - entity: climate.loungetrv_climate
    showlegend: false
    show_value: false
    mode: text
    textfont:
      color: '#7f7f7f'
      size: 20
    texttemplate: 'Lounge: %{y:.1f}°C'
    yaxis: y2
    lambda: |-
      (ys, xs, entity) => {
      const result = {x:[], y:[]}
      result.y.push(+entity[ys.length-1].attributes.current_temperature)
      result.x.push(+(+xs[xs.length-1])-43200000)
      return result;
      }
hours_to_show: 24
refresh_interval: 10
layout:
  showlegend: true
  legend:
    'y': -0.12
  yaxis:
    range:
      - 8
      - 28
    tickmode: array
    tickvals:
      - 10
      - 12
      - 14
      - 16
      - 18
      - 20
      - 22
      - 24
      - 26
  yaxis2:
    visible: false
    range:
      - -500
      - 60
  xaxis:
    tickformat: '%H:%M'

[dbuezas]

Wow, that's extremely creative! Very impressive!

It would be super easy if jinja templates were supported in card yamls, but it doesn't seem like they are.
Therefore, I'm not aware of any easier way to achieve what you did.

[dbuezas]

You could use this: https://github.com/gadgetchnnel/lovelace-card-templater
And write:

title: {{sensors.blahbla}}}

[CKerswell]

Thanks for the compliment, but your solution is much smarter!
Work smarter, not harder!!

For anyone else who is interested, here is the neater solution as suggested by David:

type: custom:card-templater
card:
  type: custom:plotly-graph
  entities:
    - entity: climate.loungetrv_climate::current_temperature
      name: °C
    - entity: climate.loungetrv_climate::temperature
      name: Target
  hours_to_show: 24
  refresh_interval: 10
  layout:
    showlegend: true
    legend:
      'y': -0.12
    title:
      text_template: >-
        Lounge: {{ state_attr("climate.loungetrv_climate","current_temperature")
        }}°C
      'y': 0.9
      font:
        size: 20
    yaxis:
      range:
        - 8
        - 28
      tickmode: array
      tickvals:
        - 10
        - 12
        - 14
        - 16
        - 18
        - 20
        - 22
        - 24
        - 26
    xaxis:
      tickformat: '%H:%M'
entity: climate.loungetrv_climate

[dbuezas]

Looks perfect 👍
For reference, here's another alternative templatable card but based on JavaScript instead pf jinja2:
https://github.com/iantrich/config-template-card

[mdisabato]

Would this kind of thing work to change the color of the line based on a sensor value change?

Thanks.

[dbuezas]

In plotly, lines can have only one color

[AleXSR700]

Thank you for sharing :)
I was wondering if this could maybe be modified in a way that the value is formatted in the same color as the corresponding line?
I have a few graphs with multiple entities and I would like to have the current value matching the color of the line.
Kind of similar to this:

[CKerswell]

Hi, just had a quick look at this, I can't see any native way to match the test colour to the line colour...

However, if you are happy to specify both the line and text colour you could achieve this:

like this:

type: custom:config-template-card
entities:
  - climate.kitchenmaintrv_climate
card:
  type: custom:plotly-graph
  entities:
    - entity: sensor.outside_environmental_temperature
      name: >-
        ${'<span style="color:red">Outside ' +
        states['sensor.outside_environmental_temperature'].state + '°C</span>'}
      line:
        width: 2
        color: '#666666'
        shape: spline
        dash: dash
    - entity: climate.kitchenmaintrv_climate::current_temperature
      name: >-
        ${'<span style="color:#00FFFF; font-weight:bold">' +
        states['climate.kitchenmaintrv_climate'].attributes.current_temperature
        + '°C</span> Kitchen'}
      line:
        width: 2
        color: '#00FFFF'
        shape: spline
  hours_to_show: 12
  refresh_interval: 10
  config:
    scrollZoom: false
    dragmode: false
    displayModeBar: false
  layout:
    showlegend: true
    legend:
      'y': -0.15
    margin:
      l: 30
      r: 30
      b: 0
      t: 5
    yaxis:
      dtick: 1
      title: ''
      rangemode: normal
    yaxis2:
      mirroraxis: true
      matches: 'y'
      dtick: 1
      title: ''
    xaxis:
      tickformat: '%H:%M'
      fixedrange: true
      dtick: 3600000
  defaults:
    yaxes:
      fixedrange: true

NB: I've started to prefer using https://github.com/iantrich/config-template-card as it seems more flexible and easier to accommodate this sort of thing.

[AleXSR700]

Hello @CKerswell ,

I too am planning to do this with the config-template-card, but I somehow need to pass the color to the card (Ideally a separate card (e.g. entities card) so there is no layout issue with legend/text fields.

I am not to keen on doing this manually as I will also be using auto-entities, so a card can have anything from 1 to 20 sensors.

I was considering doing a math function on the color code and iterate per entity, but to be honest that will probably exceed my poor templating abilities.

This would probably require converting hex to rgb, then change color and convert back to hex. Then apply.

Alternative would be to create an array of values and assign them.

But anyhow, out of my league probably so I was hoping that there was a way to pass the color from plotly to the text somehow. I am guessing that plotly assigns coloar in the same order everytime. So there must be a function built-in that could be somehow read?

[dbuezas]

The color scheme is an array already. You can specify it yourself, and it should take rgb(r,g,b) and rgba formats too :)
See here: https://github.com/dbuezas/lovelace-plotly-graph-card#color-schemes

[AleXSR700]

Ph no, I looked for it in plotly forums/posts and never thought that you would even link to the code :duh:

But which array is then the default one? There is accent and different categories.
Or will those arrays only apply if I set a color scheme? So set a color scheme and then use the matching array?

[dbuezas]

The first one should be the default one. You can pass a name, a number, or your own color array.
Maybe you can copy an array from there and use it both for your template and for plotly