ApexCharts card - A highly customizable graph card

@sturgeo Finally got it working, this is adjusted to fit within section few. Card jumps around a bit when editing and changing view port size.

FULL CARD CODE (4 Wide Sections) (JUST ADD 3 SENSORS)
type: custom:apexcharts-card
header:
  show: true
  title: Whoop
  floating: true
  show_states: true
  colorize_states: true
experimental:
  color_threshold: true
chart_type: radialBar
apex_config:
  chart:
    offsetX: 0
    offsetY: 0
  grid:
    padding:
      left: 0
      right: 0
      bottom: -20
      top: 70
  plotOptions:
    radialBar:
      offsetY: 0
      startAngle: 0
      endAngle: 270
      hollow:
        margin: 100
        size: 40%
        background: transparent
      dataLabels:
        name:
          show: true
        value:
          show: true
  legend:
    show: true
    floating: true
    fontSize: 10vw
    position: left
    offsetX: 80
    offsetY: 73
    labels:
      useSeriesColors: true
    markers:
      size: 0
series:
  - entity: sensor.whoop_andrew_sleep_performance
    name: Sleep
    fill_raw: last
    color_threshold:
      - value: 0
        color: " #7BA1BB"
    show:
      legend_value: true
      header_color_threshold: true
  - entity: sensor.whoop_andrew_recovery_score
    name: Recovery
    fill_raw: last
    color_threshold:
      - value: 0
        color: "#FF0026"
      - value: 34
        color: "#FFDE00"
      - value: 67
        color: "#16EC06"
    show:
      legend_value: true
      header_color_threshold: true
  - entity: sensor.whoop_andrew_day_strain
    name: Strain
    fill_raw: last
    color_threshold:
      - value: 0
        color: "#0093E7"
    show:
      legend_value: true
      header_color_threshold: true

offset for chart

apex_config:
  chart:
    offsetX: -30
    offsetY: 0

offset for legend

apex_config:
legend:
    show: true
    floating: true
    fontSize: 12px
    position: left
    offsetX: 95
    offsetY: 78
1 Like