Help on Apext Chart or alternatives

I have a bunch of motion sensors in my home. I’d like to show a graph about when they are triggered.

What I did was to use Apex Chart min/max value to offset the raw vertically. It works ok. But as you can see there are so many sensors and it is very hard to match the color and find which one was triggered.
motion

What I really wanted is to put the names at left side like this:
motion2
But I was not able to figure out how to do it. Hope someone can help me on that or point me to some alternative ways to do it.

Here is the Apex Chart code:

type: custom:apexcharts-card
graph_span: 48h
apex_config:
  chart:
    height: 300px
all_series_config:
  stroke_width: 2
  opacity: 1
  type: column
  transform: 'return x === ''on'' ? 1 : 0;'
  show:
    legend_value: false
header:
  show: true
  title: Motion
now:
  show: true
yaxis:
  - id: downstairs
    min: -12
    max: 1
    show: false
  - id: living_room
    min: -11
    max: 2
    show: false
  - id: upstairs
    min: -10
    max: 3
    show: false
  - id: yang_office
    min: -9
    max: 4
    show: false
  - id: ying_office
    min: -8
    max: 5
    show: false
  - id: gym1
    min: -7
    max: 6
    show: false
  - id: gym2
    min: -6
    max: 7
    show: false
  - id: garage1
    min: -5
    max: 8
    show: false
  - id: garage2
    min: -4
    max: 9
    show: false
  - id: dining_room
    min: -3
    max: 10
    show: false
  - id: front_yard
    min: -2
    max: 11
    show: false
  - id: drive_way
    min: -1
    max: 12
    show: false
  - id: backyard
    min: 0
    max: 13
    show: false
series:
  - entity: binary_sensor.downstairs_occupancy
    name: Downstairs
    yaxis_id: downstairs
    color: brown
  - entity: binary_sensor.living_room_occupancy
    name: Living Room
    yaxis_id: living_room
    color: burlywood
  - entity: binary_sensor.upstairs_occupancy
    name: Upstairs
    yaxis_id: upstairs
    color: cornflowerblue
  - entity: binary_sensor.yang_office_occupancy
    name: Yang Office
    yaxis_id: yang_office
    color: coral
  - entity: binary_sensor.ying_office_occupancy
    name: Ying Office
    yaxis_id: ying_office
    color: cyan
  - entity: binary_sensor.gym_motion_sensor_1_occupancy
    name: Gym 1
    yaxis_id: gym1
    color: blueviolet
  - entity: binary_sensor.gym_motion_sensor_2_occupancy
    name: Gym 2
    yaxis_id: gym2
    color: darkgoldenrod
  - entity: binary_sensor.garage_motion_sensor_1_occupancy
    name: Garage 1
    yaxis_id: garage1
    color: darkmagenta
  - entity: binary_sensor.garage_motion_sensor_2_occupancy
    name: Garage 2
    yaxis_id: garage2
    color: darkorchid
  - entity: binary_sensor.dining_room_occupancy
    name: Dining Room
    yaxis_id: dining_room
    color: crimson
  - entity: binary_sensor.front_yard_motion_sensor_motion
    name: Front Yard
    yaxis_id: front_yard
    color: orange
  - entity: binary_sensor.driveway_motion_sensor_motion
    name: Driveway
    yaxis_id: drive_way
    color: red
  - entity: binary_sensor.backyard_porch_motion_sensor_motion
    name: Backyard
    yaxis_id: backyard
    color: blue

I use auto-entities to show the last triggered within a chosen time period. I think otherwise it is too much information? Or how about a boring history card as below

annotations: {
  yaxis: [
    {
      y: 8,
      y2: 9,
      borderColor: '#000',
      fillColor: '#FEB019',
      label: {
        text: 'Y-axis horizontal text box'
      }
    }
  ]
}

Thanks Boheme61 and Julian. Both of your solutions are beautiful! Let me play both.

1 Like