@aquera/nile-visualization 1.9.0 → 2.1.0

package/dist/src/nile-column-range-chart/nile-column-range-chart.d.ts

@@ -2,6 +2,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import type Highcharts from 'highcharts';
 import NileElement from '../internal/nile-element.js';
 import type { SeparatedChartConfigInputType } from '../internal/types/separated-chart-config-input.type.js';
+import type { LegendConfig } from '../nile-pie-chart/nile-pie-chart.js';
 export interface ColumnRangeSeriesData {
     name: string;
     data: [number, number][];
@@ -33,6 +34,9 @@ export declare class NileColumnRangeChart extends NileElement {
     loadingFontSize: string | number;
     loadingFontFamily: string;
     loadingBg: string;
+    showLegend: boolean;
+    /** Full legend configuration — all Highcharts legend options in one object. */
+    legend: LegendConfig | null;
     private _syncCssVars;
     private applyConfig;
     connectedCallback(): void;

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

@@ -34,6 +34,9 @@ let NileColumnRangeChart = class NileColumnRangeChart extends NileElement {
         this.loadingFontSize = '';
         this.loadingFontFamily = '';
         this.loadingBg = '';
+        this.showLegend = true;
+        /** Full legend configuration — all Highcharts legend options in one object. */
+        this.legend = null;
     }
     _syncCssVars() {
         const set = (prop, val) => {
@@ -93,6 +96,8 @@ let NileColumnRangeChart = class NileColumnRangeChart extends NileElement {
             'height',
             'yAxisTitle',
             'loading',
+            'showLegend',
+            'legend',
         ];
         if (!props.some(p => changedProperties.has(p)))
             return;
@@ -146,6 +151,7 @@ let NileColumnRangeChart = class NileColumnRangeChart extends NileElement {
                 data: s.data,
                 color: s.color,
             })),
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, ...rest }; })(),
             credits: { enabled: false },
         }, this.options);
     }
@@ -234,6 +240,12 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'loading-bg' })
 ], NileColumnRangeChart.prototype, "loadingBg", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-legend' })
+], NileColumnRangeChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileColumnRangeChart.prototype, "legend", void 0);
 NileColumnRangeChart = __decorate([
     customElement('nile-column-range-chart')
 ], NileColumnRangeChart);

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

@@ -29,6 +29,8 @@ export declare class NileDonutChart extends NileElement {
     height: string;
     showDataLabels: boolean;
     showLegend: boolean;
+    /** Full legend configuration — all Highcharts legend options in one object. */
+    legend: import('../nile-pie-chart/nile-pie-chart.js').LegendConfig | null;
     chartBg: string;
     chartBorderRadius: string | number;
     chartBorder: string;

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

@@ -25,6 +25,8 @@ let NileDonutChart = class NileDonutChart extends NileElement {
         this.height = '400px';
         this.showDataLabels = true;
         this.showLegend = true;
+        /** Full legend configuration — all Highcharts legend options in one object. */
+        this.legend = null;
         // ── Container styling ──
         this.chartBg = '';
         this.chartBorderRadius = '';
@@ -185,6 +187,7 @@ let NileDonutChart = class NileDonutChart extends NileElement {
                 },
             },
             series: [{ type: 'pie', name: this.seriesName, data: this.data.map(d => ({ name: d.name, y: d.y, color: d.color, sliced: d.sliced, selected: d.selected })) }],
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, ...rest }; })(),
             credits: { enabled: false },
         }, this.options);
     }
@@ -246,6 +249,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'show-legend' })
 ], NileDonutChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileDonutChart.prototype, "legend", void 0);
 __decorate([
     property({ type: String, attribute: 'chart-bg' })
 ], NileDonutChart.prototype, "chartBg", void 0);

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

@@ -2,6 +2,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import type Highcharts from 'highcharts';
 import NileElement from '../internal/nile-element.js';
 import type { SeparatedChartConfigInputType } from '../internal/types/separated-chart-config-input.type.js';
+import type { LegendConfig } from '../nile-pie-chart/nile-pie-chart.js';
 export interface DumbbellPoint {
     name: string;
     low: number;
@@ -31,6 +32,8 @@ export declare class NileDumbbellChart extends NileElement {
     connectorColor: string;
     showLegend: boolean;
     horizontal: boolean;
+    /** Full legend configuration — all Highcharts legend options in one object. */
+    legend: LegendConfig | null;
     chartBg: string;
     chartBorderRadius: string | number;
     chartBorder: string;

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

@@ -26,6 +26,8 @@ let NileDumbbellChart = class NileDumbbellChart extends NileElement {
         this.connectorColor = '#94a3b8';
         this.showLegend = false;
         this.horizontal = false;
+        /** Full legend configuration — all Highcharts legend options in one object. */
+        this.legend = null;
         // ── Container styling ──
         this.chartBg = '';
         this.chartBorderRadius = '';
@@ -135,7 +137,7 @@ let NileDumbbellChart = class NileDumbbellChart extends NileElement {
             },
             title: { text: this.chartTitle || undefined },
             subtitle: { text: this.chartSubtitle || undefined },
-            legend: { enabled: this.showLegend },
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, ...rest }; })(),
             xAxis: { type: 'category' },
             yAxis: { title: { text: this.yAxisTitle || undefined } },
             tooltip: {
@@ -249,6 +251,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'horizontal' })
 ], NileDumbbellChart.prototype, "horizontal", void 0);
+__decorate([
+    property({ type: Object })
+], NileDumbbellChart.prototype, "legend", void 0);
 __decorate([
     property({ type: String, attribute: 'chart-bg' })
 ], NileDumbbellChart.prototype, "chartBg", void 0);

package/dist/src/nile-dumbbell-lower-chart/nile-dumbbell-lower-chart.d.ts

@@ -3,6 +3,7 @@ import type Highcharts from 'highcharts';
 import NileElement from '../internal/nile-element.js';
 import type { SeparatedChartConfigInputType } from '../internal/types/separated-chart-config-input.type.js';
 import type { DumbbellPoint } from '../nile-dumbbell-chart/nile-dumbbell-chart.js';
+import type { LegendConfig } from '../nile-pie-chart/nile-pie-chart.js';
 export declare class NileDumbbellLowerChart extends NileElement {
     static styles: CSSResultGroup;
     private _hc;
@@ -22,6 +23,8 @@ export declare class NileDumbbellLowerChart extends NileElement {
     connectorColor: string;
     showLegend: boolean;
     horizontal: boolean;
+    /** Full legend configuration — all Highcharts legend options in one object. */
+    legend: LegendConfig | null;
     chartBg: string;
     chartBorderRadius: string | number;
     chartBorder: string;

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

@@ -25,6 +25,8 @@ let NileDumbbellLowerChart = class NileDumbbellLowerChart extends NileElement {
         this.connectorColor = '#94a3b8';
         this.showLegend = false;
         this.horizontal = false;
+        /** Full legend configuration — all Highcharts legend options in one object. */
+        this.legend = null;
         // ── Container styling ──
         this.chartBg = '';
         this.chartBorderRadius = '';
@@ -131,7 +133,7 @@ let NileDumbbellLowerChart = class NileDumbbellLowerChart extends NileElement {
             },
             title: { text: this.chartTitle || undefined },
             subtitle: { text: this.chartSubtitle || undefined },
-            legend: { enabled: this.showLegend },
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, ...rest }; })(),
             xAxis: { type: 'category' },
             yAxis: { title: { text: this.yAxisTitle || undefined } },
             tooltip: {
@@ -246,6 +248,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'horizontal' })
 ], NileDumbbellLowerChart.prototype, "horizontal", void 0);
+__decorate([
+    property({ type: Object })
+], NileDumbbellLowerChart.prototype, "legend", void 0);
 __decorate([
     property({ type: String, attribute: 'chart-bg' })
 ], NileDumbbellLowerChart.prototype, "chartBg", void 0);

package/dist/src/nile-dumbbell-upper-chart/nile-dumbbell-upper-chart.d.ts

@@ -3,6 +3,7 @@ import type Highcharts from 'highcharts';
 import NileElement from '../internal/nile-element.js';
 import type { SeparatedChartConfigInputType } from '../internal/types/separated-chart-config-input.type.js';
 import type { DumbbellPoint } from '../nile-dumbbell-chart/nile-dumbbell-chart.js';
+import type { LegendConfig } from '../nile-pie-chart/nile-pie-chart.js';
 export declare class NileDumbbellUpperChart extends NileElement {
     static styles: CSSResultGroup;
     private _hc;
@@ -22,6 +23,8 @@ export declare class NileDumbbellUpperChart extends NileElement {
     connectorColor: string;
     showLegend: boolean;
     horizontal: boolean;
+    /** Full legend configuration — all Highcharts legend options in one object. */
+    legend: LegendConfig | null;
     chartBg: string;
     chartBorderRadius: string | number;
     chartBorder: string;

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

@@ -25,6 +25,8 @@ let NileDumbbellUpperChart = class NileDumbbellUpperChart extends NileElement {
         this.connectorColor = '#94a3b8';
         this.showLegend = false;
         this.horizontal = false;
+        /** Full legend configuration — all Highcharts legend options in one object. */
+        this.legend = null;
         // ── Container styling ──
         this.chartBg = '';
         this.chartBorderRadius = '';
@@ -131,7 +133,7 @@ let NileDumbbellUpperChart = class NileDumbbellUpperChart extends NileElement {
             },
             title: { text: this.chartTitle || undefined },
             subtitle: { text: this.chartSubtitle || undefined },
-            legend: { enabled: this.showLegend },
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, ...rest }; })(),
             xAxis: { type: 'category' },
             yAxis: { title: { text: this.yAxisTitle || undefined } },
             tooltip: {
@@ -246,6 +248,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'horizontal' })
 ], NileDumbbellUpperChart.prototype, "horizontal", void 0);
+__decorate([
+    property({ type: Object })
+], NileDumbbellUpperChart.prototype, "legend", void 0);
 __decorate([
     property({ type: String, attribute: 'chart-bg' })
 ], NileDumbbellUpperChart.prototype, "chartBg", void 0);

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

@@ -2,6 +2,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import type Highcharts from 'highcharts';
 import NileElement from '../internal/nile-element.js';
 import type { SeparatedChartConfigInputType } from '../internal/types/separated-chart-config-input.type.js';
+import type { LegendConfig } from '../nile-pie-chart/nile-pie-chart.js';
 export interface EulerVennDataPoint {
     sets: string[];
     value: number;
@@ -31,6 +32,9 @@ export declare class NileEulerChart extends NileElement {
     loadingFontSize: string | number;
     loadingFontFamily: string;
     loadingBg: string;
+    showLegend: boolean;
+    /** Full legend configuration — all Highcharts legend options in one object. */
+    legend: LegendConfig | null;
     private _syncCssVars;
     private applyConfig;
     connectedCallback(): void;

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

@@ -32,6 +32,9 @@ let NileEulerChart = class NileEulerChart extends NileElement {
         this.loadingFontSize = '';
         this.loadingFontFamily = '';
         this.loadingBg = '';
+        this.showLegend = true;
+        /** Full legend configuration — all Highcharts legend options in one object. */
+        this.legend = null;
     }
     _syncCssVars() {
         const set = (prop, val) => {
@@ -78,7 +81,9 @@ let NileEulerChart = class NileEulerChart extends NileElement {
             this.applyConfig(this.config);
             return;
         }
-        const props = ['data', 'chartTitle', 'chartSubtitle', 'options', 'height', 'loading'];
+        const props = ['data', 'chartTitle', 'chartSubtitle', 'options', 'height', 'loading',
+            'showLegend',
+            'legend'];
         const cssVarProps = ['chartBg', 'chartBorderRadius', 'chartBorder', 'chartShadow', 'chartPadding', 'chartMinHeight',
             'loadingText', 'loadingColor', 'loadingFontSize', 'loadingFontFamily', 'loadingBg'];
         if (cssVarProps.some(p => changedProperties.has(p)))
@@ -132,6 +137,7 @@ let NileEulerChart = class NileEulerChart extends NileElement {
                     data: this.data,
                 },
             ],
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, ...rest }; })(),
             credits: { enabled: false },
         }, this.options);
     }
@@ -214,6 +220,12 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'loading-bg' })
 ], NileEulerChart.prototype, "loadingBg", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-legend' })
+], NileEulerChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileEulerChart.prototype, "legend", void 0);
 NileEulerChart = __decorate([
     customElement('nile-euler-chart')
 ], NileEulerChart);

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

@@ -2,6 +2,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import type Highcharts from 'highcharts';
 import NileElement from '../internal/nile-element.js';
 import type { SeparatedChartConfigInputType } from '../internal/types/separated-chart-config-input.type.js';
+import type { LegendConfig } from '../nile-pie-chart/nile-pie-chart.js';
 /** Central path (history + median / point forecast). */
 export interface FanLinePoint {
     category: string;
@@ -40,6 +41,8 @@ export declare class NileFanChart extends NileElement {
     lineSeriesName: string;
     lineColor: string;
     showLegend: boolean;
+    /** Full legend configuration — all Highcharts legend options in one object. */
+    legend: LegendConfig | null;
     /**
      * Index (0-based) of the first **forecast** category on the x-axis.
      * When ≥ 0, draws a dashed separator and optional plot band.

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

@@ -26,6 +26,8 @@ let NileFanChart = class NileFanChart extends NileElement {
         this.lineSeriesName = '';
         this.lineColor = '#1d4ed8';
         this.showLegend = false;
+        /** Full legend configuration — all Highcharts legend options in one object. */
+        this.legend = null;
         /**
          * Index (0-based) of the first **forecast** category on the x-axis.
          * When ≥ 0, draws a dashed separator and optional plot band.
@@ -179,7 +181,7 @@ let NileFanChart = class NileFanChart extends NileElement {
             },
             title: { text: this.chartTitle || undefined },
             subtitle: { text: this.chartSubtitle || undefined },
-            legend: { enabled: this.showLegend },
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, ...rest }; })(),
             tooltip: { shared: true, crosshairs: true },
             xAxis: xAxisExtra,
             yAxis: {
@@ -283,6 +285,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'show-legend' })
 ], NileFanChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileFanChart.prototype, "legend", void 0);
 __decorate([
     property({ type: Number, attribute: 'forecast-start-index' })
 ], NileFanChart.prototype, "forecastStartIndex", void 0);

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

@@ -2,6 +2,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import type Highcharts from 'highcharts';
 import NileElement from '../internal/nile-element.js';
 import type { SeparatedChartConfigInputType } from '../internal/types/separated-chart-config-input.type.js';
+import type { LegendConfig } from '../nile-pie-chart/nile-pie-chart.js';
 /** Segment row for the flame / icicle layout (`columnrange`-based). */
 export interface FlameChartPoint {
     name: string;
@@ -50,6 +51,9 @@ export declare class NileFlameChart extends NileElement {
     loadingFontSize: string | number;
     loadingFontFamily: string;
     loadingBg: string;
+    showLegend: boolean;
+    /** Full legend configuration — all Highcharts legend options in one object. */
+    legend: LegendConfig | null;
     private _syncCssVars;
     /** Apply `{ chart, aq }` config to individual properties. */
     private applyConfig;

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

@@ -59,6 +59,9 @@ let NileFlameChart = class NileFlameChart extends NileElement {
         this.loadingFontSize = '';
         this.loadingFontFamily = '';
         this.loadingBg = '';
+        this.showLegend = false;
+        /** Full legend configuration — all Highcharts legend options in one object. */
+        this.legend = null;
     }
     _syncCssVars() {
         const set = (prop, val) => {
@@ -115,6 +118,8 @@ let NileFlameChart = class NileFlameChart extends NileElement {
             'options',
             'height',
             'loading',
+            'showLegend',
+            'legend',
         ];
         const cssVarProps = ['chartBg', 'chartBorderRadius', 'chartBorder', 'chartShadow', 'chartPadding', 'chartMinHeight',
             'loadingText', 'loadingColor', 'loadingFontSize', 'loadingFontFamily', 'loadingBg'];
@@ -189,7 +194,7 @@ let NileFlameChart = class NileFlameChart extends NileElement {
             chart: { inverted: !isSunburst, ...(this.height ? { height: this.height } : {}) },
             title: { text: titleText, align: 'left' },
             subtitle: { text: this.chartSubtitle || undefined, align: 'left' },
-            legend: { enabled: false },
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, ...rest }; })(),
             xAxis: [{ visible: false }, xAxisSecond],
             yAxis: [
                 { visible: false },
@@ -376,6 +381,12 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'loading-bg' })
 ], NileFlameChart.prototype, "loadingBg", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-legend' })
+], NileFlameChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileFlameChart.prototype, "legend", void 0);
 NileFlameChart = __decorate([
     customElement('nile-flame-chart')
 ], NileFlameChart);

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

@@ -2,6 +2,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import type Highcharts from 'highcharts';
 import NileElement from '../internal/nile-element.js';
 import type { SeparatedChartConfigInputType } from '../internal/types/separated-chart-config-input.type.js';
+import type { LegendConfig } from '../nile-pie-chart/nile-pie-chart.js';
 export interface FunnelDataPoint {
     name: string;
     y: number;
@@ -34,6 +35,9 @@ export declare class NileFunnelChart extends NileElement {
     loadingFontSize: string | number;
     loadingFontFamily: string;
     loadingBg: string;
+    showLegend: boolean;
+    /** Full legend configuration — all Highcharts legend options in one object. */
+    legend: LegendConfig | null;
     private _syncCssVars;
     /** Apply `{ chart, aq }` config to individual properties. */
     private applyConfig;

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

@@ -35,6 +35,9 @@ let NileFunnelChart = class NileFunnelChart extends NileElement {
         this.loadingFontSize = '';
         this.loadingFontFamily = '';
         this.loadingBg = '';
+        this.showLegend = false;
+        /** Full legend configuration — all Highcharts legend options in one object. */
+        this.legend = null;
     }
     _syncCssVars() {
         const set = (prop, val) => {
@@ -91,6 +94,8 @@ let NileFunnelChart = class NileFunnelChart extends NileElement {
             'seriesName',
             'showDataLabels',
             'loading',
+            'showLegend',
+            'legend',
         ];
         const cssVarProps = ['chartBg', 'chartBorderRadius', 'chartBorder', 'chartShadow', 'chartPadding', 'chartMinHeight',
             'loadingText', 'loadingColor', 'loadingFontSize', 'loadingFontFamily', 'loadingBg'];
@@ -165,7 +170,7 @@ let NileFunnelChart = class NileFunnelChart extends NileElement {
                     })),
                 },
             ],
-            legend: { enabled: false },
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, ...rest }; })(),
             credits: { enabled: false },
         }, this.options);
     }
@@ -254,6 +259,12 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'loading-bg' })
 ], NileFunnelChart.prototype, "loadingBg", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-legend' })
+], NileFunnelChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileFunnelChart.prototype, "legend", void 0);
 NileFunnelChart = __decorate([
     customElement('nile-funnel-chart')
 ], NileFunnelChart);

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

@@ -2,6 +2,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import type Highcharts from 'highcharts';
 import NileElement from '../internal/nile-element.js';
 import type { NileChartConfigInputType } from '../internal/types/index.js';
+import type { LegendConfig } from '../nile-pie-chart/nile-pie-chart.js';
 export interface GaugeBand {
     from: number;
     to: number;
@@ -36,6 +37,9 @@ export declare class NileGaugeChart extends NileElement {
     loadingFontSize: string | number;
     loadingFontFamily: string;
     loadingBg: string;
+    showLegend: boolean;
+    /** Full legend configuration — all Highcharts legend options in one object. */
+    legend: LegendConfig | null;
     private _syncCssVars;
     /** Apply { chart, aq } config to individual properties. */
     private applyConfig;

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

@@ -36,6 +36,9 @@ let NileGaugeChart = class NileGaugeChart extends NileElement {
         this.loadingFontSize = '';
         this.loadingFontFamily = '';
         this.loadingBg = '';
+        this.showLegend = false;
+        /** Full legend configuration — all Highcharts legend options in one object. */
+        this.legend = null;
     }
     _syncCssVars() {
         const set = (prop, val) => {
@@ -126,7 +129,9 @@ let NileGaugeChart = class NileGaugeChart extends NileElement {
             this.applyConfig(this.config);
             return;
         }
-        const props = ['value', 'min', 'max', 'suffix', 'bands', 'chartTitle', 'chartSubtitle', 'options', 'height', 'loading'];
+        const props = ['value', 'min', 'max', 'suffix', 'bands', 'chartTitle', 'chartSubtitle', 'options', 'height', 'loading',
+            'showLegend',
+            'legend'];
         const cssVarProps = ['chartBg', 'chartBorderRadius', 'chartBorder', 'chartShadow', 'chartPadding', 'chartMinHeight',
             'loadingText', 'loadingColor', 'loadingFontSize', 'loadingFontFamily', 'loadingBg'];
         if (cssVarProps.some(p => changedProperties.has(p)))
@@ -187,6 +192,7 @@ let NileGaugeChart = class NileGaugeChart extends NileElement {
                         style: { fontSize: '20px' },
                     },
                 }],
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, ...rest }; })(),
             credits: { enabled: false },
         }, this.options);
     }
@@ -278,6 +284,12 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'loading-bg' })
 ], NileGaugeChart.prototype, "loadingBg", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-legend' })
+], NileGaugeChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileGaugeChart.prototype, "legend", void 0);
 NileGaugeChart = __decorate([
     customElement('nile-gauge-chart')
 ], NileGaugeChart);

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

@@ -31,6 +31,8 @@ export declare class NileHeatmapChart extends NileElement {
     height: string;
     showDataLabels: boolean;
     showLegend: boolean;
+    /** Full legend configuration — all Highcharts legend options in one object. */
+    legend: import('../nile-pie-chart/nile-pie-chart.js').LegendConfig | null;
     chartBg: string;
     chartBorderRadius: string | number;
     chartBorder: string;

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

@@ -29,6 +29,8 @@ let NileHeatmapChart = class NileHeatmapChart extends NileElement {
         this.height = '400px';
         this.showDataLabels = true;
         this.showLegend = true;
+        /** Full legend configuration — all Highcharts legend options in one object. */
+        this.legend = null;
         // ── Container styling ──
         this.chartBg = '';
         this.chartBorderRadius = '';
@@ -169,7 +171,7 @@ let NileHeatmapChart = class NileHeatmapChart extends NileElement {
                 maxColor: this.maxColor,
                 title: { text: this.colorAxisTitle || undefined },
             },
-            legend: { enabled: this.showLegend, align: 'right', layout: 'vertical', verticalAlign: 'top' },
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, align: 'right', layout: 'vertical', verticalAlign: 'top', ...rest }; })(),
             tooltip: {
                 formatter() {
                     const p = this.point;
@@ -296,6 +298,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'show-legend' })
 ], NileHeatmapChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileHeatmapChart.prototype, "legend", void 0);
 __decorate([
     property({ type: String, attribute: 'chart-bg' })
 ], NileHeatmapChart.prototype, "chartBg", void 0);

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

@@ -33,6 +33,8 @@ export declare class NileHistogramChart extends NileElement {
     /** Fixed bin width; when > 0, overrides `binsNumber`. */
     binWidth: number;
     showLegend: boolean;
+    /** Full legend configuration — all Highcharts legend options in one object. */
+    legend: import('../nile-pie-chart/nile-pie-chart.js').LegendConfig | null;
     chartBg: string;
     chartBorderRadius: string | number;
     chartBorder: string;

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

@@ -37,6 +37,8 @@ let NileHistogramChart = class NileHistogramChart extends NileElement {
         /** Fixed bin width; when > 0, overrides `binsNumber`. */
         this.binWidth = 0;
         this.showLegend = true;
+        /** Full legend configuration — all Highcharts legend options in one object. */
+        this.legend = null;
         // ── Container styling ──
         this.chartBg = '';
         this.chartBorderRadius = '';
@@ -158,7 +160,7 @@ let NileHistogramChart = class NileHistogramChart extends NileElement {
             chart: { ...(this.height ? { height: this.height } : {}) },
             title: { text: this.chartTitle || undefined },
             subtitle: { text: this.chartSubtitle || undefined },
-            legend: { enabled: this.showLegend },
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, ...rest }; })(),
             xAxis: [
                 {
                     title: { text: this.xAxisTitle || undefined },
@@ -297,6 +299,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'show-legend' })
 ], NileHistogramChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileHistogramChart.prototype, "legend", void 0);
 __decorate([
     property({ type: String, attribute: 'chart-bg' })
 ], NileHistogramChart.prototype, "chartBg", void 0);

package/dist/src/nile-inverted-area-chart/nile-inverted-area-chart.d.ts

@@ -2,6 +2,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import type Highcharts from 'highcharts';
 import NileElement from '../internal/nile-element.js';
 import type { SeparatedChartConfigInputType } from '../internal/types/index.js';
+import type { LegendConfig } from '../nile-pie-chart/nile-pie-chart.js';
 export interface InvertedAreaChartSeriesData {
     name: string;
     data: number[];
@@ -34,6 +35,9 @@ export declare class NileInvertedAreaChart extends NileElement {
     loadingFontSize: string | number;
     loadingFontFamily: string;
     loadingBg: string;
+    showLegend: boolean;
+    /** Full legend configuration — all Highcharts legend options in one object. */
+    legend: LegendConfig | null;
     private _syncCssVars;
     connectedCallback(): void;
     disconnectedCallback(): void;