How to make the background transparent? (for in the picture-elements-card)

[Photelegy]

Hi again,

I'm really in love with this plotly-graph-card and wan't to include it into the picture-elements-card for weather graphs.

How can I make the background of your card fully or partially transparent (opacity)?

I found and tried it with this:

layout:
  paper_bgcolor: rgba(0, 100, 0, 0.3)
  plot_bgcolor: rgba(100, 0, 0, 0.3)

(I just made the background colors here green and red to better see which is which.)

It doesn't work. It makes it 30% transparent but it seems to me that behind is another background which I is dark grey.
How can I get this background also transparent to see the map behind it?

Thank you very much!

type: picture-elements
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.3)
      plot_bgcolor: rgba(100, 0, 0, 0.3)
      font:
        size: 26
      height: 850
      margin:
        t: 10
        l: 80
        r: 5
      grid:
        rows: 2
        columns: 1
        roworder: top to bottom
      yaxis:
        title: Temperatur [°C]
        color: black
      yaxis2:
        title: Δ Temperatur [°C]
        color: black
        fixedrange: false
        range:
          - -15
          - 10
      showlegend: true
      legend:
        x: 0
        'y': -0.22
        bgcolor: rgba(0,0,0,.7)
        orientation: h
        itemsizing: constant
      shapes:
        - type: rect
          xref: paper
          x0: 0
          x1: 1
          yref: y1
          yanchor: 26
          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: 22
          y0: 26
          fillcolor: orange
          opacity: 0.3
          layer: below
          line:
            width: 0
        - type: rect
          xref: paper
          yref: y1
          x0: 0
          x1: 1
          y1: 22
          y0: 20
          fillcolor: '#1c7d01'
          opacity: 0.4
          layer: below
          line:
            width: 0
        - type: rect
          xref: paper
          yref: y1
          x0: 0
          x1: 1
          y1: 20
          y0: 18
          fillcolor: '#02dbc6'
          opacity: 0.3
          layer: below
          line:
            width: 0
        - type: rect
          xref: paper
          yref: y1
          x0: 0
          x1: 1
          yanchor: 18
          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: '-22%'
      left: '-20%'
      transform: scale(0.24)
image: https://demo.home-assistant.io/stub_config/floorplan.png

[dbuezas]

I assume that's the ha-card element that wraps everything. There's currently no way to style that within the card itself.
I'll need to confirm first, but i think I can add an extra config parameter to style the wrapper element.
I'll let you know if this worked

[dbuezas]

Yes it is the css of the ha-card.

It looks like I can set it to transparent always and it will look fine.

I made a new beta version 1.3.2.
To test it, go to HACS, press the 3 dots in the plotly card, update card, click "show beta versions", and select v1.3.2.

Please tell me if this and all other plots work fine and I'll make it official.

BTW: Happy to hear this card is fun and useful for you!

[dbuezas]

Once you finish your card, please make a "Show & Tell" post with yaml and a screenshot. I bet others will also like the idea! :)

[Photelegy]

It works perfect as far as I see!

Thank you so much for your great work!