Can't select DOM elements inside state-history-charts

[Madelena]

My Home Assistant version: 2022.5.3

My lovelace configuration method (GUI or yaml): yaml

What I am doing: I'm attempting to theme the History Chart within a More Info dialog.

What I expected to happen: I should be able to style the chart.

What happened instead: Card-mod is not inserted into the DOM, because the DOM elements were not created when the dialog was first open.

Minimal steps to reproduce:

This will insert Card-mod under within a More Info dialog just fine.

  card-mod-more-info-yaml: &card-mod-more-info-yaml |
    ha-more-info-history$state-history-charts: |
      .chartTooltip {
        margin-top: -200px;
      }

But it cannot find the shadow-root within if I add a $ in the path:

  card-mod-more-info-yaml: &card-mod-more-info-yaml |
    ha-more-info-history$state-history-charts$: |
      .chartTooltip {
        margin-top: -200px;
      }

Error messages from the browser console: None

---

By putting an X in the boxes ([]) below, I indicate that I:

• [X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

• [X] Have made sure I am using the latest version of the plugin.

• [X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

• [X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[ildar170975]

.chartTooltip

This element I haven't seen since HA 2021.7. Earlier this element was present in the DOM for conventional history-graph card and was available for styling. Probably this element was removed after changing the history-graph card in 2021.7. So, you cannot access it with card-mod since it does not exist.

[ildar170975]

I guess the issue should be closed since it is not related to the current HA implementation.

[50494554524F]

this stopped working too...

    card_mod:

      style:

        state-history-charts:
          $:
            state-history-chart-line:
              $:
                ha-chart-base:
                  $: |

                    .chartLegend {

                      display: none !important;

                    }

[ildar170975]

this stopped working too...

~Surely since the current history-graph card has another structure.~ Sorry - made a mistake, thought this is about an old history-graph structure

[50494554524F]

Surely since the current history-graph card has another structure.

i spent hours and hours on it, have to inspecting again, because it "should" work to me...

[ildar170975]

because it "should" work to me...

~As I said this issue should be closed as irrelevant to card-mod. HA changed - surely old ways are not supposed to work if they are not updated. Use updated card-mod methods then.~

Sorry - made a mistake, thought this is about an old history-graph structure

[50494554524F]

seems a problem with latest browser version (chrome, edge) or frontend: if i go back and then forward the css is applied correctly... so, have to try other browsers

[ildar170975]

@50494554524F Earlier I said that this is happening due to a changed structure of the history-graph. WRONG - this .chartLegend style SHOULD work. Try this updated style:

card_mod:
  style:
    .content state-history-charts $:
      div:
        state-history-chart-line $ ha-chart-base $: |
          .chartLegend {
            display: none;
          }

Due to unknown for me reasons, SOME styles with "standard old card-mod notation" stopped working:

element:
  $:
    element ...

Now need to use:

element $:
  element ...

This is not a GENERAL observation - it is observed in SOME cases.

I will revise styles in this post. Update - DONE.

[50494554524F]

this works too (have to try with multiple legends). the selector have to go on one line but is readable...

    card_mod:
      style:

        state-history-charts $ state-history-chart-line $ ha-chart-base $: |
          .chartLegend {
            display: none !important;
          }

[ildar170975]

    .content state-history-charts $:
      div:
        state-history-chart-line $ ha-chart-base $: |

This is required in cases with different UoMs. If all entities have same UoM, theirs graphs will be placed in one card, otherwise they will be grouped by UoMs to several cards (see a picture).

state-history-charts $ state-history-chart-line $ ha-chart-base $: |

This may be used only when entities have same UoM.