Apexcharts tooltip info: Inconsistent behavior for shared tooltip

Configuration Frontend
1

Hi there,

I found the apexcharts-card as a solution for a lovelace-integrated diagram with a proper way of displaying numbers clearly by scrubbing through the data.

This is what my card should look like:
image

Most of the time, it only shows one datarow in the tooltip, which makes it impossible to read all the dataseries in the diagram:
image

I can’t fully tell what circumstances cause the different behaviors. When I only get one series at the tooltip, I can switch to the lovelace configuration mode, in there it works. When i switch back, I only have one tooltip again.

I thought, the reason must be the varying timestamps, but I use the group_by method to decrease the amount of data. It also doesn’t make sense that it does work sometimes.

Any idea on this?

Thanks a lot
Alex

Here is the code for the card:

type: custom:apexcharts-card
  graph_span: 12hrs
  apex_config:
    tooltip:
      shared: true
    stroke:
      curve: smooth
    chart:
      height: 400
    xaxis:
      axisTicks:
        show: false
      axisBorder:
        show: false
      ticks:
        show: false
      axis:
        show: false
    legend:
      position: top
    grid:
      show: false
  experimental:
    color_threshold: true
  yaxis:
    - id: first
      decimals: 1
      apex_config: null
    - id: second
      opposite: true
      decimals: 0
      apex_config:
        tickAmount: 2
      min: 0
      max: 100
  all_series_config:
    stroke_width: 1.5
    group_by:
      func: avg
      duration: 10min
  series:
    - entity: sensor.battery_level
      yaxis_id: second
      name: SOC
      type: line
      color_threshold:
        - value: 0
          color: firebrick
          opacity: 1
        - value: 50
          color: yellow
        - value: 100
          color: seagreen
      stroke_width: 2
    - entity: sensor.total_dc_power
      yaxis_id: first
      color: coral
      type: area
      opacity: 0.3
      transform: return x/1000;
      name: PV
      unit: kW
    - entity: sensor.export_power
      yaxis_id: first
      transform: return x*(-1)/1000;
      type: area
      opacity: 0.3
      name: Export
      unit: kW
      color: purple
    - entity: sensor.battery_charging_power
      yaxis_id: first
      transform: return x*(-1)/1000;
      type: area
      opacity: 0.3
      name: Laden
      unit: kW
      color: seagreen
    - entity: sensor.battery_discharging_power
      yaxis_id: first
      transform: return x/1000;
      type: area
      name: Endladen
      unit: kW
      opacity: 0.3
      color: seagreen
    - entity: sensor.import_power
      yaxis_id: first
      type: area
      opacity: 0.3
      transform: return x/1000;
      name: Netz
      unit: kW
      color: skyblue
    - entity: sensor.load_power
      yaxis_id: first
      type: area
      opacity: 0.3
      transform: return x/1000;
      name: Verbrauch
      unit: kW
      color: firebrick
2

I encountered the same issue and managed to resolve it by implementing a fixed graph span, e.g.:

graph_span: 24

Additionally, I grouped the data by small time intervals.

I believe the problem stems from the fluctuating “time buckets” in a dynamically adjusting graph span upon each refresh.

3

Hey everyone,

After searching through hundreds of forum entries without finding a solution that worked for me, I finally came up with this approach to format series data in ApexCharts.

The solutions

              tooltip:
                shared: true
                intersect: false

dit not work for me!

If you’re looking to display values from multiple series with each value on a new line and rounded to two decimal places, here’s the formatter that worked for me - it is a realy simple one - there are more sophisticated out there

:blush:

            apex_config:
              tooltip:
                shared: true
                intersect: false
                x:
                  format: HH:00 - HH:59
                  show: true
                y: 
                  formatter: | 
                    EVAL: function(val1, { series, seriesIndex, dataPointIndex }) {
                      return `${series[0][dataPointIndex].toFixed(2)} ct/kWh<br>` +
                             `${series[1][dataPointIndex].toFixed(2)} kWh<br>` +
                             `${series[2][dataPointIndex].toFixed(2)} EUR<br>`;
                    }
                  title:
                    formatter: | 
                      EVAL: function(seriesName) {
                        return ""
                      }

Hopefully, this helps someone else who’s been struggling to find a solution like I was!

Cheers!