Shared tooltip not working with data_generator

[copystring]

Checklist

• [x] I updated the card to the latest version available
• [x] I cleared the cache of my browser
• [x] I verified that I'm really running the lastest version in my browser console
• [x] I checked if there is another issue opened with the same problem

Describe the bug Tooltip is not shared when a graph with data_generator is present

Version of the card Version: v2.0.4

To Reproduce This is the configuration I used:

type: custom:apexcharts-card
update_interval: 1m
experimental:
  brush: true
brush:
  selection_span: 1h
graph_span: 2h
span:
  start: hour
  offset: '-1h'
now:
  show: true
apex_config:
  tooltip:
    shared: true
all_series_config:
  type: line
  curve: smooth
  extend_to: now
  stroke_width: 2
  show:
    extremas: false
    in_brush: true
  fill_raw: last
  group_by:
    func: last
    duration: 5m
series:
  - entity: sensor.PV_Power
    name: Strom von PV
  - entity: sensor.Stromverbrauch
    name: Stromverbrauch
  - entity: sensor.PV_Ertrag_Stuendlich
    name: Ertrag vorraussichtlich
    data_generator: |
      var data = []
      var formattedJSON = JSON.parse(entity.state);
      formattedJSON.forEach(obj => {
        data.push([obj.t, obj.y*1000])
      });
      return data;
  - entity: sensor.Netzbezug
    name: Netzbezug

Removing the graph with the data_generator makes the shared tooltip work just fine.

Screenshots

Expected behavior Obviously have the tooltip shared even when a graph with data_generator is present

Desktop (please complete the following information):

• Browser Chrome 115.0.5790.171

Additional information: sensor.PV_Ertrag_Stuendlich contains this data:

[{"t":1692418420000,"y":0},{"t":1692421200000,"y":0.319},{"t":1692424800000,"y":0.435},{"t":1692428400000,"y":0.723},{"t":1692432000000,"y":2.825},{"t":1692435600000,"y":4.091},{"t":1692439200000,"y":3.963},{"t":1692442800000,"y":3.643},{"t":1692446400000,"y":2.635},{"t":1692450000000,"y":1.673},{"t":1692453600000,"y":0.888},{"t":1692457200000,"y":0.499},{"t":1692460800000,"y":0.326},{"t":1692464400000,"y":0.174},{"t":1692468000000,"y":0.065},{"t":1692470176000,"y":0},{"t":1692504914000,"y":0},{"t":1692507600000,"y":0.897},{"t":1692511200000,"y":1.778},{"t":1692514800000,"y":2.561},{"t":1692518400000,"y":3.361},{"t":1692522000000,"y":3.823},{"t":1692525600000,"y":4.009},{"t":1692529200000,"y":3.899},{"t":1692532800000,"y":3.216},{"t":1692536400000,"y":2.398},{"t":1692540000000,"y":1.875},{"t":1692543600000,"y":1.501},{"t":1692547200000,"y":1.054},{"t":1692550800000,"y":0.573},{"t":1692554400000,"y":0.277},{"t":1692556453000,"y":0}]

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[copystring]

Unstale

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[copystring]

Unstale

[ray77]

I don't have a data generator and it still doesn't work. In my case there are simply 3 direct values. (with color and extrema)

type: custom:apexcharts-card
graph_span: 48h
apex_config:
  tooltip:
    shared: true
header:
  show: true
  title: Gemessene Temperaturen
  show_states: true
  colorize_states: true
series:
  - entity: sensor.wohnzimmer_temperature
    name: Wohnzimmer
    stroke_width: 1
    type: area
    color: '#43A047'
    show:
      extremas: true
  - entity: sensor.wohnzimmer_wohnzimmer_wohnzimmer_garten_temperature
    name: Garten
    stroke_width: 3
    type: area
    color: '#B67019'
    show:
      extremas: true
  - entity: sensor.wohnzimmer_wohnzimmer_wohnzimmer_schlafzimmer_temperature
    name: Schlafzimmer
    stroke_width: 5
    color: '#44739D'
    show:
      extremas: true

all measurements have the same TimeStamp.

Does anyone have a good suggestion? If I enter shared: false, no tooltips appear at all. Feels like a bug.

[giuliodali]

I have the same issue depending on the chart complexity, the value is either ignored or it won't even let me save the config with this in:

type: custom:apexcharts-card
apex_config:
  tooltip:
    shared: true

[jhemak]

Has anyone been able to solve this?

[Onepamopa]

I also have the same problem

type: custom:apexcharts-card
chart_type: line
update_interval: 30sec
graph_span: 2d
hours_12: false
header:
  show: true
  title: Temperatures
  show_states: true
  colorize_states: true
now:
  show: false
  color: red
  label: now
show:
  loading: true
apex_config:
  tooltip:
    enabled: true
    shared: true
    onDatasetHover:
      highlightDataSeries: true
    hideEmptySeries: false
  legend:
    show: false
  dataLabels:
    enabled: false
    dropShadow:
      enabled: true
all_series_config:
  stroke_width: 1
  float_precision: 1
  fill_raw: last
  curve: stepline
  data_generator: ''
  show:
    in_brush: false
    extremas: false
    legend_value: false
  group_by:
    func: last
    duration: 1m
series:
  - entity: sensor.envsensor_temperature
    name: Outside
  - entity: sensor.door_sensor_device_temperature
    name: Coridor DS
  - entity: sensor.bk7231t_corridor_temperature
    name: Corridor AC
  - entity: sensor.movement_sensor_device_temperature
    name: Kitchen PIR
  - entity: sensor.t_h_temperature
    name: Bedroom
  - entity: sensor.esphome_web_c510e3_temperature
    name: Living Room
  - entity: sensor.bk7231t_tatko_temperature
    name: Tatko

Shared tooltip only "works" when the HA dashboard is in "edit" mode, but as soon as I click "Done" - the shared tooltip stops working:

[stalniy]

This is a bug in the apexcharts and not in this extension. Please refer to this issue https://github.com/apexcharts/apexcharts.js/issues/420

I applied the suggested fix :

  tooltip:
    shared: true
    enabled: true
    custom: |
      EVAL:function a({ series, seriesIndex, dataPointIndex, w }) {
          const hoverXaxis = w.globals.seriesX[seriesIndex][dataPointIndex];
          const hoverIndexes = w.globals.seriesX.map((seriesX) => {
              return seriesX.findIndex((xData) => xData === hoverXaxis);
          });

          let hoverList = "";
          hoverIndexes.forEach((hoverIndex, seriesEachIndex) => {
              if (hoverIndex >= 0) {
                  hoverList += `
                      <div class="apexcharts-tooltip-series-group apexcharts-active" style="order: 1; display: flex;">
                          <span class="apexcharts-tooltip-marker" style="background-color: ${
                              w.globals.markers.colors[seriesEachIndex]
                          };"></span>
                          <div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
                              <div class="apexcharts-tooltip-y-group">
                                  <span class="apexcharts-tooltip-text-y-label">${
                                      w.globals.seriesNames[seriesEachIndex]
                                  }: </span>
                                  <span class="apexcharts-tooltip-text-y-value">${w.globals.yLabelFormatters[0](
                                      series[seriesEachIndex][hoverIndex]
                                  )}</span>
                              </div>
                          </div>
                      </div>`;
              }
          });
          const parsed = new Date(hoverXaxis)
              .toDateString()
              .split(" ")
              .slice(1);
          return `<div class="apexcharts-tooltip-title" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">${
              parsed[1] + " " + parsed[0] + " " + parsed[2]
          }</div>${hoverList}`;
      }

Now it at least partially works.

[jhemak]

This is helpful!! Thank you! Do you know if there is a way to turn off the tooltip that also appears at the bottom along the x-axis?

[stalniy]

I improved the code in the fix. now it reliably shows values for all series:

[stalniy]

This is helpful!! Thank you! Do you know if there is a way to turn off the tooltip that also appears at the bottom along the x-axis?

apex_config:
  xaxis:
    tooltip:
      enabled: false

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 10 days with no activity.

[madmat17]

I made some further adjustments to the code: https://community.home-assistant.io/t/apexcharts-card-a-highly-customizable-graph-card/272877/3693?u=madmat17

• added time stamp to the tooltip header
• formatted the values
• plotting "n/a" when hairline / hover is at timestamp with no value