@aquera/nile-visualization 1.9.0 → 2.1.0

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

@@ -162,9 +162,19 @@ let NileChart = class NileChart extends NileElement {
         /** True when elements are projected into `header-actions` (used to show the header row). */
         this.hasHeaderActionsSlot = false;
         this.handleOutsideClick = (e) => {
-            if (!e.composedPath().includes(this)) {
+            const path = e.composedPath();
+            if (!path.includes(this)) {
                 this.menuOpen = false;
                 this.chatOpen = false;
+                return;
+            }
+            if (this.chatOpen) {
+                const root = this.renderRoot;
+                const panel = root.querySelector('.nile-ai-panel-overlay');
+                const trigger = root.querySelector('.nile-ai-trigger');
+                if (!path.some((n) => n === panel || n === trigger)) {
+                    this.chatOpen = false;
+                }
             }
         };
         this.handleChartReady = (e) => {
@@ -447,6 +457,7 @@ let NileChart = class NileChart extends NileElement {
         aria-label="Ask AI about this chart"
         aria-expanded=${this.chatOpen ? 'true' : 'false'}
         @click=${this.toggleChat}
+        part="ai-trigger"
       >
         <nile-glyph name="smart-code" size="16"></nile-glyph>
       </button>
@@ -516,7 +527,14 @@ let NileChart = class NileChart extends NileElement {
         const config = this.activeConfig;
         // Suppress inner Highcharts title/subtitle — the card header shows them
         const noTitle = { title: { text: undefined }, subtitle: { text: undefined } };
-        const mergedOptions = deepMerge(deepMerge(config.options ?? {}, noTitle), this.buildExportingOptions());
+        // Translate config.legend → Highcharts legend options and merge early so every
+        // chart type receives the full legend config (layout, align, navigation, etc.) via .options.
+        const legendOptions = {};
+        if (config.legend) {
+            const { show, ...rest } = config.legend;
+            legendOptions.legend = { enabled: show ?? true, ...rest };
+        }
+        const mergedOptions = deepMerge(deepMerge(deepMerge(config.options ?? {}, legendOptions), noTitle), this.buildExportingOptions());
         switch (config.type) {
             case 'bar':
                 return html `<nile-bar-chart
@@ -524,7 +542,7 @@ let NileChart = class NileChart extends NileElement {
           .categories=${config.categories ?? []}
           .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
-          .showLegend=${config.showLegend ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -545,7 +563,7 @@ let NileChart = class NileChart extends NileElement {
           .seriesName=${config.seriesName ?? ''}
           .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .showDataLabels=${config.showDataLabels ?? true}
-          .showLegend=${config.showLegend ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -567,6 +585,8 @@ let NileChart = class NileChart extends NileElement {
           .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .forecast=${config.forecast ?? null}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -588,6 +608,8 @@ let NileChart = class NileChart extends NileElement {
           .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .anomaly=${config.anomaly ?? {}}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -608,7 +630,8 @@ let NileChart = class NileChart extends NileElement {
           .categories=${config.categories ?? []}
           .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
-          .showLegend=${config.showLegend ?? true}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -630,7 +653,8 @@ let NileChart = class NileChart extends NileElement {
           .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .stacked=${config.stacked ?? false}
-          .showLegend=${config.showLegend ?? true}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -651,7 +675,8 @@ let NileChart = class NileChart extends NileElement {
           .categories=${config.categories ?? []}
           .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
-          .showLegend=${config.showLegend ?? true}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -674,7 +699,8 @@ let NileChart = class NileChart extends NileElement {
           .innerSize=${config.innerSize ?? '50%'}
           .semiCircle=${config.semiCircle ?? false}
           .showDataLabels=${config.showDataLabels ?? true}
-          .showLegend=${config.showLegend ?? true}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -695,7 +721,8 @@ let NileChart = class NileChart extends NileElement {
           .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .xAxisTitle=${config.xAxisTitle ?? ''}
           .yAxisTitle=${config.yAxisTitle ?? ''}
-          .showLegend=${config.showLegend ?? true}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -716,7 +743,8 @@ let NileChart = class NileChart extends NileElement {
           .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .xAxisTitle=${config.xAxisTitle ?? ''}
           .yAxisTitle=${config.yAxisTitle ?? ''}
-          .showLegend=${config.showLegend ?? true}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -737,7 +765,8 @@ let NileChart = class NileChart extends NileElement {
           .categories=${config.categories ?? []}
           .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
-          .showLegend=${config.showLegend ?? true}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -758,7 +787,8 @@ let NileChart = class NileChart extends NileElement {
           .categories=${config.categories ?? []}
           .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .showArea=${config.showArea ?? false}
-          .showLegend=${config.showLegend ?? true}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -781,6 +811,8 @@ let NileChart = class NileChart extends NileElement {
           .suffix=${config.suffix ?? ''}
           .bands=${config.bands ?? []}
           .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
+          .showLegend=${config.legend?.show ?? false}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -800,7 +832,8 @@ let NileChart = class NileChart extends NileElement {
           .data=${config.data}
           .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
-          .showLegend=${config.showLegend ?? true}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -823,6 +856,8 @@ let NileChart = class NileChart extends NileElement {
           .seriesType=${config.seriesType ?? 'map'}
           .zoom=${config.zoom ?? true}
           .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -844,7 +879,8 @@ let NileChart = class NileChart extends NileElement {
           .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .stackMode=${config.stackMode ?? 'normal'}
-          .showLegend=${config.showLegend ?? true}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .pointPadding=${config.pointPadding ?? 0.05}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
@@ -866,7 +902,8 @@ let NileChart = class NileChart extends NileElement {
           .categories=${config.categories ?? []}
           .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
-          .showLegend=${config.showLegend ?? true}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .groupPadding=${config.groupPadding ?? 0.15}
           .pointPadding=${config.pointPadding ?? 0.05}
           .options=${mergedOptions}
@@ -894,7 +931,8 @@ let NileChart = class NileChart extends NileElement {
           .histogramColor=${config.histogramColor ?? '#3b82f6'}
           .binsNumber=${String(config.binsNumber ?? 'square-root')}
           .binWidth=${config.binWidth ?? 0}
-          .showLegend=${config.showLegend ?? true}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -921,7 +959,8 @@ let NileChart = class NileChart extends NileElement {
           .bellcurveFill=${config.bellcurveFill ?? 'rgba(99, 102, 241, 0.2)'}
           .intervals=${config.intervals ?? 3}
           .pointsInInterval=${config.pointsInInterval ?? 40}
-          .showLegend=${config.showLegend ?? true}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -944,7 +983,8 @@ let NileChart = class NileChart extends NileElement {
           .xAxisTitle=${config.xAxisTitle ?? ''}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .horizontal=${config.horizontal ?? false}
-          .showLegend=${config.showLegend ?? true}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -967,7 +1007,8 @@ let NileChart = class NileChart extends NileElement {
           .datetimeAxis=${config.datetimeAxis ?? false}
           .inverted=${config.inverted ?? false}
           .alternateLabels=${config.alternateLabels ?? false}
-          .showLegend=${config.showLegend ?? true}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -991,7 +1032,8 @@ let NileChart = class NileChart extends NileElement {
           .lowMarkerColor=${config.lowMarkerColor ?? ''}
           .connectorColor=${config.connectorColor ?? ''}
           .horizontal=${config.horizontal ?? false}
-          .showLegend=${config.showLegend ?? true}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -1015,7 +1057,8 @@ let NileChart = class NileChart extends NileElement {
           .lowMarkerColor=${config.lowMarkerColor ?? ''}
           .connectorColor=${config.connectorColor ?? ''}
           .horizontal=${config.horizontal ?? false}
-          .showLegend=${config.showLegend ?? true}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -1039,7 +1082,8 @@ let NileChart = class NileChart extends NileElement {
           .lowMarkerColor=${config.lowMarkerColor ?? ''}
           .connectorColor=${config.connectorColor ?? ''}
           .horizontal=${config.horizontal ?? false}
-          .showLegend=${config.showLegend ?? true}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -1064,7 +1108,8 @@ let NileChart = class NileChart extends NileElement {
           .lineColor=${config.lineColor ?? '#1d4ed8'}
           .forecastStartIndex=${config.forecastStartIndex ?? -1}
           .forecastBandLabel=${config.forecastBandLabel ?? ''}
-          .showLegend=${config.showLegend ?? false}
+          .showLegend=${config.legend?.show ?? false}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -1085,6 +1130,8 @@ let NileChart = class NileChart extends NileElement {
           .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .seriesName=${config.seriesName ?? ''}
           .showDataLabels=${config.showDataLabels ?? true}
+          .showLegend=${config.legend?.show ?? false}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -1106,6 +1153,8 @@ let NileChart = class NileChart extends NileElement {
           .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .seriesName=${config.seriesName ?? ''}
           .inverted=${config.inverted ?? true}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -1128,6 +1177,8 @@ let NileChart = class NileChart extends NileElement {
           .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .columnAxisTitle=${config.columnAxisTitle ?? ''}
           .lineAxisTitle=${config.lineAxisTitle ?? ''}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -1155,7 +1206,8 @@ let NileChart = class NileChart extends NileElement {
           .maxColor=${config.maxColor ?? '#1e40af'}
           .colorAxisTitle=${config.colorAxisTitle ?? ''}
           .showDataLabels=${config.showDataLabels ?? true}
-          .showLegend=${config.showLegend ?? true}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -1176,6 +1228,8 @@ let NileChart = class NileChart extends NileElement {
           .data=${config.data ?? []}
           .sunburstData=${config.sunburstData ?? []}
           .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
+          .showLegend=${config.legend?.show ?? false}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -1196,7 +1250,8 @@ let NileChart = class NileChart extends NileElement {
           .categories=${config.categories ?? []}
           .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .showArea=${config.showArea ?? false}
-          .showLegend=${config.showLegend ?? true}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -1218,6 +1273,8 @@ let NileChart = class NileChart extends NileElement {
           .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .stacked=${config.stacked ?? false}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -1237,6 +1294,8 @@ let NileChart = class NileChart extends NileElement {
           .data=${config.data}
           .categories=${config.categories ?? []}
           .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -1256,6 +1315,8 @@ let NileChart = class NileChart extends NileElement {
           .data=${config.data}
           .categories=${config.categories ?? []}
           .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -1277,6 +1338,8 @@ let NileChart = class NileChart extends NileElement {
           .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .stacked=${config.stacked ?? false}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -1298,6 +1361,8 @@ let NileChart = class NileChart extends NileElement {
           .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .threshold=${config.threshold ?? 0}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -1318,6 +1383,8 @@ let NileChart = class NileChart extends NileElement {
           .categories=${config.categories ?? []}
           .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -1338,6 +1405,8 @@ let NileChart = class NileChart extends NileElement {
           .categories=${config.categories ?? []}
           .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .yAxisTitle=${config.yAxisTitle ?? ''}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -1359,6 +1428,8 @@ let NileChart = class NileChart extends NileElement {
           .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .seriesName=${config.seriesName ?? ''}
           .yAxisTitle=${config.yAxisTitle ?? ''}
+          .showLegend=${config.legend?.show ?? false}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -1381,7 +1452,8 @@ let NileChart = class NileChart extends NileElement {
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .innerSize=${config.innerSize ?? '28%'}
           .paneSize=${config.paneSize ?? '82%'}
-          .showLegend=${config.showLegend ?? true}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -1402,7 +1474,8 @@ let NileChart = class NileChart extends NileElement {
           .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .seriesName=${config.seriesName ?? ''}
           .showDataLabels=${config.showDataLabels ?? true}
-          .showLegend=${config.showLegend ?? true}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -1421,6 +1494,8 @@ let NileChart = class NileChart extends NileElement {
                 return html `<nile-euler-chart
           .data=${config.data}
           .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -1441,6 +1516,8 @@ let NileChart = class NileChart extends NileElement {
           .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .xAxisTitle=${config.xAxisTitle ?? ''}
           .yAxisTitle=${config.yAxisTitle ?? ''}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -1462,6 +1539,8 @@ let NileChart = class NileChart extends NileElement {
           .seriesName=${config.seriesName ?? ''}
           .xAxisTitle=${config.xAxisTitle ?? ''}
           .yAxisTitle=${config.yAxisTitle ?? ''}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -1483,7 +1562,8 @@ let NileChart = class NileChart extends NileElement {
           .height=${this.hasAttribute('fit') ? null : (config.height ?? '100%')}
           .seriesName=${config.seriesName ?? ''}
           .datetimeAxis=${config.datetimeAxis ?? false}
-          .showLegend=${config.showLegend ?? true}
+          .showLegend=${config.legend?.show ?? true}
+          .legend=${config.legend ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
           .chartBg=${config.chartBg ?? ''}
@@ -1565,6 +1645,8 @@ let NileChart = class NileChart extends NileElement {
                         valueFormat: k.valueFormat,
                         precision: k.precision,
                         unit: k.unit,
+                        locale: k.locale,
+                        numberSystem: k.numberSystem,
                     },
                     aq: {
                         chartSubtitle: k.chartSubtitle,

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

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

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

@@ -23,6 +23,8 @@ let NileClusterChart = class NileClusterChart extends NileElement {
         this.height = '400px';
         this.yAxisTitle = '';
         this.showLegend = true;
+        /** Full legend configuration — all Highcharts legend options in one object. */
+        this.legend = null;
         this.groupPadding = 0.14;
         this.pointPadding = 0.08;
         // ── Container styling ──
@@ -131,7 +133,7 @@ let NileClusterChart = class NileClusterChart extends NileElement {
             subtitle: { text: this.chartSubtitle || undefined },
             xAxis: { categories: this.categories },
             yAxis: { min: 0, title: { text: this.yAxisTitle || undefined } },
-            legend: { enabled: this.showLegend },
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, ...rest }; })(),
             tooltip: { shared: true },
             plotOptions: {
                 column: {
@@ -222,6 +224,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'show-legend' })
 ], NileClusterChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileClusterChart.prototype, "legend", void 0);
 __decorate([
     property({ type: Number, attribute: 'group-padding' })
 ], NileClusterChart.prototype, "groupPadding", void 0);

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

@@ -24,6 +24,8 @@ export declare class NileColumnChart extends NileElement {
     height: string;
     yAxisTitle: string;
     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-column-chart/nile-column-chart.js

@@ -22,6 +22,8 @@ let NileColumnChart = class NileColumnChart extends NileElement {
         this.height = '400px';
         this.yAxisTitle = '';
         this.showLegend = true;
+        /** Full legend configuration — all Highcharts legend options in one object. */
+        this.legend = null;
         // ── Container styling ──
         this.chartBg = '';
         this.chartBorderRadius = '';
@@ -165,7 +167,7 @@ let NileColumnChart = class NileColumnChart extends NileElement {
                 series: { cursor: 'pointer', point: { events: { click() { self.emit('nile-chart-click', { point: this, category: this.category, value: this.y, seriesName: this.series.name }); } } } },
             },
             series: this.data.map(s => ({ type: 'column', name: s.name, data: s.data, color: s.color })),
-            legend: { enabled: this.showLegend },
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, ...rest }; })(),
             credits: { enabled: false },
         }, this.options);
     }
@@ -221,6 +223,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'show-legend' })
 ], NileColumnChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileColumnChart.prototype, "legend", void 0);
 __decorate([
     property({ type: String, attribute: 'chart-bg' })
 ], NileColumnChart.prototype, "chartBg", void 0);

package/dist/src/nile-column-drilldown-chart/nile-column-drilldown-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 ColumnDrilldownParentPoint {
     name: string;
     y: number;
@@ -42,6 +43,9 @@ export declare class NileColumnDrilldownChart 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-drilldown-chart/nile-column-drilldown-chart.js

@@ -35,6 +35,9 @@ let NileColumnDrilldownChart = class NileColumnDrilldownChart extends NileElemen
         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) => {
@@ -95,6 +98,8 @@ let NileColumnDrilldownChart = class NileColumnDrilldownChart extends NileElemen
             'height',
             'yAxisTitle',
             'loading',
+            'showLegend',
+            'legend',
         ];
         if (!props.some(p => changedProperties.has(p)))
             return;
@@ -131,7 +136,7 @@ let NileColumnDrilldownChart = class NileColumnDrilldownChart extends NileElemen
             subtitle: { text: this.chartSubtitle || undefined },
             xAxis: { type: 'category' },
             yAxis: { title: { text: this.yAxisTitle || undefined }, allowDecimals: false },
-            legend: { enabled: false },
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, ...rest }; })(),
             plotOptions: {
                 series: {
                     cursor: 'pointer',
@@ -251,6 +256,12 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'loading-bg' })
 ], NileColumnDrilldownChart.prototype, "loadingBg", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-legend' })
+], NileColumnDrilldownChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileColumnDrilldownChart.prototype, "legend", void 0);
 NileColumnDrilldownChart = __decorate([
     customElement('nile-column-drilldown-chart')
 ], NileColumnDrilldownChart);

package/dist/src/nile-column-pyramid-chart/nile-column-pyramid-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 ColumnPyramidSeriesData {
     name: string;
     data: number[];
@@ -32,6 +33,9 @@ export declare class NileColumnPyramidChart 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-pyramid-chart/nile-column-pyramid-chart.js

@@ -33,6 +33,9 @@ let NileColumnPyramidChart = class NileColumnPyramidChart 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) => {
@@ -83,7 +86,9 @@ let NileColumnPyramidChart = class NileColumnPyramidChart extends NileElement {
             'loadingText', 'loadingColor', 'loadingFontSize', 'loadingFontFamily', 'loadingBg'];
         if (cssVarProps.some(p => changedProperties.has(p)))
             this._syncCssVars();
-        const props = ['data', 'categories', 'chartTitle', 'chartSubtitle', 'options', 'height', 'loading'];
+        const props = ['data', 'categories', 'chartTitle', 'chartSubtitle', 'options', 'height', 'loading',
+            'showLegend',
+            'legend'];
         if (!props.some(p => changedProperties.has(p)))
             return;
         if (this.loading) {
@@ -135,6 +140,7 @@ let NileColumnPyramidChart = class NileColumnPyramidChart 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);
     }
@@ -220,6 +226,12 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'loading-bg' })
 ], NileColumnPyramidChart.prototype, "loadingBg", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-legend' })
+], NileColumnPyramidChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileColumnPyramidChart.prototype, "legend", void 0);
 NileColumnPyramidChart = __decorate([
     customElement('nile-column-pyramid-chart')
 ], NileColumnPyramidChart);