Tweak legend expand/collapse button

src/components/chart/ha-chart-base.ts

@@ -251,10 +251,14 @@ export class HaChartBase extends LitElement {
           ? html`<li>
               <ha-assist-chip
                 @click=${this._toggleExpandedLegend}
+                class=${classMap({
+                  expanded: this.expandLegend,
+                })}
                 filled
-                label=${`${this.hass.localize(
+                title=${this.hass.localize(
                   `ui.components.history_charts.${this.expandLegend ? "collapse_legend" : "expand_legend"}`
-                )} (${items.length})`}
+                )}
+                label=${`${this.expandLegend ? "" : `+${items.length - overflowLimit}`}`}
               >
                 <ha-svg-icon
                   slot="trailing-icon"
@@ -747,6 +751,9 @@ export class HaChartBase extends LitElement {
       --_trailing-space: 8px;
       --_icon-label-space: 4px;
     }
+    ha-assist-chip.expanded {
+      --_icon-label-space: 0px;
+    }
   `;
 }
 

src/translations/en.json

@@ -843,8 +843,8 @@
         "source_history": "Source: History",
         "source_stats": "Source: Long term statistics",
         "zoom_reset": "Reset zoom",
-        "expand_legend": "More",
-        "collapse_legend": "Less"
+        "expand_legend": "Show more",
+        "collapse_legend": "Show less"
       },
       "map": {
         "error": "Unable to load map"