Transparent plotly-graph (e.g. for in Picture-Elements-Card)

[Photelegy]

For my home-map I needed a transparent plotly-graph.
After talking with dbuezas (the creater of this card) about this (#47) it now is possible to make the plotly-graph partially or full transparent. 😍

Since the Version v1.3.2 (at the moment only Beta) the complete-background of the plotly-graph-card is now transparent by standard, so with paper_bgcolor: and plot_bgcolor: you can make it as transparent or colored as you like.

paper_bgcolor:: Color of the whole card (in this example: green with 50% opacity/transparency)
plot_bgcolor:: Color of the coordinate system (in this example: red with 30% opacity/transparency)
Maybe you also need to recolor the text e.g. for the axis.

type: picture-elements
title: How to make Plotly transparent?
elements:
  - type: custom:plotly-graph
    entities:
      - entity: sensor.openweathermap_temperature
        name: OpenWeather
        yaxis: y1
        line:
          color: red
          width: 4
    hours_to_show: 48
    refresh_interval: 60
    layout:
      paper_bgcolor: rgba(0, 100, 0, 0.5)
      plot_bgcolor: rgba(100, 0, 0, 0.3)
      font:
        size: 26
      height: 500
      margin:
        t: 10
        l: 100
        r: 5
      xaxis:
        color: black
      yaxis:
        title: Temperatur [°C]
        color: black
      showlegend: false
    style:
      top: '7%'
      left: '-16%'
      transform: scale(0.4)
image: https://demo.home-assistant.io/stub_config/floorplan.png

So many thanks to the awsome creator of this really powerfull card!!! 👏👏👏

I'm very interested to see with what kind of ideas other people came up.

---

My full code with additional features used:

• multiple y-axes (multiple yaxis not working for me #39)
• colored areas and lines (How to add background colors (gradient or areas) or colorize specific grid lines? #45)
  

type: picture-elements
title: How to make Plotly transparent?
elements:
  - type: custom:plotly-graph
    entities:
      - entity: sensor.gersau_temperature
        name: Gersau
        yaxis: y1
        line:
          color: green
          width: 5
      - entity: sensor.openweathermap_temperature
        name: OpenWeather
        yaxis: y1
        line:
          color: blue
          width: 5
      - entity: sensor.sensor_motion_eingang_temperature
        name: Eingang (indoor)
        yaxis: y1
        line:
          color: red
          width: 5
      - entity: sensor.temperature_outdoor_difference
        name: (Δ Outdoor vs. Indoor)
        yaxis: y2
        line:
          color: violet
          width: 5
    hours_to_show: 48
    refresh_interval: 60
    layout:
      paper_bgcolor: rgba(0, 100, 0, 0.5)
      plot_bgcolor: rgba(100, 0, 0, 0.3)
      font:
        size: 26
      height: 850
      margin:
        t: 10
        l: 100
        r: 5
      grid:
        rows: 2
        columns: 1
        roworder: top to bottom
      xaxis:
        color: black
      yaxis:
        title: Temperatur [°C]
        color: black
        range:
          - 10
          - 30
      yaxis2:
        title: Δ Temperatur [°C]
        color: black
        fixedrange: false
        range:
          - -15
          - 10
      showlegend: true
      legend:
        x: 0
        'y': -0.22
        bgcolor: rgba(0,0,0,0.5)
        orientation: h
        itemsizing: constant
      shapes:
        - type: rect
          xref: paper
          x0: 0
          x1: 1
          yref: y1
          yanchor: 24
          ysizemode: pixel
          y1: 1000
          y0: 0
          fillcolor: red
          opacity: 0.3
          layer: below
          line:
            width: 0
        - type: rect
          xref: paper
          yref: y1
          x0: 0
          x1: 1
          y1: 24
          y0: 20
          fillcolor: green
          opacity: 0.4
          layer: below
          line:
            width: 0
        - type: rect
          xref: paper
          yref: y1
          x0: 0
          x1: 1
          yanchor: 20
          ysizemode: pixel
          y1: 0
          y0: -1000
          fillcolor: blue
          opacity: 0.3
          layer: below
          line:
            width: 0
        - type: line
          xref: paper
          yref: y2
          x0: -0.01
          x1: 1
          y1: 0.08
          y0: -0.08
          opacity: 1
          layer: below
          line:
            width: 1
            color: red
    no_default_layout: true
    defaults:
      entity:
        show_value:
          right_margin: 12
        line:
          shape: line
        lambda: |-
          (ys, xs) => {
            const MINUTES = 10               // <-- change here
            const window_size_ms = 1000*60*MINUTES 
            const result = {x:[], y:[]}
            let x_next = +xs[0] + window_size_ms
            let y_accum = 0
            let y_count = 0
            for (let i = 0; i < xs.length; i++) {
              const x = +xs[i]
              const y = +ys[i]
              if (x>x_next){
                result.y.push(y_accum/y_count)
                result.x.push(new Date(x_next))
                y_accum = 0
                y_count = 0
                x_next = +x + window_size_ms
              }
              if (y){
                // ignore unavailable/unknown state points
                y_accum += y
                y_count ++
              }
            } 
            return result;
          }
    style:
      top: '-26%'
      left: '-16%'
      transform: scale(0.4)
image: https://demo.home-assistant.io/stub_config/floorplan.png
```¨
![image](https://user-images.githubusercontent.com/61714583/171036164-71e75ef5-89ee-425a-8fc0-0a5ee4050e35.png)

[AleXSR700]

I tried adding paper and plot bg color to a standalone plotly graph and while it does work for transparency < 100%, I see a background when I set the transparency to 100%. In theory the entire plot should be transparent except for the lines, fonts etc. But there should not be a background.
Does anybody else see this or knows a fix?

Top is an apexcharts graph with card mod. So working background/card transparency. Bottom is plotly with rgba(0,0,0,0)

[AleXSR700]

How does it look in the companion app for you?

I switched to light theme and still see the background:

At the top still the apex with same code as before. And at the bottom the plotly does not look transparent to me. The background of the card is white and the theme itself seems more greyish compared.

Could you post a screenshot of a normal card (non-transparent) and then a transparent plotly card?

For reference, at the top of my screenshot are two cards. One for the input select and one for the apex chart. And as you see they have no background and no border. At the bottom the plotly has a border and a different background (in this case white).
Does plotly maybe set the background to system default or a theme or something instead of making it truly invisible?
(sorry, I am not a dev, so cannot explain better)

Edit:
Maybe also an interesting screenshot. One can clearly see how the backgrounds of the plotly are not transparent in the was as they do not see the background of the page. The background is the same as the "background" of the edit bar underneath the card (which is not the same as the actual page background).

[dbuezas]

Here's from chrome in mobile mode (phone looks the same:

And here's what happens when I change the background color (using a radial gradient to make it more visible):

Can you try doing the same in chrome to rule out any other factor (like having an old version of this card or other configuration interfering with the theme, etc)

[AleXSR700]

Chrome instead of Companion App:

So same problem.

Plotly card v1.3.1. Latest Home Assistant 2022.8.5.

I will try with Chrome on my PC later to check in developer options.

Edit: You used a theme to create the gradient background? Because I have no themes installed and can only select light and dark right now. I can install a theme if you want me to.

[AleXSR700]

If I go to the developer console in chrome and change the background color of the container of all cards in the dashboard (hui-view element), I see the card is fully transparent

How do you change that color?
By the way, could it have something to do with me having config template card / card-mod installed?

[dbuezas]

Yes, card-mod can change the background of cards, and may be the reason for that behaviour.
To change the color of the background like I did (and confirm the plotly card is/isn't transparent), follow these steps:

1. Right click on an empty space without cards, then click "inspect"

2. The developer tools window will open. It's very crowded but don't worry. The element containing whatever it is that you right clicked on will be selected

3. Go to the top right of that window, click and type background: red

4. The background of the whole dashboard should be red. Don't worry, the changes are not stored anywhere and reloading the page will undo it.

SECURITY NOTE: Do not trust ppl telling you to do things in the developer console unless you understand what you are being asked to do and/or trust the person. In principle, it is possible to steal credentials of the open website and whatnot by asking people to execute stuff in the console.

[AleXSR700]

Thank you for the explanation :)

And here is the result:

Clearly not transparent.

I cannot see how my code would be incorrect since I can change the color to whatever I want by simply setting transparency to a value > 0 and changing the RGB values. So the code seems to work. But maybe you see something?
Here is the full dashboard code:

views:
  - theme: Backend-selected
    title: Sony KD-75XF9005
    path: sony-kd-75xf9005
    badges: []
    cards:
      - type: entities
        card_mod:
          style: |
            ha-card {
              --ha-card-background: rgba(0, 0, 0, 0);
              --ha-card-box-shadow: none;
            }
        entities:
          - entity: input_select.days_back_to_show
            name: Number Of Days To Show
      - type: custom:config-template-card
        entities:
          - input_select.days_back_to_show
        variables:
          span: states['input_select.days_back_to_show'].state+'d'
          days: |
            -states['input_select.days_back_to_show'].state+'d'+'1d'
        card:
          type: vertical-stack
          cards:
            - type: custom:auto-entities
              sort:
                method: friendly_name
              filter:
                include:
                  - entity_id: sensor.sony_kd_75xf9005_power
                    options:
                      yaxis_id: first
                      stroke_width: 2
                      group_by:
                        func: raw
                      type: line
                      opacity: 1
                      curve: stepline
                      fill_raw: last
              card:
                type: custom:apexcharts-card
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-background: rgba(0, 0, 0, 0);
                      --ha-card-box-shadow: none;
                    }
                graph_span: ${span}
                yaxis:
                  - id: first
                    show: true
                    min: 0
                    decimals: 0
                  - id: second
                    show: true
                    min: 0
                    decimals: 2
                header:
                  title: Sony KD-75XF9005
                  show: true
                  show_states: true
                  colorize_states: true
                apex_config:
                  legend:
                    show: false
                  grid:
                    show: true
                  chart:
                    zoom:
                      enabled: true
                    pan:
                      enabled: true
                    toolbar:
                      show: true
                      tools:
                        zoom: true
                        zoomin: true
                        zoomout: true
                        pan: true
                        reset: true
      - type: custom:plotly-graph
        entities:
          - entity: sensor.sony_kd_75xf9005_power
        refresh_interval: 10
        hours_to_show: 12
        defaults:
          yaxes:
            fixedrange: true
            rangemode: tozero
        layout:
          paper_bgcolor: rgba(0,0,0,0)
          plot_bgcolor: rgba(0,0,0,0)
          xaxis:
            tickmode: linear
            tick0: '1980-09-25T00:00:00.000Z'
            dtick: 3600000

[dbuezas]

Ok, just reloading the page with that dashboard open should be enough

[AleXSR700]

New dashboard, same behaviour:

• plotly built-in feature not creating transparent card
• added different card (non plotly) and applied cass card-mod -> transparent card

So same as in other dashboard.

[dbuezas]

I'm out of ideas...
The only way I could find whats wrong is if I have your dashboard in my browser, or at least a copy of the whole page (cmd+s). The issue with that is that it is not safe for you to upload that.

[AleXSR700]

I will take a look at the data it produces and then see if I can trasmit it to you in private.

[dbuezas]

If you want to learn a bit of how css & html work, you could do the "inspect" trick and add background: rgba(0,0,0,0); to elements while going up the html tree starting inside the card.
At one point, the background will become transparent and you can show me which element it was (screenshot)

[AleXSR700]

Hello David,

sorry for the extremly late reply. I was away on business and then swamped with work at home.
But I now finally had a chance to test and found that this is where the card then turns transparent:

Anything below did not change anything.

EDIT: I should mention, that the card is not fully transparent as the border (I think it is officially the box shadow) is still visible.

EDIT 2:
I then tried to apply the custom-card-mod with the following code

type: custom:plotly-graph
entities:
  - entity: sun.sun
title: transparent background
layout:
  paper_bgcolor: rgba(255,0,0,0)
  plot_bgcolor: rgba(0,255,0,0)
card_mod:
  style: |
    ha-card {
      --ha-card-background: rgba(0, 0, 0, 0);
      --ha-card-box-shadow: none;
    }

When I do this, then the preview in the editor shows a transparent card. When I save the card, transparency is lost.
In addition it gets even more curious:
When I delete the layout paper_bgcolor etc., transparency is even lost in the editor preview. Only the combination of both showed a fully transparent preview (which is no longer transparent once I click save on the editor).

I hope that something is here that can help narrow down the issue. There seems to be something special about this card that prvents the normal card_mod to work and also prevents the cards layout options to fully work also.

Edit 3:
I then also checked the developer tools again. Maybe this is not strange, but to me it looks strange. The code above should mean that the card-mod is applied. But according to this, the card_mod part is empty and none.
In addition, on the right, the transparency values are not the ones I am setting.
Let me know which information I can try to extract for you.

[dbuezas]

To be honest, I have no idea what is going on :/
Did you test what happens if you (temporarily) remove the card_mod component?

[dbuezas]

Also, do you happen to have any custom theme applied? (https://www.home-assistant.io/integrations/frontend/)

[AleXSR700]

I had tried it before with all cards uninstalled except plotly, but with no luck.
I am using the default dark theme.

[dbuezas]

For me it works just fine :/
Did you also try this in an isolated card by itself? (i.e alone in the view)

One this you could do to dig deeper is to show me what you see when open this:

That is the element you told me you can manually make transparent, I want too see if there is anything else setting the background.
You can also switch to "computed" and show what color the background gets set to.

[AleXSR700]