Erfahrungen mit Transparenz

[alexamend]

Der nachstehende Code betrifft die unterste Grafik, diese soll zusätzlich transparent dargestellt werden, hat hier jemand Erfahrung warum in diesem Fall diese nicht greift?

Dies nutze ich normalerweise für die Transparenz, was an alles anderen Karten auch greift nur in der unteren Karte nicht, verstehe aktuell nicht warum...

style: |
  ha-card {
  opacity: 80%
  }

type: custom:apexcharts-card
style: |
  ha-card {
  opacity: 80%
  }
header:
  show: true
  show_states: true
graph_span: 14d
series:
  - entity: sensor.signify_netherlands_b_v_sml004_temperature_2
  - entity: sensor.signify_netherlands_b_v_sml004_temperature
    type: column
    group_by:
      duration: 1d
      func: max
yaxis:
  - id: main
    min: 0
    align_to: 50
    apex_config:
      axisTicks:
        show: true
        width: 54
        offsetX: -6
        borderType: dotted
        color: rgba(var(--rgb-primary-text-color),.25)
      labels:
        offsetX: 8
        align: right
        style:
          fontSize: var(--h6-font-size)
          fontFamily: var(--font-stack)
apex_config:
  grid:
    borderColor: rgba(var(--rgb-primary-text-color),.25)
    strokeDashArray:
      - 1
      - 1
  plotOptions:
    bar:
      columnWidth: 16%
  xaxis:
    axisBorder:
      color: rgba(var(--rgb-primary-text-color),.25)
      offsetY: -1
    axisTicks:
      color: rgba(var(--rgb-primary-text-color),.25)
    labels:
      hideOverlappingLabels: false
      style:
        fontSize: var(--h6-font-size)
        fontFamily: var(--font-stack)
      datetimeFormatter:
        month: MMM
        day: d
      xformatter: |
        EVAL:function(value, timestamp) {
          return moment(timestamp).format("dd").charAt(0) + "\n" + moment(timestamp).format("D")
        }
card_mod:
  style: >
    #graph { margin: -8px; } #states__state { flex-direction: column-reverse;
    display: flex;} #state__name  { font-size: var(--body-font-size) !important;
    font-weight: normal !important; padding: 4px 0 12px; } #state__value >
    #state { font-size: var(--h1-font-size) !important; font-weight: 100
    !important; padding-right: 4px;} #state__value > #uom { font-size:
    var(--h6-font-size) !important; font-weight: 500 !important; text-transform:
    uppercase; }

Hier die Ansicht dazu.

 

[Steevee]

ich hab das mit der Transparenz neulich auch schon mal probiert. Jetzt auch nochmal mit deinem Code. Da wird leider nichts transparent.
Braucht das sonst noch was?

 

[alexamend]

Ja unter HACS card-mod und picture elements muss installiert sein.

 

[Steevee]

ah. Das card-mod hat gefehlt. Hatte ich doch neulich installiert, komisch. Ja jetzt gehts. Danke

 

[Steevee]

Die apexcharts-card hab ich auch mal installiert. Die geht auch mit Transparenz.

 

[alexamend]

Die apexcharts-card hab ich auch mal installiert. Die geht auch mit Transparenz.

Anhang anzeigen 3556

Kannst du den Code mal posten, bei mir wird genau in der Karte nix transparent.

 

[Steevee]

das ist die Standarteinstellungen nur das style ist von mir

type: custom:apexcharts-card
header:
  show: true
  title: ApexCharts-Card
  show_states: true
  colorize_states: true
series:
  - entity: sensor.power_ges
    data_generator: |
      // REMOVE ME
      const now = new Date();
      const data = [];
      for(let i = 0; i <= 24; i++) {
        data.push([now.getTime() - i * 1000 * 60 * 60, Math.floor((Math.random() * 10) + 1)])
      }
      return data.reverse();
  - entity: sensor.l1_power
    type: column
    data_generator: |
      // REMOVE ME
      const now = new Date();
      const data = [];
      for(let i = 0; i <= 24; i++) {
        data.push([now.getTime() - i * 1000 * 60 * 60, Math.floor((Math.random() * 10) + 1)])
      }
      return data.reverse();
style: |
  ha-card {
  opacity: 80%
  }