fix: prevent crash when chart.events is undefined in ApexCharts v5

ApexCharts v5 accesses chart.events.beforeMount directly without null-checking,
causing a TypeError crash in certain configurations (e.g. sections view).

- Always include chart.events: {} in the layout config so ApexCharts never
  receives an undefined events object
- Add a post-constructor guard to ensure chart.events is an object before
  render() is called
- Patch ApexCharts v5.3.3 ESM to add null-guards on chart.events accesses
  (beforeMount, mounted, updated, legendClick) via patch-package

Author: maxim-yegorov

README.md

@@ -58,6 +58,7 @@ However, some things might be broken :grin:
   - [`color_threshold` experimental feature](#color_threshold-experimental-feature)
   - [`hidden_by_default` experimental feature](#hidden_by_default-experimental-feature)
   - [`brush` experimental feature](#brush-experimental-feature)
+  - [`legend_isolate_on_click` experimental feature](#legend_isolate_on_click-experimental-feature)
 - [Known issues](#known-issues)
 - [Roadmap](#roadmap)
 - [Examples](#examples-1)
@@ -799,6 +800,7 @@ Generates the same result as repeating the configuration in each series:
 | `disable_config_validation` | boolean | `false` | v1.6.0 | If `true`, will disable the config validation. Useful if you have cards adding parameters to this one. Use at your own risk. |
 | `hidden_by_default` | boolean | `false` | v1.6.0 | Will allow you to use the `hidden_by_default` option. See [hidden_by_default](#hidden_by_default-experimental-feature) |
 | `brush` | boolean | `false` | v1.8.0 | Will display a brush which allows you to select a portion of time to display on the main chart. See [brush](#brush-experimental-feature) |
+| `legend_isolate_on_click` | boolean | `false` | v2.3.0 | When clicking a legend item, isolate that series (hide all others). Click again to restore all. See [legend_isolate_on_click](#legend_isolate_on_click-experimental-feature) |
 
 ### `color_threshold` experimental feature
 
@@ -917,6 +919,24 @@ series:
       in_chart: false
 ```
 
+### `legend_isolate_on_click` experimental feature
+
+This option changes the legend click behavior so that clicking a series name **isolates** that series (hides all others). Clicking the same series again restores all series. It only works correctly if all series have a unique name.
+
+This is how to use it:
+```yaml
+type: custom:apexcharts-card
+experimental:
+  legend_isolate_on_click: true
+series:
+  - entity: sensor.living_room_temperature
+    name: Living Room
+  - entity: sensor.kitchen_temperature
+    name: Kitchen
+  - entity: sensor.bedroom_temperature
+    name: Bedroom
+```
+
 ## Known issues
 
 * Sometimes, if `smoothing` is used alongside `area` and there is missing data in the chart, the background will be glitchy. See [apexcharts.js/#2180](https://github.com/apexcharts/apexcharts.js/issues/2180)

package.json

@@ -9,7 +9,8 @@
     "rollup": "rollup -c",
     "lint": "eslint src/*.ts",
     "watch": "npm run build:types-check && rollup -c --watch",
-    "postversion": "npm run build"
+    "postversion": "npm run build",
+    "postinstall": "patch-package"
   },
   "repository": {
     "type": "git",
@@ -68,6 +69,7 @@
     "conventional-changelog-conventionalcommits": "^9.1.0",
     "eslint": "^8.57.0",
     "home-assistant-js-websocket": "^9.4.0",
+    "patch-package": "^8.0.1",
     "rollup-plugin-serve": "^1.1.1",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.31.2",

patches/apexcharts+5.3.3.patch

@@ -42,6 +42,9 @@ export function getLayoutConfig(
       toolbar: {
         show: false,
       },
+      events: {
+        ...(config.experimental?.legend_isolate_on_click ? { legendClick: getLegendIsolateClickHandler() } : {}),
+      },
     },
     grid: {
       strokeDashArray: 3,
@@ -75,6 +78,7 @@ export function getLayoutConfig(
       show: true,
       formatter: getLegendFormatter(config, hass),
       markers: getLegendMarkers(config),
+      ...(config.experimental?.legend_isolate_on_click ? { onItemClick: { toggleDataSeries: false } } : {}),
     },
     stroke: {
       curve: getStrokeCurve(config, false),
@@ -492,6 +496,29 @@ function getFillType(config: ChartCardConfig, brush: boolean) {
   }
 }
 
+function getLegendIsolateClickHandler() {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return function (chartContext: any, seriesIndex: number, opts: any) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const series: any[] = opts.config?.series ?? [];
+    const collapsed: number[] = opts.globals?.collapsedSeriesIndices ?? [];
+    const visibleCount = series.length - collapsed.length;
+    if (visibleCount === 1 && !collapsed.includes(seriesIndex)) {
+      // Only this series is visible → restore all series
+      series.forEach((serie) => chartContext.showSeries(serie.name));
+    } else {
+      // Isolate the clicked series: show it and hide all others
+      series.forEach((serie, i) => {
+        if (i === seriesIndex) {
+          chartContext.showSeries(serie.name);
+        } else {
+          chartContext.hideSeries(serie.name);
+        }
+      });
+    }
+  };
+}
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function evalApexConfig(apexConfig: any): any {
   const eval2 = eval;

src/apex-layouts.ts

@@ -797,6 +797,14 @@ class ChartsCard extends LitElement {
         (layout as any).chart.id = Math.random().toString(36).substring(7);
       }
       this._apexChart = new ApexCharts(graph, layout);
+      // Defensive guard: ensure chart.events is always an object before render().
+      // ApexCharts v5 accesses chart.events.beforeMount without null-checking,
+      // which throws if chart.events is undefined after config merging.
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const w = (this._apexChart as any).w;
+      if (w?.config?.chart && !w.config.chart.events) {
+        w.config.chart.events = {};
+      }
       const promises: Promise<void>[] = [];
       promises.push(this._apexChart.render());
       if (this._config.series_in_brush.length && brush) {

src/apexcharts-card.ts

@@ -15,6 +15,7 @@ export const ChartCardExternalConfig = t.iface([], {
     "disable_config_validation": t.opt("boolean"),
     "hidden_by_default": t.opt("boolean"),
     "brush": t.opt("boolean"),
+    "legend_isolate_on_click": t.opt("boolean"),
   })),
   "hours_12": t.opt("boolean"),
   "chart_type": t.opt("ChartCardChartType"),

src/types-config-ti.ts

@@ -9,6 +9,7 @@ export interface ChartCardExternalConfig {
     disable_config_validation?: boolean;
     hidden_by_default?: boolean;
     brush?: boolean;
+    legend_isolate_on_click?: boolean;
   };
   hours_12?: boolean;
   chart_type?: ChartCardChartType;