Plotly interactive Graph Card

Question about de scaling of the yaxis. For de voltage per phase I monitor the min and max each day.

Normally the chart looks like the picture below.

A few days ago there was a problem on grid and now the chart is a littlebit ugly.

I could filter the value away with “filter” but that is not what is want, because then i lose the ‘information’. I tried a few settings on this page Layout.yaxis in Python, but without succes.
Is it possible to ignore the low for the autorange and use a fixed value instead?

  - type: custom:plotly-graph
    view_layout:
      grid-area: plotly_fase_V_info
    entities:
      - entity: sensor.electricity_meter_spanning_fase_l1
        texttemplate: "%{y:.3f}"
        hovertemplate: "%{y:.0f}V"
        textfont:
          size: 8
          color: "#ffffff"
        line:
          shape: spline
          color: rgba(250, 165, 0, 1) #FAA500
        yaxis: "y1"
        fill: none
        statistic: max
        name: L1
        period: day
        filters:
          - map_y: parseFloat(y)
          - filter: i>0
        legendgroup: L1
      - entity: sensor.electricity_meter_spanning_fase_l1
        texttemplate: "%{y:.3f}"
        hovertemplate: "%{y:.0f}V"
        textfont:
          size: 8
          color: "#ffffff"
        line:
          shape: spline
          color: rgba(250, 165, 0, 1) #FAA500
        yaxis: "y1"
        fill: tonexty
        fillcolor: rgba(250, 165, 0, 0.2) #FAA500
        statistic: min
        name: L1L
        period: day
        filters:
          - map_y: parseFloat(y)
          - filter: i>0
        legendgroup: L1
        showlegend: false
      - entity: sensor.electricity_meter_spanning_fase_l2
        texttemplate: "%{y:.3f}"
        hovertemplate: "%{y:.0f}V"
        textfont:
          size: 8
          color: "#ffffff"
        line:
          shape: spline
          color: rgba(250, 140, 0, 1) #fa8c00
        yaxis: "y1"
        fill: none
        statistic: max
        name: L2
        period: day
        filters:
          - map_y: parseFloat(y)
          - filter: i>0
        legendgroup: L2
      - entity: sensor.electricity_meter_spanning_fase_l2
        texttemplate: "%{y:.3f}"
        hovertemplate: "%{y:.0f}V"
        textfont:
          size: 8
          color: "#ffffff"
        line:
          shape: spline
          color: rgba(250, 140, 0, 1) #fa8c00
        yaxis: "y1"
        fill: tonexty
        fillcolor: rgba(250, 140, 0, 0.2) #fa8c00
        statistic: min
        name: L2L
        period: day
        filters:
          - map_y: parseFloat(y)
          - filter: i>0
        legendgroup: L2
        showlegend: false
      - entity: sensor.electricity_meter_spanning_fase_l3
        texttemplate: "%{y:.3f}"
        hovertemplate: "%{y:.0f}V"
        textfont:
          size: 8
          color: "#ffffff"
        fill: none
        line:
          shape: spline
          color: rgba(250, 190, 0, 1) #fabe00
        yaxis: "y1"
        statistic: max
        name: L3
        period: day
        filters:
          - map_y: parseFloat(y)
          - filter: i>0
        legendgroup: L3
      - entity: sensor.electricity_meter_spanning_fase_l3
        texttemplate: "%{y:.3f}"
        hovertemplate: "%{y:.0f}V"
        textfont:
          size: 8
          color: "#ffffff"
        line:
          shape: spline
          color: rgba(250, 190, 0, 1) #fabe00
        yaxis: "y1"
        fill: tonexty
        fillcolor: rgba(250, 190, 0, 0.2) #fabe00
        statistic: min
        name: L3L
        period: day
        filters:
          - map_y: parseFloat(y)
          - filter: i>0
        legendgroup: L3
        showlegend: false
      - entity: ""
        name: Max
        texttemplate: "%{y:.3f}"
        hovertemplate: "%{y:.0f}V"
        textfont:
          size: 8
          color: "#ffffff"
        line:
          color: rgba (255, 0, 0, 1) #ff0000
        # showlegend: false
        x: [0, "$ex Date.now()"]
        y: [253, 253]
        yaxis: "y1"
      - entity: ""
        # https://github.com/dbuezas/lovelace-plotly-graph-card/discussions/311
        name: Min
        texttemplate: "%{y:.3f}"
        hovertemplate: "%{y:.0f}V"
        textfont:
          size: 8
          color: "#ffffff"
        line:
          color: rgba (255, 0, 0, 1) #ff0000
        # showlegend: false
        # visible: legendonly
        x: [0, "$ex Date.now()"]
        y: [207, 207]
        yaxis: "y1"
    autorange_after_scroll: true
    layout:
      title: Spanning fase min/max
      barmode: relative
      height: 500
      yaxis: #https://plotly.com/python/reference/layout/yaxis/
        # https://github.com/dbuezas/lovelace-plotly-graph-card/discussions/329
        # autorange: true
        # autorangeoptions:
        # clipmin: 200
        # clipmax: 260
        # minallowed: 200
        # maxallowed: 260
        # minallowed: 200
        # maxallowed: 260
        # range:
        # - 200
        # - 260
        fixedrange: true
      xaxis:
        showgrid: false
      hoverlabel:
        align: auto
      hovermode: x unified
      dragmode: pan
    hours_to_show: 120d

@mateine
I really appreaciate your help. That works (almost).

  • Can you tell me why there are no horizontal grid lines in the lower graph?

AND

  • How do I find the possible options working under Plotly Card? I found the ploty homepage and documentation but I’m not sure how to translate the plotly python code to statements in the plotly card. Is there a simple rule? E.g. I found the plotly documentation for subplots (Subplots in Python) but was not able to transfer that to the plotly card. “overlaying” keyword I did not see at all.

Many thanks for your help,
RB

type: custom:plotly-graph
entities:
  - entity: sensor.eu08l_hp1_cop
    yaxis: 'y'
    name: COP
    mode: lines
    show_value: true
    line:
      shape: line
      color: green
      width: 1
  - entity: sensor.EU08L_Hp1_Flow_Line_Temperature
    name: Temperatur Vorlauf
    yaxis: y2
    mode: lines
    show_value: true
    line:
      shape: line
      color: red
      width: 1
  - entity: sensor.eu08l_Hp1_return_line_temperature
    name: Temperatur Rücklauf
    yaxis: y2
    mode: lines
    show_value: true
    line:
      shape: line
      color: blue
      width: 1
hours_to_show: 168
refresh_interval: 10
title: Heizung
layout:
  height: 500
  grid:
    rows: 2
    columns: 1
    roworder: top to bottom
    ygap: 0.1
  yaxis:
    title:
      text: COP.
  yaxis2:
    title:
      text:
        - °C
  annotations:
    - text: COP
      showarrow: false
      x: 0.5
      xref: paper
      'y': 1.1
      yref: y domain
      font:
        size: 14
    - text: Temperatur
      showarrow: false
      x: 0.5
      xref: paper
      'y': 1.1
      yref: y2 domain
      font:
        size: 14
defaults:
  yaxes:
    side: left
    overlaying: 'y'
  xaxis:
    rangeselector:
      'y': 1.15
      buttons:
        - count: 1
          step: minute
        - count: 15
          step: minute
        - count: 1
          step: hour
        - count: 12
          step: hour
        - count: 1
          step: day
        - count: 7
          step: day

You can either set a fixed range, remove datapoints or leave auto range on. That’s it for the moment

1 Like

I really appreaciate your help. That works (almost).

:tada:

Can you tell me why there are no horizontal grid lines in the lower graph?

I don’t know why that’s happening, try google or chatgpt on how to force a specific grid spacing.

How do I find the possible options working under Plotly Card?

The translation is simple: instead of javascript object, use yaml notation. I suggest you try with plotlyjs instead of plotly python, the translation is more direct: write yaml instead of js objects. You can google or ask ChatGPT “how to xyz in plotlyjs”.
In JS, plotly gets 3 parameters: data, layout and config. Data is the entities, layout is layout and config is config. There are a bunch of extra features I added, which are in the readme of the repo.

Also, use the example index linked in the repo

@mateine,
many thanks.

I found a parameter “showgrid: true” which fixes the y-grid lines in the lower graph.

May I ask you another question?

I have a signal of states (_txt) which I want to show in a plotly graph as a subplot - as shown in the picture using a history-graph which, of course, is independent of the plotly graph below. But I would like to zoom all three graphs together.

Is it possible with plotly to re-create the history-card as shown so that I can add it as a subplot?

Many thanks for your help.

For reference the yaml of the history card:

cards:
  - type: history-graph
    entities:
      - entity: sensor.eu08l_hp1_operating_state_txt
        name: Mod.
      - entity: sensor.eu08l_hp1_request_type_txt
        name: Req.
    title: Betriebsmodus
    hours_to_show: 168

I found a parameter “showgrid: true” which fixes the y-grid lines in the lower graph.

Well done! I wonder what deactivated it in the first place?

Is it possible with plotly to re-create the history-card as shown so that I can add it as a subplot?

Maybe, i never tried

What a great card, I cannot believe, I just found it… :open_mouth: :partying_face: Thank you very much! :slight_smile:

But, as with most “new” things, I already could use your oppinion. :slight_smile:

What I’m after is some kind of graph, to show a “comfort zone”. I’m using the Thermal Comfort integration (forum thread | Github) and want to show, preferrably in 3D, if the actual values are in that comfort zone.

I’m thinking about using a scatter3D. Do you have other ideas, what to use or how to show something like this?

Thanks for your help (and again for the card)! :slight_smile:

1 Like

Maybe heatmaps?
You may find inspiration in the examples index: lovelace-plotly-graph-card/discussion-index.md at c43112dd9dcb9d4249b6eaf81c44954a609334d6 · dbuezas/lovelace-plotly-graph-card · GitHub

1 Like

That’s a good idea, I’ll try that, thank you! :+1:

I saw that massive example section, and already found two other Apex-charts that I want to replace with examples from that page… :joy:

I’ll tinker around with it, and I’m sure I’ll be back with stupid questions! :joy:

Thanks and have a good start in the upcoming week! :slight_smile:

1 Like

From the documentation of Plotly i can see that barcornerradius is an option:

But when I add it in the yaml it does not work. Can this be because it recently was added to Plotly?

I tried the following two options without succes

type: custom:plotly-graph

entities:
  - entity: sensor.people_in_hallway
    type: bar
    marker:
      cornerradius: 15

layout:
  barcornerradius: 20%



You’re right with your guess, the version of Plotly that is used by this card is 2.18.1 (see here), but the cornerradius is only available since 2.29.0 (see here).

I can’t say if this works out of the box, if the Plotly version is updated, but with the version used in this card, it is def. not available atm. Sorry! :slight_smile:

1 Like

I would like to produce a heatmap or histogram2d similar to the following that shows per hour blocks of exported electricity. Has anybody produced something similar?

I want to plot the percentage charge of my solar panel battery. It is set up so that it will always be between 40% and 100%. Therefore simply plotting the values means I have a large space under the plot the whole time.
I’ve tried a ‘- map_y_numbers’ function to subtract 40 but that alters the ‘y’ scale as well.
Is there a way that I can only display the values from 40 to 100 while keeping the Y scale from 40 to 100 as well? (Something like the ‘time_offset’ but for the Y axis.)
Susan

Edit: I think I found it:

layout:
  yaxis:
    fixedrange: true
    range:
      - 40
      - 100

Hello to everyone, i need your help.
i’ve a graph with: solar elevation, solar lux and precipitation (past and forecasted). The problem is that Y axis are mixed and negative solar elevation appears above the other data. Someone can help me fix this? or, how can i apply a filter to remove <0 elevation? i’ve a similar problem when precipitations (past and forecasted) are zero, its yaxis go in the middle of the graph.

i mean, zero should be zero for each axis :slight_smile:

type: custom:plotly-graph
entities:
  - entity: sensor.sun_solar_elevation
    showlegend: false
    fill: tozeroy
    fillcolor: rgba(255, 255, 128, 0.2)
    line:
      color: rgba(255, 230, 128, 1)
      width: 1
  - entity: sensor.ecowitt_ws2900_solar_lux
    showlegend: false
    fill: tozeroy
    fillcolor: rgba(255, 181, 129, 0.7)
    line:
      color: rgba(255, 145, 138, 0.9)
      width: 1
  - entity: sensor.ecowitt_ws2900_hourly_rain_rate
    fillcolor: rgba(31, 119, 180,.6)
    line:
      color: rgba(31, 119, 180, 1)
    legendgroup: 1
    showlegend: false
    name: 🌧 Precipitation
    filters:
      - store_var: precipitation
    fill: tozeroy
  - entity: sensor.weather_channel_forecast_hourly
    legendgroup: 1
    showlegend: false
    name: Precipitation
    fill: tozeroy
    fillcolor: rgba(31, 119, 180,.3)
    line:
      color: rgba(31, 119, 180, 1)
      dash: dot
    unit_of_measurement: mm
    filters:
      - fn: |-
          ({ meta, vars }) => ({
            xs: [vars.precipitation.xs.slice(-1)[0],...meta.forecast.map(({ datetime }) => new Date(datetime))],
            ys: [vars.precipitation.ys.slice(-1)[0],...meta.forecast.map(({ precipitation }) => precipitation)],
          })
  - entity: ''
    name: Now
    showlegend: false
    line:
      width: 2
      dash: dot
      color: rgba(144, 191, 255, 0.9)
    x: $ex [Date.now(), Date.now()]
    'y':
      - 0
      - 10
time_offset: 8h
hours_to_show: 24
refresh_interval: 10
layout:
  autosize: true
  margin:
    autoexpand: true
  font:
    family: Geologica
  xaxis:
    rangeselector:
      'y': 1.1
      buttons:
        - count: 7
          step: day
        - count: 3
          step: day
        - count: 1
          step: day
        - count: 12
          step: hour

image

thanks you all in advance

This example is relevant: Heatmap of 30-Panel Solar Array's Current States · dbuezas/lovelace-plotly-graph-card · Discussion #277 · GitHub

I guess you want the zero on all axes to be in the same place, right?
There’s unfortunately no feature in plotly for that, you may want to watch this issue: Multi values graph do not share same ZERO · Issue #4712 · plotly/plotly.py · GitHub

Thanks so much, i will follow it. for the moment i’ve removed the tozeroy filling and seems the problem is “fixed”.

Hi, I’m noticing one strange bheavior in my graphs.
I use HA on PC, tablet and smartphone, on PC and smartphone the data are always correct but on tablet, wich is always on with HA running (with connection closes after 5 minutes) some times the graph is not updated correctly. if I reload HA the graph are show correctly
is there some parameter to clear cache before loading data? or something like that?

For water useage I have a chart with bars with historic use each hour. Now I am trying to change the hoverlegend timestamp. The stamp is now “21 aug 2024, 02:00”
water per uur

The stamp that I am trying to create is ma 21 aug 2024, 02:00 - 03:00

For the entity I used the hovertemplate: "%{y:.0f}L".

I tried to add the date by the entity with hovertemplate: "%{x|%a %e %b %Y, %H:00}-HH %{y:.0f}L", but then it is added to the entity only and not changed for the “hover legend”.

water per uur 2

  1. Can I change the timestamp somewhere in the layout and not only for the entity so I can change the stamp of the total hover legend?
  2. How can I perform calculations to make the “HH” + 1 hour?

Does someone have a example or idea how to change it or point me in a direction what to use?