@aquera/nile-visualization 1.7.0 → 1.9.0

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

@@ -47,7 +47,7 @@ export const styles = css `
     --nile-kpi-label-color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
     --nile-kpi-label-font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     --nile-kpi-label-font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
-    --nile-kpi-value-font-size: clamp(1.25rem, 2.5vw + 0.75rem, 36px);
+    --nile-kpi-value-font-size: clamp(1.25rem, 5cqi + 0.5rem, 36px);
     --nile-kpi-value-color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     --nile-kpi-prefix-suffix-font-size: var(--nile-type-scale-6, var(--ng-font-size-text-xl));
     --nile-kpi-prefix-suffix-color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
@@ -59,14 +59,24 @@ export const styles = css `
     display: flex;
     flex-direction: column;
     width: 100%;
+    min-width: 160px;
     position: relative;
     box-sizing: border-box;
+    overflow: hidden;
+    container-type: inline-size;
   }
 
   :host([hidden]) {
     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])) {
@@ -82,12 +92,29 @@ export const styles = css `
     box-shadow: var(--nile-kpi-card-shadow-hover);
   }
 
+  /* Accent variant — card chrome with a prominent left colour bar. */
+  :host([variant='accent']:not([embed-in-nile-chart])) {
+    --nile-kpi-accent-color: #005EA6;
+    background: var(--nile-kpi-card-bg);
+    border: var(--nile-kpi-card-border-width) solid var(--nile-kpi-card-border-color);
+    border-left: 4px solid var(--nile-kpi-accent-color);
+    border-radius: var(--nile-kpi-card-border-radius);
+    box-shadow: var(--nile-kpi-card-shadow);
+    transition: box-shadow var(--nile-transition-duration-default, var(--ng-transition-duration-default)) ease;
+  }
+
+  :host([variant='accent']:not([embed-in-nile-chart]):hover) {
+    box-shadow: var(--nile-kpi-card-shadow-hover);
+  }
+
   .kpi {
     flex: 1 1 auto;
     display: flex;
     flex-direction: column;
     gap: var(--nile-kpi-content-gap);
     padding: var(--nile-kpi-padding-v) var(--nile-kpi-padding-h);
+    min-width: 0;
+    overflow: hidden;
   }
 
   .kpi-label {
@@ -97,13 +124,20 @@ export const styles = css `
     font-weight: var(--nile-kpi-label-font-weight);
     color: var(--nile-kpi-label-color);
     line-height: 1.4;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+    width: 100%;
   }
 
   .kpi-value-row {
     display: flex;
-    align-items: baseline;
+    align-items: center;
     gap: var(--nile-spacing-md, var(--ng-spacing-md));
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
+    min-width: 0;
+    overflow: hidden;
   }
 
   .kpi-value {
@@ -114,6 +148,8 @@ export const styles = css `
     color: var(--nile-kpi-value-color);
     line-height: 1.2;
     cursor: default;
+    white-space: nowrap;
+    flex-shrink: 0;
   }
 
   .kpi-prefix,
@@ -134,6 +170,16 @@ export const styles = css `
     font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
     font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
     line-height: 1;
+    flex-shrink: 1;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  @container (max-width: 240px) {
+    .kpi-trend {
+      display: none;
+    }
   }
 
   .kpi-trend--up {
@@ -169,6 +215,11 @@ export const styles = css `
     font-size: var(--nile-kpi-description-font-size);
     color: var(--nile-kpi-description-color);
     line-height: 1.5;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+    width: 100%;
   }
 
   .kpi-sparkline {

package/dist/src/nile-kpi-chart/nile-kpi-chart.d.ts

@@ -3,8 +3,9 @@ import type Highcharts from 'highcharts';
 import NileElement from '../internal/nile-element.js';
 import type { AqConfigType } from '../internal/types/aq-config.type.js';
 export type TrendDirection = 'up' | 'down' | 'neutral';
-export type KpiVariant = 'default' | 'card' | 'gauge';
+export type KpiVariant = 'default' | 'card' | 'gauge' | 'accent';
 export type SparklineType = 'area' | 'line';
+export type KpiValueFormat = 'auto' | 'K' | 'M' | 'B' | 'T' | 'none';
 /** `chart` slice for `<nile-kpi-chart>.config` (discriminated by `type: 'kpi'`). */
 export interface ChartKpiSeparatedPayload {
     type: 'kpi';
@@ -63,6 +64,8 @@ export interface ChartKpiSeparatedPayload {
     loadingText?: string;
     /** Whether the hover tooltip is shown on value / sparkline / gauge (default: true). */
     tooltipEnabled?: boolean;
+    /** Accent bar colour for the 'accent' variant (default: brand blue). */
+    accentColor?: string;
     cardBackground?: string;
     cardBorderColor?: string;
     cardBorderWidth?: string | number;
@@ -86,6 +89,18 @@ export interface ChartKpiSeparatedPayload {
     options?: Highcharts.Options;
     /** Box size when a height is set (host min-height and height). */
     height?: string | number;
+    /** How to abbreviate the display value. 'auto' picks K/M/B/T by magnitude. Default: 'auto'. */
+    valueFormat?: KpiValueFormat;
+    /** Decimal places for the abbreviated value. Auto-selects 0–2 when omitted. */
+    precision?: number;
+    /** BCP 47 locale for number formatting, e.g. 'en-IN'. Defaults to browser locale. */
+    locale?: string;
+    /**
+     * Base unit appended after the magnitude prefix — e.g. `'L'` + `valueFormat: 'auto'` on 1500
+     * renders `"1.5KL"` on the card and `"1,500L"` in the tooltip. Use for physical units
+     * (L, g, m, Pa, Hz, B, etc.). For non-unit suffix text (%, /day), use `suffix` instead.
+     */
+    unit?: string;
 }
 /** Separated `{ chart, aq }` input for `<nile-kpi-chart>`. */
 export interface NileKpiConfigInputType {
@@ -196,6 +211,8 @@ export declare class NileKpiChart extends NileElement {
     cardPaddingVertical: string | number;
     cardPaddingHorizontal: string | number;
     contentGap: string | number;
+    /** Accent bar colour for the 'accent' variant. */
+    accentColor: string;
     labelColor: string;
     labelFontSize: string | number;
     labelFontWeight: string | number;
@@ -210,6 +227,14 @@ export declare class NileKpiChart extends NileElement {
     loading: boolean;
     /** Highcharts options override for the sparkline or gauge. */
     options: Highcharts.Options;
+    /** How to abbreviate the numeric value. 'auto' picks K/M/B/T by magnitude. Default: 'auto'. */
+    valueFormat: KpiValueFormat;
+    /** Base unit combined with the magnitude prefix (e.g. 'L' → "1.5KL"). */
+    unit: string;
+    /** Decimal places for the abbreviated value. null = auto (0–2 by magnitude). */
+    precision: number | null;
+    /** BCP 47 locale for number formatting, e.g. 'en-IN'. Defaults to browser locale. */
+    locale: string;
     /**
      * Set by nile-chart: skip host border/shadow (variant card/gauge) so the parent chart-card is the only frame.
      */
@@ -223,6 +248,7 @@ export declare class NileKpiChart extends NileElement {
     private formatTooltipNumber;
     private inferSparklineTooltipScale;
     private getTooltipContent;
+    private formatValue;
     private applyConfig;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -240,6 +266,8 @@ export declare class NileKpiChart extends NileElement {
     private destroyGauge;
     private destroyCharts;
     private _onValueEnter;
+    private _onDescEnter;
+    private _onLabelEnter;
     private _onGaugeEnter;
     private _onTipLeave;
     private renderTrend;

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

@@ -106,6 +106,8 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         this.cardPaddingVertical = '';
         this.cardPaddingHorizontal = '';
         this.contentGap = '';
+        /** Accent bar colour for the 'accent' variant. */
+        this.accentColor = '';
         // ── Label ──
         this.labelColor = '';
         this.labelFontSize = '';
@@ -124,6 +126,14 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         this.loading = false;
         /** Highcharts options override for the sparkline or gauge. */
         this.options = {};
+        /** How to abbreviate the numeric value. 'auto' picks K/M/B/T by magnitude. Default: 'auto'. */
+        this.valueFormat = 'auto';
+        /** Base unit combined with the magnitude prefix (e.g. 'L' → "1.5KL"). */
+        this.unit = '';
+        /** Decimal places for the abbreviated value. null = auto (0–2 by magnitude). */
+        this.precision = null;
+        /** BCP 47 locale for number formatting, e.g. 'en-IN'. Defaults to browser locale. */
+        this.locale = '';
         /**
          * Set by nile-chart: skip host border/shadow (variant card/gauge) so the parent chart-card is the only frame.
          */
@@ -160,7 +170,25 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         // ── Value / Gauge hover handlers ─────────────────────────────────────────
         this._onValueEnter = (e) => {
             const rect = e.currentTarget.getBoundingClientRect();
-            this._showTip(this.getTooltipContent(), rect.left + rect.width / 2, rect.top);
+            const rawNum = this.parseNumericValue(this.value);
+            const full = rawNum != null ? this.formatValue(rawNum).full : String(this.value ?? '');
+            const prefix = this.prefix ?? '';
+            const suffix = this.suffix ?? '';
+            this._showTip(`${prefix}${full}${suffix}`.trim(), rect.left + rect.width / 2, rect.top);
+        };
+        this._onDescEnter = (e) => {
+            const el = e.currentTarget;
+            if (el.scrollWidth <= el.clientWidth)
+                return;
+            const rect = el.getBoundingClientRect();
+            this._showTip(this.description ?? '', rect.left + rect.width / 2, rect.top);
+        };
+        this._onLabelEnter = (e) => {
+            const el = e.currentTarget;
+            if (el.scrollWidth <= el.clientWidth)
+                return;
+            const rect = el.getBoundingClientRect();
+            this._showTip(this.label ?? '', rect.left + rect.width / 2, rect.top);
         };
         this._onGaugeEnter = (e) => {
             const rect = e.currentTarget.getBoundingClientRect();
@@ -203,6 +231,7 @@ let NileKpiChart = class NileKpiChart extends NileElement {
                 this.style.removeProperty(prop);
         };
         const len = (val) => this.formatCssLength(val) ?? '';
+        set('--nile-kpi-accent-color', this.accentColor);
         set('--nile-kpi-card-bg', this.cardBackground);
         set('--nile-kpi-card-border-color', this.cardBorderColor);
         set('--nile-kpi-card-border-width', len(this.cardBorderWidth));
@@ -252,11 +281,12 @@ let NileKpiChart = class NileKpiChart extends NileElement {
     }
     formatTooltipNumber(n) {
         const maxFractionDigits = Number.isInteger(n) ? 0 : 6;
-        return new Intl.NumberFormat(undefined, {
+        const grouped = new Intl.NumberFormat(this.locale || undefined, {
             useGrouping: true,
             minimumFractionDigits: 0,
             maximumFractionDigits: maxFractionDigits,
         }).format(n);
+        return `${grouped}${this.unit ?? ''}`;
     }
     inferSparklineTooltipScale() {
         if (!this.sparkline?.length)
@@ -284,6 +314,85 @@ let NileKpiChart = class NileKpiChart extends NileElement {
             : this.formatTooltipNumber(numeric);
         return `${prefix}${valueText}${suffix}`.trim();
     }
+    formatValue(raw) {
+        const fmt = this.valueFormat;
+        const baseUnit = this.unit ?? '';
+        const abs = Math.abs(raw);
+        const sign = raw < 0 ? '-' : '';
+        const maxFrac = Number.isInteger(raw) ? 0 : 6;
+        const tooltipLocale = this.locale || undefined;
+        const displayLocale = this.locale || undefined;
+        const full = `${new Intl.NumberFormat(tooltipLocale, {
+            useGrouping: true, minimumFractionDigits: 0, maximumFractionDigits: maxFrac,
+        }).format(raw)}${baseUnit}`;
+        const display0 = `${new Intl.NumberFormat(displayLocale, {
+            useGrouping: true, minimumFractionDigits: 0, maximumFractionDigits: maxFrac,
+        }).format(raw)}${baseUnit}`;
+        if (fmt === 'none')
+            return { display: display0, full, abbreviated: false };
+        let divisor = 0;
+        let magnitude = '';
+        if (fmt === 'K') {
+            divisor = 1e3;
+            magnitude = 'K';
+        }
+        else if (fmt === 'M') {
+            divisor = 1e6;
+            magnitude = 'M';
+        }
+        else if (fmt === 'B') {
+            divisor = 1e9;
+            magnitude = 'B';
+        }
+        else if (fmt === 'T') {
+            divisor = 1e12;
+            magnitude = 'T';
+        }
+        else {
+            if (abs >= 1e12) {
+                divisor = 1e12;
+                magnitude = 'T';
+            }
+            else if (abs >= 1e9) {
+                divisor = 1e9;
+                magnitude = 'B';
+            }
+            else if (abs >= 1e6) {
+                divisor = 1e6;
+                magnitude = 'M';
+            }
+            else if (abs >= 1e3) {
+                divisor = 1e3;
+                magnitude = 'K';
+            }
+        }
+        if (!divisor)
+            return { display: display0, full, abbreviated: false };
+        const divided = abs / divisor;
+        let decimals;
+        if (this.precision !== null) {
+            decimals = Math.max(0, Math.floor(this.precision));
+        }
+        else {
+            decimals = divided >= 100 ? 0 : divided >= 10 ? 1 : 2;
+        }
+        let numStr;
+        if (this._hc) {
+            numStr = this._hc.numberFormat(divided, decimals, undefined, '');
+            if (this.precision === null) {
+                const dec = this._hc.options?.lang?.decimalPoint ?? '.';
+                const escapedDec = dec.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+                numStr = numStr.replace(new RegExp(`${escapedDec}0*$`), '').replace(new RegExp(`${escapedDec}$`), '');
+            }
+        }
+        else {
+            numStr = divided.toFixed(decimals);
+            if (this.precision === null && numStr.includes('.')) {
+                numStr = numStr.replace(/\.?0+$/, '');
+            }
+        }
+        return { display: `${sign}${numStr}${magnitude}${baseUnit}`, full, abbreviated: true };
+    }
     // ── Config ───────────────────────────────────────────────────────────────
     applyConfig(cfg) {
         const { chart: c, aq } = cfg;
@@ -358,6 +467,8 @@ let NileKpiChart = class NileKpiChart extends NileElement {
                 this.loadingText = c.loadingText;
             if (c.tooltipEnabled !== undefined)
                 this.tooltipEnabled = c.tooltipEnabled;
+            if (c.accentColor !== undefined)
+                this.accentColor = c.accentColor;
             if (c.cardBackground !== undefined)
                 this.cardBackground = c.cardBackground;
             if (c.cardBorderColor !== undefined)
@@ -400,6 +511,14 @@ let NileKpiChart = class NileKpiChart extends NileElement {
                 this.loading = c.loading;
             if (c.options !== undefined)
                 this.options = c.options;
+            if (c.valueFormat !== undefined)
+                this.valueFormat = c.valueFormat;
+            if (c.precision !== undefined)
+                this.precision = c.precision;
+            if (c.locale !== undefined)
+                this.locale = c.locale;
+            if (c.unit !== undefined)
+                this.unit = c.unit;
             if ('height' in c) {
                 const h = this.formatCssLength(c.height);
                 if (h) {
@@ -426,6 +545,9 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         super.connectedCallback();
         ensureTooltipStyles();
         this._createTipEl();
+        if (!this._hc) {
+            getHighcharts().then(hc => { this._hc = hc; this.requestUpdate(); });
+        }
         if (this.config)
             this.applyConfig(this.config);
     }
@@ -460,7 +582,7 @@ let NileKpiChart = class NileKpiChart extends NileElement {
                 this.initSparkline();
             }
         }
-        const cssVarProps = ['cardBackground', 'cardBorderColor', 'cardBorderWidth', 'cardBorderRadius',
+        const cssVarProps = ['accentColor', 'cardBackground', 'cardBorderColor', 'cardBorderWidth', 'cardBorderRadius',
             'cardShadow', 'cardShadowHover', 'cardPaddingVertical', 'cardPaddingHorizontal', 'contentGap',
             'labelColor', 'labelFontSize', 'labelFontWeight', 'descriptionColor', 'descriptionFontSize',
             'prefixSuffixColor', 'prefixSuffixFontSize', 'trendUpColor', 'trendDownColor', 'trendNeutralColor',
@@ -589,7 +711,13 @@ let NileKpiChart = class NileKpiChart extends NileElement {
                         borderWidth: 0,
                         y: this.gaugeLabelYOffset,
                         useHTML: true,
-                        format: `<div style="text-align:center"><span style="font-size:${labelFontSize};font-weight:${labelFontWeight};color:${labelColor}">${this.prefix}{y}${this.suffix}</span></div>`,
+                        formatter: (() => {
+                            const self = this;
+                            return function () {
+                                const fmtResult = self.formatValue(this.y ?? 0);
+                                return `<div style="text-align:center"><span style="font-size:${labelFontSize};font-weight:${labelFontWeight};color:${labelColor}">${self.prefix}${fmtResult.display}${self.suffix}</span></div>`;
+                            };
+                        })(),
                     },
                     rounded: this.gaugeRounded,
                     linecap: 'round',
@@ -675,9 +803,17 @@ let NileKpiChart = class NileKpiChart extends NileElement {
             return html `<div class="chart-loading">${this.loadingText}</div>`;
         }
         const isGauge = this.variant === 'gauge';
+        const rawNum = this.parseNumericValue(this.value);
+        const fmt = rawNum != null ? this.formatValue(rawNum) : null;
+        const displayValue = fmt ? fmt.display : String(this.value ?? '');
+        const showTooltip = !!fmt && fmt.display !== fmt.full;
         return html `
       <div class="kpi ${isGauge ? 'kpi--gauge' : ''}">
-        ${this.label ? html `<p class="kpi-label">${this.label}</p>` : nothing}
+        ${this.label ? html `<p
+          class="kpi-label"
+          @mouseenter=${this._onLabelEnter}
+          @mouseleave=${this._onTipLeave}
+        >${this.label}</p>` : nothing}
 
         ${isGauge ? html `
           <div
@@ -691,10 +827,10 @@ let NileKpiChart = class NileKpiChart extends NileElement {
           ${!isGauge ? html `
             <h2
               class="kpi-value"
-              @mouseenter=${this._onValueEnter}
-              @mouseleave=${this._onTipLeave}
+              @mouseenter=${showTooltip ? this._onValueEnter : nothing}
+              @mouseleave=${showTooltip ? this._onTipLeave : nothing}
             >
-              ${this.prefix ? html `<span class="kpi-prefix">${this.prefix}</span>` : nothing}${this.value}${this.suffix ? html `<span class="kpi-suffix">${this.suffix}</span>` : nothing}
+              ${this.prefix ? html `<span class="kpi-prefix">${this.prefix}</span>` : nothing}${displayValue}${this.suffix ? html `<span class="kpi-suffix">${this.suffix}</span>` : nothing}
             </h2>
           ` : nothing}
           ${!isGauge ? this.renderTrend() : nothing}
@@ -702,7 +838,11 @@ let NileKpiChart = class NileKpiChart extends NileElement {
 
         ${isGauge ? this.renderTrend() : nothing}
 
-        ${this.description ? html `<p class="kpi-description">${this.description}</p>` : nothing}
+        ${this.description ? html `<p
+          class="kpi-description"
+          @mouseenter=${this._onDescEnter}
+          @mouseleave=${this._onTipLeave}
+        >${this.description}</p>` : nothing}
 
         ${this.sparkline.length && !isGauge ? html `<div class="kpi-sparkline"></div>` : nothing}
       </div>
@@ -851,6 +991,9 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'content-gap' })
 ], NileKpiChart.prototype, "contentGap", void 0);
+__decorate([
+    property({ type: String, attribute: 'accent-color' })
+], NileKpiChart.prototype, "accentColor", void 0);
 __decorate([
     property({ type: String, attribute: 'label-color' })
 ], NileKpiChart.prototype, "labelColor", void 0);
@@ -887,6 +1030,18 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], NileKpiChart.prototype, "options", void 0);
+__decorate([
+    property({ type: String, attribute: 'value-format' })
+], NileKpiChart.prototype, "valueFormat", void 0);
+__decorate([
+    property({ type: String })
+], NileKpiChart.prototype, "unit", void 0);
+__decorate([
+    property({ type: Number })
+], NileKpiChart.prototype, "precision", void 0);
+__decorate([
+    property({ type: String })
+], NileKpiChart.prototype, "locale", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'embed-in-nile-chart' })
 ], NileKpiChart.prototype, "embedInNileChart", void 0);

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