@aquera/nile-visualization 2.0.0 → 2.2.0

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

@@ -527,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
@@ -535,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 ?? ''}
@@ -556,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 ?? ''}
@@ -578,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 ?? ''}
@@ -599,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 ?? ''}
@@ -619,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 ?? ''}
@@ -641,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 ?? ''}
@@ -662,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 ?? ''}
@@ -685,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 ?? ''}
@@ -706,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 ?? ''}
@@ -727,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 ?? ''}
@@ -748,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 ?? ''}
@@ -769,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 ?? ''}
@@ -792,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 ?? ''}
@@ -811,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 ?? ''}
@@ -834,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 ?? ''}
@@ -855,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}
@@ -877,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}
@@ -905,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 ?? ''}
@@ -932,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 ?? ''}
@@ -955,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 ?? ''}
@@ -978,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 ?? ''}
@@ -1002,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 ?? ''}
@@ -1026,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 ?? ''}
@@ -1050,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 ?? ''}
@@ -1075,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 ?? ''}
@@ -1096,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 ?? ''}
@@ -1117,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 ?? ''}
@@ -1139,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 ?? ''}
@@ -1166,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 ?? ''}
@@ -1187,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 ?? ''}
@@ -1207,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 ?? ''}
@@ -1229,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 ?? ''}
@@ -1248,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 ?? ''}
@@ -1267,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 ?? ''}
@@ -1288,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 ?? ''}
@@ -1309,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 ?? ''}
@@ -1329,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 ?? ''}
@@ -1349,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 ?? ''}
@@ -1370,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 ?? ''}
@@ -1392,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 ?? ''}
@@ -1413,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 ?? ''}
@@ -1432,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 ?? ''}
@@ -1452,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 ?? ''}
@@ -1473,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 ?? ''}
@@ -1494,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 ?? ''}
@@ -1576,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,
@@ -1586,7 +1657,8 @@ let NileChart = class NileChart extends NileElement {
             case 'grid': {
                 const gridChrome = '--nile-data-grid-radius:0;' +
                     '--nile-data-grid-border-color:transparent;' +
-                    '--nile-data-grid-shadow:none;';
+                    '--nile-data-grid-shadow:none;' +
+                    (config.height ? `height:${config.height};` : '');
                 return html `<nile-data-grid
           class="nile-chart-grid"
           .data=${config.data}
@@ -1627,11 +1699,8 @@ let NileChart = class NileChart extends NileElement {
     render() {
         const isLoading = this.loading || (this.activeConfig?.loading ?? false);
         const isGrid = this.activeConfig?.type === 'grid';
-        const cardStyle = isGrid && this.activeConfig?.height
-            ? `height:${this.activeConfig.height}`
-            : '';
         return html `
-      <div class="nile-chart-card ${isGrid ? 'nile-chart-card--grid' : ''}" style=${cardStyle}>
+      <div class="nile-chart-card ${isGrid ? 'nile-chart-card--grid' : ''}">
         ${this.renderHeader()}
         <div class="nile-chart-wrapper">
           <div class="nile-chart-inner ${this.activeConfig?.type === 'kpi' ? 'nile-chart-inner--kpi' : ''}">
@@ -1640,9 +1709,10 @@ let NileChart = class NileChart extends NileElement {
             : this.activeConfig
                 ? this.renderChartContent()
                 : html `<slot></slot>`}
-            ${this.renderAiPanel()}
+            ${isGrid ? nothing : this.renderAiPanel()}
           </div>
         </div>
+        ${isGrid ? this.renderAiPanel() : nothing}
         <slot name="footer"></slot>
       </div>
     `;

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;