usage_card.yaml

type: custom:stack-in-card
cards:
  - type: custom:button-card
    entity: sensor.internet_usage_per_day
    show_icon: false
    name: Usage
    styles:
      card:
        - border-style: none
      grid:
        - grid-template-areas: >-
            "n sec_info_2_title" "sec_info sec_info_2_title" "sec_info_2
            sec_info_2"
        - grid-template-columns: 1fr min-content
        - grid-template-rows: 1fr
      name:
        - justify-self: start
        - align-self: start
        - font-size: 90%
        - font-weight: bold
        - margin-top: 5px
        - margin-left: 15px
      custom_fields:
        sec_info:
          - justify-self: start
          - align-self: start
          - filter: opacity(50%)
          - font-size: 10px
          - margin-top: 2px
          - margin-left: 15px
        sec_info_2:
          - justify-self: end
          - align-self: end
          - filter: opacity(100%)
          - font-size: 8px
          - margin-top: '-5px'
          - margin-right: 15px
        sec_info_2_title:
          - justify-self: end
          - align-self: start
          - filter: opacity(50%)
          - font-size: 10px
          - margin-top: 18px
          - margin-right: 15px
    custom_fields:
      sec_info: |
        [[[
          var today = states['sensor.internet_usage_per_day'].state;
          return `<span>Today: ${today}
            </span> 
           `
        ]]]
      sec_info_2: |
        [[[
          var today = states['sensor.internet_usage_per_month'].state;
          return `<span><span style="font-size: 12px">${today}</span>/91 GB </span> 
           `
        ]]]
      sec_info_2_title: |
        [[[
          
          return `<span>This Month</span> 
           `
        ]]]
  - type: custom:apexcharts-card
    update_interval: 10min
    card_mod:
      style: |
        ha-card {
        border-style: none;
        margin-top: -30px;
        margin-left: -10px;
        }
    graph_span: 7d
    span:
      start: day
      offset: '-6d'
    series:
      - entity: sensor.internet_usage_per_day
        type: column
        show:
          datalabels: true
        group_by:
          func: delta
          duration: 1d
    apex_config:
      states:
        hover:
          filter:
            type: none
      dataLabels:
        enabled: false
        offsetY: -8
        formatter: |
          EVAL:function(value) {
            if(value != null){
            
            return value + " ";
            }
          }
        style:
          fontSize: 10px
          colors:
            - '#ff8c52'
        background:
          enabled: false
      grid:
        show: false
      chart:
        dropShadow:
          enabled: true
          top: 0
          left: 0
          blur: 1.5
          opacity: 0.5
          color: '#4e8cd6'
      plotOptions:
        bar:
          columnWidth: 40%
          borderRadius: 5
      xaxis:
        axisTicks:
          show: false
        axisBorder:
          show: false
        labels:
          offsetY: -5
          datetimeFormatter:
            day: ddd
      yaxis:
        - min: 0
          crosshairs:
            show: false
          axisTicks:
            show: false
          tickAmount: 8
          labels:
            show: false
            maxwidth: 4
      tooltip:
        enabled: false
      fill:
        type: gradient
        gradient:
          shadeIntensity: 1
          type: vertical
          opacityFrom: 0.7
          opacityTo: 0.9
          colorStops:
            - offset: 0
              color: '#4e8cd6'
              opacity: 1
            - offset: 100
              color: '#2b79d6'
              opacity: 1
card_mod:
  style: |
    ha-card {
      border-radius: 20px;
      border-style: none;
      box-shadow: 0px 0px 10px -9px black;
    }