Use Icons as Scatter Point Text

[adegenkolbe]

Hi,

is there a way to use icons (Home assistant, fontawsome or google icon font https://fonts.google.com/icons? ) as the text of the scatter points ?
I installed the fontawesome integration via hacs and tried something like

- entity: sensor.my_ev_price_display_tibber_sensor
    name: Strompreis
    yaxis: y1
    showlegend: false
    fill: none
    mode: lines+text
    text: <i class="fa-solid fa-car"></i>

but i dont see the icon.

Would be nice if someone had a solution. As i said also the default home assistant icon would be sufficiant.

BR
Andy

[dbuezas]

I don't think it is possible. The closest thing is using emojis. Just copy and paste them from e.g https://emojipedia.org/

[adegenkolbe]

Thanks for the quick reply.
Are Plotly images (https://plotly.com/javascript/images/) supported by the card. I tried but i can’t get them to work

[dbuezas]

Oh, good idea. They should work, send me the yaml

[adegenkolbe]

Hi, here is the code. Maybe it can be optimised.

What i want to achieve is to display electricity prices for 2 days.
If the price is below an calculated average the line should be green, if the price is above the average the line should be orange.
Therefore i have two sensors. One giving the prices below, one giving the prices above. I don't know if it would also be possible with one sensor. The sensors return '["time":"datetime, "price":price}]'
Furthermore i have an integration which determines the cheapest hours for charging my car. This graph is drawn in blue and filled to y0. In most cases it will only be one (as mostly the car is charged in serval combined hours, but sometimes it is cheaper to split it up).
With the icons (or images) i want to place a car icon/picture in the middle of these "rects".
In most cases it will only be one (as mostly the car is charged in serval combined hours, but sometimes it is cheaper to split it up).
Therefore i have a seperate sensor calculating the "middle" of these hours an retturns an array of {time,avg_price} values.

In the below code i only test with one picture placing it at the "now" point.
This must be replaced by the values from the graph of "Lademarker" (see also below) or to be more precise the „Lademarker“ Graph should be replaced by the images.

type: custom:plotly-graph
refresh_interval: 20
hours_to_show: 11
period: hour
autorange_after_scroll: false
title: null
view_layout:
  grid-area: chart
config:
  scrollzoom: false
  autoScale: true
  disablePinchToZoom: false
  displayModeBar: false
  staticPlot: false
layout:
  height: 250
  images:
    - source: /local/images/car.png
      sizex: 1
      sizey: 1
      x: |-
        $fn ({hass}) =>{
          Date.now()
        }
      'y': |-
        $fn ({hass}) =>{
         return hass.states['sensor.my_ev_price_display_tibber_sensor'].attributes.yscaleMin
        }
  xaxis:
    dragmode: false
    fixedrange: true
    dtick: 14400000
    tickformat: |
      %H:%M
      %d.%m.%Y
    range:
      - >-
        $ex
        hass.states['sensor.my_ev_price_display_tibber_sensor'].attributes.all_prices[4]['time']
      - >-
        $ex
        hass.states['sensor.my_ev_price_display_tibber_sensor'].attributes.all_prices.at(-1)['time']
  yaxis:
    dtick: >-
      $ex
      hass.states['sensor.my_ev_price_display_tibber_sensor'].attributes.yscaleStep
    range:
      - >-
        $ex
        (hass.states['sensor.my_ev_price_display_tibber_sensor'].attributes.yscaleMin
        - 5)
      - >-
        $ex
        (hass.states['sensor.my_ev_price_display_tibber_sensor'].attributes.yscaleMax
        +
        hass.states['sensor.my_ev_price_display_tibber_sensor'].attributes.yscaleStep)
    fixedrange: true
  round: 2
entities:
  - entity: sensor.my_ev_price_display_tibber_sensor
    name: Strompreis
    yaxis: y1
    showlegend: false
    fill: none
    mode: lines
    fillcolor: orange
    line:
      color: orange
      width: 2
    filters:
      - store_var: my_ev_price_tibber_sensor
      - fn: |-
          ({ meta, vars }) => ({
            xs: [vars.my_ev_price_tibber_sensor.xs.slice(-1)[0],...meta.greater_avg.map(({ time }) => new Date(time))],
            ys: [vars.my_ev_price_tibber_sensor.ys.slice(-1)[0],...meta.greater_avg.map(({ price }) => price)],
          })
  - entity: sensor.my_ev_price_display_tibber_sensor
    name: Strompreis
    yaxis: y1
    showlegend: false
    fill: none
    fillcolor: rgba(3, 143, 46,.1)
    mode: lines
    line:
      color: rgba(3, 143, 46, 1)
      width: 2
    filters:
      - store_var: my_ev_price_tibber_sensor
      - fn: |-
          ({ meta, vars }) => ({
            xs: [vars.my_ev_price_tibber_sensor.xs.slice(-1)[0],...meta.smaller_avg.map(({ time }) => new Date(time))],
            ys: [vars.my_ev_price_tibber_sensor.ys.slice(-1)[0],...meta.smaller_avg.map(({ price }) => price)],
          })
  - entity: sensor.my_ev_price_display_tibber_sensor
    name: Ladezeit
    yaxis: y1
    showlegend: false
    fill: tozeroy
    fillcolor: rgba(173, 216, 230,0.15)
    line:
      color: transparent
      width: 0
    filters:
      - store_var: my_ev_price_tibber_sensor
      - fn: |-
          ({ meta, vars }) => ({
            xs: [vars.my_ev_price_tibber_sensor.xs.slice(-1)[0],...meta.charging_plan.map(({ time }) => new Date(time))],
            ys: [vars.my_ev_price_tibber_sensor.ys.slice(-1)[0],...meta.charging_plan.map(({ price }) => price > 0 ? 4000:0)],
          })
  - entity: sensor.my_ev_price_display_tibber_sensor
    name: Lademarker
    yaxis: y1
    mode: text
    type: scatter
    showlegend: false
    text: ' 🔌'
    textposition: middle center
    textfont:
      size: 30
    filters:
      - store_var: my_ev_price_tibber_sensor
      - fn: |-
          ({ meta, vars }) => ({
            xs: [vars.my_ev_price_tibber_sensor.xs.slice(-1)[0],...meta.charging_marker.map(({ time }) => new Date(time))],
            ys: [vars.my_ev_price_tibber_sensor.ys.slice(-1)[0],...meta.charging_marker.map(({ price }) => price)],
          })
  - entity: sensor.my_ev_price_display_tibber_sensor
    name: Now
    yaxis: y1
    showlegend: false
    line:
      width: 2
      dash: dot
      color: deepskyblue
    x: $fn () => [Date.now(), Date.now()]
    'y':
      - 0
      - 4000

Here is a picture as it is now (without planed charging).

Thanks for your help in advance.

BR
Andy

[dbuezas]

very cool!

[adegenkolbe]

It is working now.

There are several options you can use and i think none of them is really obvious 😄
For x and y values you can use paper or one of the axis a reference.
If you use paper, you have to work with "percentages". If you use one axis as reference, the value you are using for x and y has to be explicitly part of the graph (means it has to be a specified data point and not one which come from connecting the single points). Furthermore the xsize of the image when you using the date axis as reference has to be defined as milliseconds 🤦

After i figured this out, I added a new attribute to my sensor which held a list of image objects with the calculated percentage value for the x positioning and static y value.
This works fine for know.

Again thanks for your time and support.

BR
Andy

[dbuezas]

Would you paste your final yaml and screenshot?

[adegenkolbe]

Hi,

i made some more tweaks.
Here is the yaml:

type: custom:plotly-graph
refresh_interval: 20
hours_to_show: 11
period: hour
autorange_after_scroll: false
title: null
view_layout:
  grid-area: chart
config:
  scrollzoom: false
  autoScale: true
  disablePinchToZoom: false
  displayModeBar: false
  staticPlot: false
layout:
  height: 250
  xaxis:
    dragmode: false
    type: date
    fixedrange: true
    dtick: 14400000
    tickformat: |
      %H:%M
      %d.%m.%Y
    range:
      - >-
        $ex
        hass.states['sensor.my_ev_price_display_tibber_sensor'].attributes.all_prices[4]['time']
      - >-
        $ex
        hass.states['sensor.my_ev_price_display_tibber_sensor'].attributes.all_prices.at(-1)['time']
  yaxis:
    dtick: >-
      $ex
      hass.states['sensor.my_ev_price_display_tibber_sensor'].attributes.yscaleStep
    range:
      - >-
        $ex
        (hass.states['sensor.my_ev_price_display_tibber_sensor'].attributes.yscaleMin
        - 5)
      - >-
        $ex
        (hass.states['sensor.my_ev_price_display_tibber_sensor'].attributes.yscaleMax
        +
        hass.states['sensor.my_ev_price_display_tibber_sensor'].attributes.yscaleStep)
    fixedrange: true
  round: 2
  images: |-
    $ex
     hass.states['sensor.my_ev_price_display_tibber_sensor'].attributes.charging_marker
entities:
  - entity: sensor.my_ev_price_display_tibber_sensor
    name: Strompreis
    yaxis: y1
    showlegend: false
    fill: tonext
    mode: lines
    fillcolor: rgba(255,165,0,.15)
    line:
      color: orange
      width: 2
    filters:
      - store_var: my_ev_price_tibber_sensor
      - fn: |-
          ({ meta, vars }) => ({
            xs: [vars.my_ev_price_tibber_sensor.xs.slice(-1)[0],...meta.greater_avg.map(({ time }) => new Date(time))],
            ys: [vars.my_ev_price_tibber_sensor.ys.slice(-1)[0],...meta.greater_avg.map(({ price }) => price)],
          })
  - entity: sensor.my_ev_price_display_tibber_sensor
    name: Strompreis
    yaxis: y1
    showlegend: false
    fill: tozeroy
    fillgradient:
      stop: >-
        $ex
        hass.states['sensor.my_ev_price_display_tibber_sensor'].attributes.avg_price
      start: 0
      colorscale:
        - - 0
          - rgba(0, 0, 0, 0.0);
        - - 1
          - rgba(3, 143, 46,0.25)
      type: vertical
    type: scatter
    mode: none
    filters:
      - store_var: my_ev_price_tibber_sensor
      - fn: |-
          ({ meta, vars }) => ({
            xs: [vars.my_ev_price_tibber_sensor.xs.slice(-1)[0],...meta.smaller_avg.map(({ time }) => new Date(time))],
            ys: [vars.my_ev_price_tibber_sensor.ys.slice(-1)[0],...meta.smaller_avg.map(({ price }) => price == null ? meta.avg_price : price )],
          })
  - entity: sensor.my_ev_price_display_tibber_sensor
    name: Strompreis
    yaxis: y1
    showlegend: false
    fill: none
    fillcolor: rgba(3, 143, 46,.1)
    type: scatter
    mode: lines
    line:
      color: rgba(3, 143, 46, 1)
      width: 2
    filters:
      - store_var: my_ev_price_tibber_sensor
      - fn: |-
          ({ meta, vars }) => ({
            xs: [vars.my_ev_price_tibber_sensor.xs.slice(-1)[0],...meta.smaller_avg.map(({ time }) => new Date(time))],
            ys: [vars.my_ev_price_tibber_sensor.ys.slice(-1)[0],...meta.smaller_avg.map(({ price }) => price)],
          })
  - entity: sensor.my_ev_price_display_tibber_sensor
    name: Ladezeit
    yaxis: y1
    showlegend: false
    fill: tozeroy
    fillcolor: rgba(173, 216, 230,0.15)
    line:
      color: transparent
      width: 0
    filters:
      - store_var: my_ev_price_tibber_sensor
      - fn: |-
          ({ meta, vars }) => ({
            xs: [vars.my_ev_price_tibber_sensor.xs.slice(-1)[0],...meta.charging_plan.map(({ time }) => new Date(time))],
            ys: [vars.my_ev_price_tibber_sensor.ys.slice(-1)[0],...meta.charging_plan.map(({ price }) => price > 0 ? 4000:0)],
          })
  - entity: sensor.my_ev_price_display_tibber_sensor
    name: Now
    yaxis: y1
    showlegend: false
    line:
      width: 2
      dash: dot
      color: deepskyblue
    x: $fn () => [Date.now(), Date.now()]
    'y':
      - 0
      - 4000

The sensor for the image(s) returns something like this:

charging_marker: 
- source: /local/images/car-electric-outline.svg
  x: 0.42
  'y': 0.15
  xanchor: center
  yanchor: middle
  sizex: 0.15
  sizey: 0.15
  layer: above

And here is the screenshot:

BR
Andy