feat: Support for all ApexCharts options

Author: RomRider

.devcontainer/ui-lovelace.yaml

@@ -19,6 +19,9 @@ views:
             hours_to_show: 0.20
             cache: true
             layout: minimal
+            apex_config:
+              chart:
+                height: 100%
           - type: custom:apexcharts-card
             stacked: true
             series:
@@ -30,6 +33,9 @@ views:
                 type: bar
             hours_to_show: 0.25
             cache: true
+            apex_config:
+              chart:
+                height: 100%
 
       - type: custom:apexcharts-card
         stacked: true

src/apex-layouts.ts

@@ -107,6 +107,12 @@ export function getLayoutConfig(config: ChartCardConfig): unknown {
             right: 0,
           },
         },
+        subtitle: {
+          offsetY: -15,
+        },
+        title: {
+          offsetY: -15,
+        },
         xaxis: {
           labels: {
             show: false,
@@ -141,5 +147,5 @@ export function getLayoutConfig(config: ChartCardConfig): unknown {
       break;
   }
 
-  return mergeDeep(def, conf);
+  return config.apex_config ? mergeDeep(mergeDeep(def, conf), config.apex_config) : mergeDeep(def, conf);
 }

src/styles.ts

@@ -17,6 +17,11 @@ export const styles: CSSResult = css`
     height: 100%;
   }
 
+  /* Needed for minimal layout */
+  svg:not(:root) {
+    overflow: visible !important;
+  }
+
   .apexcharts-canvas {
     position: relative;
     user-select: none;

src/types.ts

@@ -1,3 +1,5 @@
+import { ApexOptions } from 'apexcharts';
+
 export interface ChartCardConfig extends ChartCardExternalConfig {
   series: ChartCardSeriesConfig[];
   hours_to_show: number;
@@ -12,6 +14,7 @@ export interface ChartCardExternalConfig {
   cache?: boolean;
   stacked?: boolean;
   layout?: string;
+  apex_config?: ApexOptions;
 }
 
 export interface ChartCardSeriesExternalConfig {