ApexCharts card - A highly customizable graph card

Sure, here is the code :slight_smile:

type: custom:apexcharts-card
header:
  title: ''
  show: true
  show_states: true
  colorize_states: false
graph_span: 12h
apex_config:
  tooltip:
    enabled: false
  annotations:
    position: back
    yaxis:
      - 'y': 10
        strokeDashArray: 5
        borderColor: '#962626'
        borderWidth: 1
  xaxis:
    axisBorder:
      show: false
    labels:
      style:
        fontSize: 10px
        fontFamily: Segoe UI Light
  chart:
    height: 175
  grid:
    show: false
    borderColor: '#404040'
    strokeDashArray: 10
    position: back
  legend:
    show: false
  dataLabels:
    enabled: false
  stroke:
    width: 1
  fill:
    type: gradient
    gradient:
      type: vertical
      shadeIntensity: 0.8
      inverseColors: false
      opacityFrom: 0.5
      opacityTo: 0
      stops:
        - 0
yaxis:
  - min: 0
    max: ~10
    apex_config:
      forceNiceScale: true
      decimalsInFloat: 0
      labels:
        style:
          fontSize: 10px
          fontFamily: Segoe UI Light
series:
  - entity: sensor.marbg_wind_speed
    name: Vind
    type: area
    color: 3ca358
    float_precision: 0
    fill_raw: last
  - entity: sensor.marbg_wind_speed_max
    name: Vind max
    type: area
    curve: smooth
    color: fc7703
    fill_raw: last
    show:
      extremas: true
style: |
  ha-card {
     --ha-card-background: rgba(0, 0, 0, 0);
     box-shadow: none;
     margin: 28px 0px 38px 8px;
     font-size: 15px;
     font-family: 'Segoe UI Light";
     text-align: center
   }
   div#header__title {
     font-size: 20px;
     font-weight: 300;
     font-family: 'Segoe UI Light";
     font-color: #ff0000
   }

1 Like