Apex Chart - Tooltip help

Configuration Frontend
1

Searched and couldn’t the solution to these two items. Trying to have all series show up on the tooltip as well as removing the xaxis tooltip. Appreciate it!

image
image505×532 27.2 KB

type: custom:apexcharts-card
apex_config:
  legend:
    show: false
  tooltip:
    enabled: true
    shared: true
    fixed:
      enabled: true
      position: BottomLeft
header:
  show: true
  title: Temperature
  show_states: true
  colorize_states: true
graph_span: 7d
all_series_config:
  stroke_width: 2
  opacity: 1
  show:
    in_brush: true
experimental:
  brush: true
brush:
  selection_span: 24hr
  apex_config:
    yaxis:
      min: 30
      max: 120
yaxis:
  - min: 30
    max: 120
    decimals: 0
    apex_config:
      tickAmount: 9
xaxis: 
  tooltip:
    enabled: false
series:
  - entity: sensor.bambu_lab_ams_temp_humidity_sensor_temperature_2
    type: line
    name: AMS
    yaxis_id: first
    show:
      extremas: false
      legend_value: false
  - entity: sensor.bambu_lab_p1s_chamber_temp_humidty_sensor_temperature
    type: line
    name: P1S Chamber
    yaxis_id: second
    show:
      extremas: false
      legend_value: false
  - entity: sensor.garage_temp_humidity_sensor_temperature_3
    type: line
    name: Garage
    yaxis_id: third
    show:
      extremas: false
      legend_value: false
  - entity: sensor.bambu_lab_p1s_print_status
    type: area
    curve: stepline
    transform: 'return x=== ''running'' ? 90: 0;'
    name: Print Status
    opacity: 0.3
    stroke_width: 0
    show:
      in_header: false
      legend_value: false
  - entity: cover.meross_garage_door_opener_garage_door
    type: area
    curve: stepline
    transform: 'return x=== ''open'' ? 90: 0;'
    name: Garage Open
    opacity: 0.4
    stroke_width: 0
    show:
      in_header: false
      legend_value: false
2

Solved removing the x-axis tooltip, needed to put it under the apex_config. Still can’t figure out how to have all series show up in the tooltip though.

type: custom:apexcharts-card
apex_config:
  legend:
    show: false
  tooltip:
    enabled: true
    shared: true
    fixed:
      enabled: true
      position: BottomLeft
  xaxis:
    tooltip:
      enabled: false
header:
  show: true
  title: Temperature
  show_states: true
  colorize_states: true
graph_span: 7d
all_series_config:
  stroke_width: 2
  opacity: 1
  show:
    in_brush: true
experimental:
  brush: true
brush:
  selection_span: 24hr
  apex_config:
    yaxis:
      min: 30
      max: 120
yaxis:
  - min: 30
    max: 120
    decimals: 0
    apex_config:
      tickAmount: 9
series:
  - entity: sensor.bambu_lab_ams_temp_humidity_sensor_temperature_2
    type: line
    name: AMS
    yaxis_id: first
    show:
      extremas: false
      legend_value: false
  - entity: sensor.bambu_lab_p1s_chamber_temp_humidty_sensor_temperature
    type: line
    name: P1S Chamber
    yaxis_id: second
    show:
      extremas: false
      legend_value: false
  - entity: sensor.garage_temp_humidity_sensor_temperature_3
    type: line
    name: Garage
    yaxis_id: third
    show:
      extremas: false
      legend_value: false
  - entity: sensor.bambu_lab_p1s_print_status
    type: area
    curve: stepline
    transform: 'return x=== ''running'' ? 90: 0;'
    name: Print Status
    opacity: 0.3
    stroke_width: 0
    show:
      in_header: false
      legend_value: false
  - entity: cover.meross_garage_door_opener_garage_door
    type: area
    curve: stepline
    transform: 'return x=== ''open'' ? 90: 0;'
    name: Garage Open
    opacity: 0.4
    stroke_width: 0
    show:
      in_header: false
      legend_value: false
1 Like
3

Did you find a way ?
I have seen one in the apex documentation burried quite deep

image
image1124×788 38.2 KB

Do you see the custom tooltip example Link below that BLUE CUSTOM FUNCTION box?

Click there and you will get this completely indiviual one, but I have no clue if it is possible to do this inside apex Homeassitant HACS integration or not.

image
image1919×927 45.3 KB

But here is your starting point from the first screenshot

I would simply like time and date - followed by the series name and value and an option to show all values of 1 time below each other in a box in the same order as they appear in the legend.

4

For if you are still having the same issue:
I also struggled with showing all series for the tooltip for quite some time. What finally solved it is grouping on the x-axis. The series most likely have an irregular time interval, thus do not share the same x axis points. (See the note below the example: tooltip – ApexCharts.js)
This can be fixed with the group_by function. Here is my example (only the necessary config):

apex_config:
  xaxis:
    tooltip:
      enabled: false # Disable the x-axis tooltip
  tooltip:
    shared: true # Share tooltip with all series
    intersect: false # Also show tooltip when not hovering exactly on a point
    fixed:
      enabled: true
      position: topLeft
    x:
      format: HH:mm - HH:mm #Cleaner time formatting
      show: true
all_series_config:
  group_by: # Fix irregular time for the shared tooltip to work
    duration: 5min
    func: avg
    fill: last

Make sure to set the duration accordingly. Good luck!