@aquera/nile-visualization 1.7.0 → 1.8.0

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 },

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

@@ -67,6 +67,13 @@ export const styles = css `
     display: none;
   }
 
+  /* Fit-to-container mode (set by nile-widget-viewer) — fills the allotted
+     cell so the KPI card never overflows and overlaps neighbors. The .kpi
+     element is already flex:1, so it stretches with the host. */
+  :host([fit]) {
+    height: 100%;
+  }
+
   /* Card / gauge chrome on the host when used alone (inside nile-chart, embed-in-nile-chart skips this). */
   :host([variant='card']:not([embed-in-nile-chart])),
   :host([variant='gauge']:not([embed-in-nile-chart])) {

package/dist/src/nile-line-chart/nile-line-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-line-chart/nile-line-chart.js

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

package/dist/src/nile-line-column-chart/nile-line-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-line-column-chart/nile-line-column-chart.js

@@ -124,7 +124,7 @@ let NileLineColumnChart = class NileLineColumnChart extends NileElement {
         const col = this.columnSeries;
         const line = this.lineSeries;
         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, crosshair: true },

package/dist/src/nile-lollipop-chart/nile-lollipop-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-lollipop-chart/nile-lollipop-chart.js

@@ -127,7 +127,7 @@ let NileLollipopChart = class NileLollipopChart extends NileElement {
             });
         }
         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-map-chart/nile-map-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-map-chart/nile-map-chart.js

@@ -206,7 +206,7 @@ let NileMapChart = class NileMapChart extends NileElement {
         const self = this;
         const defaults = {
             chart: {
-                height: this.height,
+                ...(this.height ? { height: this.height } : {}),
             },
             title: {
                 text: this.chartTitle || undefined,

package/dist/src/nile-organization-chart/nile-organization-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-organization-chart/nile-organization-chart.js

@@ -139,7 +139,7 @@ let NileOrganizationChart = class NileOrganizationChart extends NileElement {
         });
         return deepMerge({
             chart: {
-                height: this.height,
+                ...(this.height ? { height: this.height } : {}),
                 inverted: this.inverted,
             },
             title: { text: this.chartTitle || undefined },

package/dist/src/nile-pie-chart/nile-pie-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-pie-chart/nile-pie-chart.js

@@ -178,7 +178,7 @@ let NilePieChart = class NilePieChart extends NileElement {
         const defaults = {
             chart: {
                 type: 'pie',
-                height: this.height,
+                ...(this.height ? { height: this.height } : {}),
             },
             title: {
                 text: this.chartTitle || undefined,

package/dist/src/nile-polygon-chart/nile-polygon-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-polygon-chart/nile-polygon-chart.js

@@ -116,7 +116,7 @@ let NilePolygonChart = class NilePolygonChart 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: { title: { text: this.xAxisTitle || undefined } },

package/dist/src/nile-radar-chart/nile-radar-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-radar-chart/nile-radar-chart.js

@@ -151,7 +151,7 @@ let NileRadarChart = class NileRadarChart extends NileElement {
         const self = this;
         const seriesType = this.showArea ? 'area' : 'line';
         return deepMerge({
-            chart: { polar: true, type: seriesType, height: this.height },
+            chart: { polar: true, type: seriesType, ...(this.height ? { height: this.height } : {}) },
             title: { text: this.chartTitle || undefined },
             subtitle: { text: this.chartSubtitle || undefined },
             pane: { size: '80%' },

package/dist/src/nile-radial-bar-chart/nile-radial-bar-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);