@aquera/nile-visualization 1.7.0 → 1.9.0

package/dist/src/nile-cluster-chart/nile-cluster-chart.css.js

@@ -13,6 +13,7 @@ export const styles = css `
     --nile-chart-loading-bg: transparent;
     display: block;
     width: 100%;
+    height: 100%;
     position: relative;
   }
 
@@ -22,6 +23,7 @@ export const styles = css `
 
   .chart-container {
     width: 100%;
+    height: 100%;
     min-height: var(--nile-chart-min-height);
     background: var(--nile-chart-bg);
     border-radius: var(--nile-chart-border-radius);

package/dist/src/nile-cluster-chart/nile-cluster-chart.js

@@ -126,7 +126,7 @@ let NileClusterChart = class NileClusterChart extends NileElement {
     buildOptions() {
         const self = this;
         return deepMerge({
-            chart: { type: 'column', height: this.height },
+            chart: { type: 'column', ...(this.height ? { height: this.height } : {}) },
             title: { text: this.chartTitle || undefined },
             subtitle: { text: this.chartSubtitle || undefined },
             xAxis: { categories: this.categories },

package/dist/src/nile-column-chart/nile-column-chart.css.js

@@ -13,6 +13,7 @@ export const styles = css `
     --nile-chart-loading-bg: transparent;
     display: block;
     width: 100%;
+    height: 100%;
     position: relative;
   }
 
@@ -22,6 +23,7 @@ export const styles = css `
 
   .chart-container {
     width: 100%;
+    height: 100%;
     min-height: var(--nile-chart-min-height);
     background: var(--nile-chart-bg);
     border-radius: var(--nile-chart-border-radius);

package/dist/src/nile-column-chart/nile-column-chart.js

@@ -154,7 +154,7 @@ let NileColumnChart = class NileColumnChart extends NileElement {
     buildOptions() {
         const self = this;
         return deepMerge({
-            chart: { type: 'column', height: this.height },
+            chart: { type: 'column', ...(this.height ? { height: this.height } : {}) },
             title: { text: this.chartTitle || undefined },
             subtitle: { text: this.chartSubtitle || undefined },
             xAxis: { categories: this.categories },

package/dist/src/nile-column-drilldown-chart/nile-column-drilldown-chart.css.js

@@ -13,6 +13,7 @@ export const styles = css `
     --nile-chart-loading-bg: transparent;
     display: block;
     width: 100%;
+    height: 100%;
     position: relative;
   }
 
@@ -22,6 +23,7 @@ export const styles = css `
 
   .chart-container {
     width: 100%;
+    height: 100%;
     min-height: var(--nile-chart-min-height);
     background: var(--nile-chart-bg);
     border-radius: var(--nile-chart-border-radius);

package/dist/src/nile-column-drilldown-chart/nile-column-drilldown-chart.js

@@ -126,7 +126,7 @@ let NileColumnDrilldownChart = class NileColumnDrilldownChart extends NileElemen
             })),
         };
         return deepMerge({
-            chart: { type: 'column', height: this.height },
+            chart: { type: 'column', ...(this.height ? { height: this.height } : {}) },
             title: { text: this.chartTitle || undefined },
             subtitle: { text: this.chartSubtitle || undefined },
             xAxis: { type: 'category' },

package/dist/src/nile-column-pyramid-chart/nile-column-pyramid-chart.css.js

@@ -13,6 +13,7 @@ export const styles = css `
     --nile-chart-loading-bg: transparent;
     display: block;
     width: 100%;
+    height: 100%;
     position: relative;
   }
 
@@ -22,6 +23,7 @@ export const styles = css `
 
   .chart-container {
     width: 100%;
+    height: 100%;
     min-height: var(--nile-chart-min-height);
     background: var(--nile-chart-bg);
     border-radius: var(--nile-chart-border-radius);

package/dist/src/nile-column-pyramid-chart/nile-column-pyramid-chart.js

@@ -106,7 +106,7 @@ let NileColumnPyramidChart = class NileColumnPyramidChart extends NileElement {
     buildOptions() {
         const self = this;
         return deepMerge({
-            chart: { type: 'columnpyramid', height: this.height },
+            chart: { type: 'columnpyramid', ...(this.height ? { height: this.height } : {}) },
             title: { text: this.chartTitle || undefined },
             subtitle: { text: this.chartSubtitle || undefined },
             xAxis: { categories: this.categories },

package/dist/src/nile-column-range-chart/nile-column-range-chart.css.js

@@ -13,6 +13,7 @@ export const styles = css `
     --nile-chart-loading-bg: transparent;
     display: block;
     width: 100%;
+    height: 100%;
     position: relative;
   }
 
@@ -22,6 +23,7 @@ export const styles = css `
 
   .chart-container {
     width: 100%;
+    height: 100%;
     min-height: var(--nile-chart-min-height);
     background: var(--nile-chart-bg);
     border-radius: var(--nile-chart-border-radius);

package/dist/src/nile-column-range-chart/nile-column-range-chart.js

@@ -116,7 +116,7 @@ let NileColumnRangeChart = class NileColumnRangeChart extends NileElement {
     buildOptions() {
         const self = this;
         return deepMerge({
-            chart: { height: this.height },
+            chart: { ...(this.height ? { height: this.height } : {}) },
             title: { text: this.chartTitle || undefined },
             subtitle: { text: this.chartSubtitle || undefined },
             xAxis: { categories: this.categories },

package/dist/src/nile-dashboard-viewer/nile-dashboard-viewer.css.js

@@ -20,6 +20,11 @@ export const styles = css `
     width: 100%;
   }
 
+  .dashboard-absolute {
+    position: relative;
+    width: 100%;
+  }
+
   .dashboard-cell {
     min-height: 0;
     min-width: 0;
@@ -29,6 +34,11 @@ export const styles = css `
     box-sizing: border-box;
   }
 
+  .dashboard-cell--absolute {
+    position: absolute;
+    box-sizing: border-box;
+  }
+
   nile-widget-viewer {
     display: block;
     width: 100%;

package/dist/src/nile-dashboard-viewer/nile-dashboard-viewer.d.ts

@@ -4,26 +4,35 @@ import NileElement from '../internal/nile-element.js';
 import type { NileDashboardConfig } from '../internal/types/dashboard-config.type.js';
 import '../nile-widget-viewer/index.js';
 /**
- * Renders a full dashboard of widgets. Supports two layout variants:
+ * Renders a full dashboard of widgets. Supports three layout variants:
  *
  * - `grid` (default): positions each widget using CSS Grid with `layout: { x, y, w, h }`.
  *   - `x` / `w` → `grid-column: (x+1) / span w`
  *   - `y` / `h` → `grid-row: (y+1) / span h`
  * - `fluid`: positions widgets with Flexbox. `x` / `y` are ignored; widgets flow in
- *   declaration order and wrap as needed. `w` sets the proportional width (as a fraction
- *   of `columns`) and `h` sets the height (in multiples of `cellHeight`).
+ *   declaration order and wrap as needed.
+ * - `absolute`: pixel-faithful replacement for angular-gridster2's output. Each
+ *   widget is `position: absolute` with computed `left`/`top`/`width`/`height`.
+ *   Horizontal values are `calc()` of `100%` so the layout reflows with the
+ *   container (no JS measurement required). Spacing between cells matches CSS
+ *   `gap` (no outer margin), so the layout is pixel-identical to the `grid` variant.
  *
  * @example
  * ```html
- * <nile-dashboard-viewer variant="fluid" columns="12" cell-height="80" gap="8"></nile-dashboard-viewer>
+ * <nile-dashboard-viewer variant="absolute" columns="12" cell-height="80" gap="8"></nile-dashboard-viewer>
  * ```
  */
 export declare class NileDashboardViewer extends NileElement {
     static styles: CSSResultGroup;
     /** Dashboard configuration containing all widget configs. */
     config: NileDashboardConfig | null;
-    /** Layout variant. `grid` uses x/y/w/h positioning; `fluid` flows widgets with Flexbox. Default: `grid`. */
-    variant: 'grid' | 'fluid';
+    /**
+     * Layout variant.
+     * - `grid` uses CSS Grid with x/y/w/h positioning (default).
+     * - `fluid` flows widgets with Flexbox.
+     * - `absolute` mirrors angular-gridster2 (position:absolute with calc widths).
+     */
+    variant: 'grid' | 'fluid' | 'absolute';
     /** Total number of grid columns. Default: 12. */
     columns: number;
     /** Height of a single grid row in pixels. Default: 80. */

package/dist/src/nile-dashboard-viewer/nile-dashboard-viewer.js

@@ -5,18 +5,22 @@ import NileElement from '../internal/nile-element.js';
 import { styles } from './nile-dashboard-viewer.css.js';
 import '../nile-widget-viewer/index.js';
 /**
- * Renders a full dashboard of widgets. Supports two layout variants:
+ * Renders a full dashboard of widgets. Supports three layout variants:
  *
  * - `grid` (default): positions each widget using CSS Grid with `layout: { x, y, w, h }`.
  *   - `x` / `w` → `grid-column: (x+1) / span w`
  *   - `y` / `h` → `grid-row: (y+1) / span h`
  * - `fluid`: positions widgets with Flexbox. `x` / `y` are ignored; widgets flow in
- *   declaration order and wrap as needed. `w` sets the proportional width (as a fraction
- *   of `columns`) and `h` sets the height (in multiples of `cellHeight`).
+ *   declaration order and wrap as needed.
+ * - `absolute`: pixel-faithful replacement for angular-gridster2's output. Each
+ *   widget is `position: absolute` with computed `left`/`top`/`width`/`height`.
+ *   Horizontal values are `calc()` of `100%` so the layout reflows with the
+ *   container (no JS measurement required). Spacing between cells matches CSS
+ *   `gap` (no outer margin), so the layout is pixel-identical to the `grid` variant.
  *
  * @example
  * ```html
- * <nile-dashboard-viewer variant="fluid" columns="12" cell-height="80" gap="8"></nile-dashboard-viewer>
+ * <nile-dashboard-viewer variant="absolute" columns="12" cell-height="80" gap="8"></nile-dashboard-viewer>
  * ```
  */
 let NileDashboardViewer = class NileDashboardViewer extends NileElement {
@@ -24,7 +28,12 @@ let NileDashboardViewer = class NileDashboardViewer extends NileElement {
         super(...arguments);
         /** Dashboard configuration containing all widget configs. */
         this.config = null;
-        /** Layout variant. `grid` uses x/y/w/h positioning; `fluid` flows widgets with Flexbox. Default: `grid`. */
+        /**
+         * Layout variant.
+         * - `grid` uses CSS Grid with x/y/w/h positioning (default).
+         * - `fluid` flows widgets with Flexbox.
+         * - `absolute` mirrors angular-gridster2 (position:absolute with calc widths).
+         */
         this.variant = 'grid';
         /** Total number of grid columns. Default: 12. */
         this.columns = 12;
@@ -49,7 +58,39 @@ let NileDashboardViewer = class NileDashboardViewer extends NileElement {
                 style="
                   flex: 1 1 ${basis};
                   max-width: ${widthPct}%;
-                  min-height: ${h * this.cellHeight}px;
+                  height: ${h * this.cellHeight}px;
+                "
+              >
+                <nile-widget-viewer .config=${widget}></nile-widget-viewer>
+              </div>
+            `;
+            })}
+        </div>
+      `;
+        }
+        if (this.variant === 'absolute') {
+            const C = this.columns;
+            const rH = this.cellHeight;
+            const m = this.gap;
+            const maxRow = this.config.widgets.reduce((acc, widget) => Math.max(acc, widget.layout.y + widget.layout.h), 0);
+            const containerH = maxRow > 0 ? maxRow * rH + (maxRow - 1) * m : 0;
+            const colExpr = `(100% - ${(C - 1) * m}px) / ${C}`;
+            return html `
+        <div class="dashboard-absolute" style="height: ${containerH}px;">
+          ${this.config.widgets.map((widget) => {
+                const { x, y, w, h } = widget.layout;
+                const leftStyle = `calc(${colExpr} * ${x} + ${x * m}px)`;
+                const widthStyle = `calc(${colExpr} * ${w} + ${(w - 1) * m}px)`;
+                const topPx = y * (rH + m);
+                const heightPx = h * rH + (h - 1) * m;
+                return html `
+              <div
+                class="dashboard-cell dashboard-cell--absolute"
+                style="
+                  left: ${leftStyle};
+                  top: ${topPx}px;
+                  width: ${widthStyle};
+                  height: ${heightPx}px;
                 "
               >
                 <nile-widget-viewer .config=${widget}></nile-widget-viewer>

package/dist/src/nile-donut-chart/nile-donut-chart.css.js

@@ -13,6 +13,7 @@ export const styles = css `
     --nile-chart-loading-bg: transparent;
     display: block;
     width: 100%;
+    height: 100%;
     position: relative;
   }
 
@@ -22,6 +23,7 @@ export const styles = css `
 
   .chart-container {
     width: 100%;
+    height: 100%;
     min-height: var(--nile-chart-min-height);
     background: var(--nile-chart-bg);
     border-radius: var(--nile-chart-border-radius);

package/dist/src/nile-donut-chart/nile-donut-chart.js

@@ -161,7 +161,7 @@ let NileDonutChart = class NileDonutChart extends NileElement {
     buildOptions() {
         const self = this;
         return deepMerge({
-            chart: { type: 'pie', height: this.height },
+            chart: { type: 'pie', ...(this.height ? { height: this.height } : {}) },
             title: { text: this.chartTitle || undefined },
             subtitle: { text: this.chartSubtitle || undefined },
             tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' },

package/dist/src/nile-dumbbell-chart/nile-dumbbell-chart.css.js

@@ -13,6 +13,7 @@ export const styles = css `
     --nile-chart-loading-bg: transparent;
     display: block;
     width: 100%;
+    height: 100%;
     position: relative;
   }
 
@@ -22,6 +23,7 @@ export const styles = css `
 
   .chart-container {
     width: 100%;
+    height: 100%;
     min-height: var(--nile-chart-min-height);
     background: var(--nile-chart-bg);
     border-radius: var(--nile-chart-border-radius);

package/dist/src/nile-dumbbell-chart/nile-dumbbell-chart.js

@@ -130,7 +130,7 @@ let NileDumbbellChart = class NileDumbbellChart extends NileElement {
         return deepMerge({
             chart: {
                 type: 'dumbbell',
-                height: this.height,
+                ...(this.height ? { height: this.height } : {}),
                 inverted: this.horizontal,
             },
             title: { text: this.chartTitle || undefined },

package/dist/src/nile-dumbbell-lower-chart/nile-dumbbell-lower-chart.css.js

@@ -13,6 +13,7 @@ export const styles = css `
     --nile-chart-loading-bg: transparent;
     display: block;
     width: 100%;
+    height: 100%;
     position: relative;
   }
 
@@ -22,6 +23,7 @@ export const styles = css `
 
   .chart-container {
     width: 100%;
+    height: 100%;
     min-height: var(--nile-chart-min-height);
     background: var(--nile-chart-bg);
     border-radius: var(--nile-chart-border-radius);

package/dist/src/nile-dumbbell-lower-chart/nile-dumbbell-lower-chart.js

@@ -126,7 +126,7 @@ let NileDumbbellLowerChart = class NileDumbbellLowerChart extends NileElement {
         return deepMerge({
             chart: {
                 type: 'dumbbell',
-                height: this.height,
+                ...(this.height ? { height: this.height } : {}),
                 inverted: this.horizontal,
             },
             title: { text: this.chartTitle || undefined },

package/dist/src/nile-dumbbell-upper-chart/nile-dumbbell-upper-chart.css.js

@@ -13,6 +13,7 @@ export const styles = css `
     --nile-chart-loading-bg: transparent;
     display: block;
     width: 100%;
+    height: 100%;
     position: relative;
   }
 
@@ -22,6 +23,7 @@ export const styles = css `
 
   .chart-container {
     width: 100%;
+    height: 100%;
     min-height: var(--nile-chart-min-height);
     background: var(--nile-chart-bg);
     border-radius: var(--nile-chart-border-radius);

package/dist/src/nile-dumbbell-upper-chart/nile-dumbbell-upper-chart.js

@@ -126,7 +126,7 @@ let NileDumbbellUpperChart = class NileDumbbellUpperChart extends NileElement {
         return deepMerge({
             chart: {
                 type: 'dumbbell',
-                height: this.height,
+                ...(this.height ? { height: this.height } : {}),
                 inverted: this.horizontal,
             },
             title: { text: this.chartTitle || undefined },

package/dist/src/nile-euler-chart/nile-euler-chart.css.js

@@ -13,6 +13,7 @@ export const styles = css `
     --nile-chart-loading-bg: transparent;
     display: block;
     width: 100%;
+    height: 100%;
     position: relative;
   }
 
@@ -22,6 +23,7 @@ export const styles = css `
 
   .chart-container {
     width: 100%;
+    height: 100%;
     min-height: var(--nile-chart-min-height);
     background: var(--nile-chart-bg);
     border-radius: var(--nile-chart-border-radius);

package/dist/src/nile-euler-chart/nile-euler-chart.js

@@ -105,7 +105,7 @@ let NileEulerChart = class NileEulerChart extends NileElement {
     buildOptions() {
         const self = this;
         return deepMerge({
-            chart: { height: this.height },
+            chart: { ...(this.height ? { height: this.height } : {}) },
             title: { text: this.chartTitle || undefined },
             subtitle: { text: this.chartSubtitle || undefined },
             tooltip: { headerFormat: '', pointFormat: '{point.name}: <b>{point.value}</b>' },

package/dist/src/nile-fan-chart/nile-fan-chart.css.js

@@ -13,6 +13,7 @@ export const styles = css `
     --nile-chart-loading-bg: transparent;
     display: block;
     width: 100%;
+    height: 100%;
     position: relative;
   }
 
@@ -22,6 +23,7 @@ export const styles = css `
 
   .chart-container {
     width: 100%;
+    height: 100%;
     min-height: var(--nile-chart-min-height);
     background: var(--nile-chart-bg);
     border-radius: var(--nile-chart-border-radius);

package/dist/src/nile-fan-chart/nile-fan-chart.js

@@ -174,7 +174,7 @@ let NileFanChart = class NileFanChart extends NileElement {
         }));
         return deepMerge({
             chart: {
-                height: this.height,
+                ...(this.height ? { height: this.height } : {}),
                 zoomType: 'x',
             },
             title: { text: this.chartTitle || undefined },

package/dist/src/nile-flame-chart/nile-flame-chart.css.js

@@ -13,6 +13,7 @@ export const styles = css `
     --nile-chart-loading-bg: transparent;
     display: block;
     width: 100%;
+    height: 100%;
     position: relative;
   }
 
@@ -22,6 +23,7 @@ export const styles = css `
 
   .chart-container {
     width: 100%;
+    height: 100%;
     min-height: var(--nile-chart-min-height);
     background: var(--nile-chart-bg);
     border-radius: var(--nile-chart-border-radius);

package/dist/src/nile-flame-chart/nile-flame-chart.js

@@ -186,7 +186,7 @@ let NileFlameChart = class NileFlameChart extends NileElement {
         const titleText = this.chartTitle ||
             (isSunburst ? 'Sunburst' : this.layout === 'icicle' ? 'Icicle chart' : 'Flame chart');
         return deepMerge({
-            chart: { inverted: !isSunburst, height: this.height },
+            chart: { inverted: !isSunburst, ...(this.height ? { height: this.height } : {}) },
             title: { text: titleText, align: 'left' },
             subtitle: { text: this.chartSubtitle || undefined, align: 'left' },
             legend: { enabled: false },

package/dist/src/nile-funnel-chart/nile-funnel-chart.css.js

@@ -13,6 +13,7 @@ export const styles = css `
     --nile-chart-loading-bg: transparent;
     display: block;
     width: 100%;
+    height: 100%;
     position: relative;
   }
 
@@ -22,6 +23,7 @@ export const styles = css `
 
   .chart-container {
     width: 100%;
+    height: 100%;
     min-height: var(--nile-chart-min-height);
     background: var(--nile-chart-bg);
     border-radius: var(--nile-chart-border-radius);

package/dist/src/nile-funnel-chart/nile-funnel-chart.js

@@ -120,7 +120,7 @@ let NileFunnelChart = class NileFunnelChart extends NileElement {
     buildOptions() {
         const self = this;
         return deepMerge({
-            chart: { type: 'funnel', height: this.height },
+            chart: { type: 'funnel', ...(this.height ? { height: this.height } : {}) },
             title: { text: this.chartTitle || undefined },
             subtitle: { text: this.chartSubtitle || undefined },
             tooltip: {

package/dist/src/nile-gauge-chart/nile-gauge-chart.css.js

@@ -13,6 +13,7 @@ export const styles = css `
     --nile-chart-loading-bg: transparent;
     display: block;
     width: 100%;
+    height: 100%;
     position: relative;
   }
 
@@ -22,6 +23,7 @@ export const styles = css `
 
   .chart-container {
     width: 100%;
+    height: 100%;
     min-height: var(--nile-chart-min-height);
     background: var(--nile-chart-bg);
     border-radius: var(--nile-chart-border-radius);

package/dist/src/nile-gauge-chart/nile-gauge-chart.js

@@ -152,7 +152,7 @@ let NileGaugeChart = class NileGaugeChart extends NileElement {
     }
     buildOptions() {
         return deepMerge({
-            chart: { type: 'gauge', height: this.height },
+            chart: { type: 'gauge', ...(this.height ? { height: this.height } : {}) },
             title: { text: this.chartTitle || undefined },
             subtitle: { text: this.chartSubtitle || undefined },
             pane: {

package/dist/src/nile-heatmap-chart/nile-heatmap-chart.css.js

@@ -13,6 +13,7 @@ export const styles = css `
     --nile-chart-loading-bg: transparent;
     display: block;
     width: 100%;
+    height: 100%;
     position: relative;
   }
 
@@ -22,6 +23,7 @@ export const styles = css `
 
   .chart-container {
     width: 100%;
+    height: 100%;
     min-height: var(--nile-chart-min-height);
     background: var(--nile-chart-bg);
     border-radius: var(--nile-chart-border-radius);

package/dist/src/nile-heatmap-chart/nile-heatmap-chart.js

@@ -153,7 +153,7 @@ let NileHeatmapChart = class NileHeatmapChart extends NileElement {
         const cMax = this.colorMax ?? ext.max;
         const seriesData = this.data.map(c => [c.x, c.y, c.value]);
         return deepMerge({
-            chart: { type: 'heatmap', height: this.height },
+            chart: { type: 'heatmap', ...(this.height ? { height: this.height } : {}) },
             title: { text: this.chartTitle || undefined },
             subtitle: { text: this.chartSubtitle || undefined },
             xAxis: { categories: this.xCategories, title: { text: undefined } },

package/dist/src/nile-histogram-chart/nile-histogram-chart.css.js

@@ -13,6 +13,7 @@ export const styles = css `
     --nile-chart-loading-bg: transparent;
     display: block;
     width: 100%;
+    height: 100%;
     position: relative;
   }
 
@@ -22,6 +23,7 @@ export const styles = css `
 
   .chart-container {
     width: 100%;
+    height: 100%;
     min-height: var(--nile-chart-min-height);
     background: var(--nile-chart-bg);
     border-radius: var(--nile-chart-border-radius);

package/dist/src/nile-histogram-chart/nile-histogram-chart.js

@@ -155,7 +155,7 @@ let NileHistogramChart = class NileHistogramChart extends NileElement {
         const sorted = [...this.data].sort((a, b) => a - b);
         const scatterData = sorted.map(x => [x, 0]);
         return deepMerge({
-            chart: { height: this.height },
+            chart: { ...(this.height ? { height: this.height } : {}) },
             title: { text: this.chartTitle || undefined },
             subtitle: { text: this.chartSubtitle || undefined },
             legend: { enabled: this.showLegend },

package/dist/src/nile-inverted-area-chart/nile-inverted-area-chart.css.js

@@ -13,6 +13,7 @@ export const styles = css `
     --nile-chart-loading-bg: transparent;
     display: block;
     width: 100%;
+    height: 100%;
     position: relative;
   }
 
@@ -22,6 +23,7 @@ export const styles = css `
 
   .chart-container {
     width: 100%;
+    height: 100%;
     min-height: var(--nile-chart-min-height);
     background: var(--nile-chart-bg);
     border-radius: var(--nile-chart-border-radius);

package/dist/src/nile-inverted-area-chart/nile-inverted-area-chart.js

@@ -117,7 +117,7 @@ let NileInvertedAreaChart = class NileInvertedAreaChart extends NileElement {
     buildOptions() {
         const self = this;
         return deepMerge({
-            chart: { type: 'area', inverted: true, height: this.height },
+            chart: { type: 'area', inverted: true, ...(this.height ? { height: this.height } : {}) },
             title: { text: this.chartTitle || undefined },
             subtitle: { text: this.chartSubtitle || undefined },
             xAxis: { categories: this.categories },