@aquera/nile-visualization 2.0.0 → 2.2.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;

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

@@ -35,6 +35,9 @@ let NileInvertedAreaChart = class NileInvertedAreaChart 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) => {
@@ -88,6 +91,8 @@ let NileInvertedAreaChart = class NileInvertedAreaChart extends NileElement {
             'yAxisTitle',
             'stacked',
             'loading',
+            'showLegend',
+            'legend',
         ];
         const cssVarProps = ['chartBg', 'chartBorderRadius', 'chartBorder', 'chartShadow', 'chartPadding', 'chartMinHeight',
             'loadingText', 'loadingColor', 'loadingFontSize', 'loadingFontFamily', 'loadingBg'];
@@ -147,6 +152,7 @@ let NileInvertedAreaChart = class NileInvertedAreaChart 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);
     }
@@ -238,6 +244,12 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'loading-bg' })
 ], NileInvertedAreaChart.prototype, "loadingBg", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-legend' })
+], NileInvertedAreaChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileInvertedAreaChart.prototype, "legend", void 0);
 NileInvertedAreaChart = __decorate([
     customElement('nile-inverted-area-chart')
 ], NileInvertedAreaChart);

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

@@ -6,6 +6,7 @@ export type TrendDirection = 'up' | 'down' | 'neutral';
 export type KpiVariant = 'default' | 'card' | 'gauge' | 'accent';
 export type SparklineType = 'area' | 'line';
 export type KpiValueFormat = 'auto' | 'K' | 'M' | 'B' | 'T' | 'none';
+export type KpiNumberSystem = 'indian' | 'international';
 /** `chart` slice for `<nile-kpi-chart>.config` (discriminated by `type: 'kpi'`). */
 export interface ChartKpiSeparatedPayload {
     type: 'kpi';
@@ -101,6 +102,11 @@ export interface ChartKpiSeparatedPayload {
      * (L, g, m, Pa, Hz, B, etc.). For non-unit suffix text (%, /day), use `suffix` instead.
      */
     unit?: string;
+    /**
+     * Number system for formatting. 'indian' uses Indian grouping (1,00,000) and L/Cr abbreviations.
+     * 'international' (default) uses standard grouping (100,000) and K/M/B/T abbreviations.
+     */
+    numberSystem?: KpiNumberSystem;
 }
 /** Separated `{ chart, aq }` input for `<nile-kpi-chart>`. */
 export interface NileKpiConfigInputType {
@@ -235,6 +241,8 @@ export declare class NileKpiChart extends NileElement {
     precision: number | null;
     /** BCP 47 locale for number formatting, e.g. 'en-IN'. Defaults to browser locale. */
     locale: string;
+    /** Number system: 'indian' (1,00,000 / L / Cr) or 'international' (100,000 / K / M / B / T). */
+    numberSystem: KpiNumberSystem;
     /**
      * Set by nile-chart: skip host border/shadow (variant card/gauge) so the parent chart-card is the only frame.
      */
@@ -245,6 +253,8 @@ export declare class NileKpiChart extends NileElement {
     private _syncCssVars;
     private formatCssLength;
     private parseNumericValue;
+    private get _effectiveNumberSystem();
+    private get _effectiveLocale();
     private formatTooltipNumber;
     private inferSparklineTooltipScale;
     private getTooltipContent;

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

@@ -134,6 +134,8 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         this.precision = null;
         /** BCP 47 locale for number formatting, e.g. 'en-IN'. Defaults to browser locale. */
         this.locale = '';
+        /** Number system: 'indian' (1,00,000 / L / Cr) or 'international' (100,000 / K / M / B / T). */
+        this.numberSystem = 'international';
         /**
          * Set by nile-chart: skip host border/shadow (variant card/gauge) so the parent chart-card is the only frame.
          */
@@ -279,9 +281,22 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         const n = Number(cleaned);
         return Number.isFinite(n) ? n : null;
     }
+    get _effectiveNumberSystem() {
+        if (this.numberSystem === 'indian') {
+            const p = (this.prefix ?? '').trim();
+            if (p === '₹' || /^Rs\.?\s*$/i.test(p) || /^INR\s*$/i.test(p))
+                return 'indian';
+        }
+        return 'international';
+    }
+    get _effectiveLocale() {
+        if (this.locale)
+            return this.locale;
+        return this._effectiveNumberSystem === 'indian' ? 'en-IN' : undefined;
+    }
     formatTooltipNumber(n) {
         const maxFractionDigits = Number.isInteger(n) ? 0 : 6;
-        const grouped = new Intl.NumberFormat(this.locale || undefined, {
+        const grouped = new Intl.NumberFormat(this._effectiveLocale, {
             useGrouping: true,
             minimumFractionDigits: 0,
             maximumFractionDigits: maxFractionDigits,
@@ -320,16 +335,16 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         const abs = Math.abs(raw);
         const sign = raw < 0 ? '-' : '';
         const maxFrac = Number.isInteger(raw) ? 0 : 6;
-        const tooltipLocale = this.locale || undefined;
-        const displayLocale = this.locale || undefined;
-        const full = `${new Intl.NumberFormat(tooltipLocale, {
+        const effectiveLocale = this._effectiveLocale;
+        const full = `${new Intl.NumberFormat(effectiveLocale, {
             useGrouping: true, minimumFractionDigits: 0, maximumFractionDigits: maxFrac,
         }).format(raw)}${baseUnit}`;
-        const display0 = `${new Intl.NumberFormat(displayLocale, {
+        const display0 = `${new Intl.NumberFormat(effectiveLocale, {
             useGrouping: true, minimumFractionDigits: 0, maximumFractionDigits: maxFrac,
         }).format(raw)}${baseUnit}`;
         if (fmt === 'none')
             return { display: display0, full, abbreviated: false };
+        const isIndian = this._effectiveNumberSystem === 'indian';
         let divisor = 0;
         let magnitude = '';
         if (fmt === 'K') {
@@ -348,6 +363,17 @@ let NileKpiChart = class NileKpiChart extends NileElement {
             divisor = 1e12;
             magnitude = 'T';
         }
+        else if (isIndian) {
+            // Indian: Crore (1e7) then Lakh (1e5)
+            if (abs >= 1e7) {
+                divisor = 1e7;
+                magnitude = 'Cr';
+            }
+            else if (abs >= 1e5) {
+                divisor = 1e5;
+                magnitude = 'L';
+            }
+        }
         else {
             if (abs >= 1e12) {
                 divisor = 1e12;
@@ -519,6 +545,8 @@ let NileKpiChart = class NileKpiChart extends NileElement {
                 this.locale = c.locale;
             if (c.unit !== undefined)
                 this.unit = c.unit;
+            if (c.numberSystem !== undefined)
+                this.numberSystem = c.numberSystem;
             if ('height' in c) {
                 const h = this.formatCssLength(c.height);
                 if (h) {
@@ -1042,6 +1070,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], NileKpiChart.prototype, "locale", void 0);
+__decorate([
+    property({ type: String, attribute: 'number-system' })
+], NileKpiChart.prototype, "numberSystem", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'embed-in-nile-chart' })
 ], NileKpiChart.prototype, "embedInNileChart", void 0);

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

@@ -24,6 +24,8 @@ export declare class NileLineChart 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-line-chart/nile-line-chart.js

@@ -22,6 +22,8 @@ let NileLineChart = class NileLineChart 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 = '';
@@ -158,7 +160,7 @@ let NileLineChart = class NileLineChart extends NileElement {
             tooltip: { shared: true },
             plotOptions: { 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: 'line', 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);
     }
@@ -214,6 +216,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'show-legend' })
 ], NileLineChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileLineChart.prototype, "legend", void 0);
 __decorate([
     property({ type: String, attribute: 'chart-bg' })
 ], NileLineChart.prototype, "chartBg", void 0);

package/dist/src/nile-line-column-chart/nile-line-column-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 LineColumnSeriesPart {
     name: string;
     data: number[];
@@ -35,6 +36,9 @@ export declare class NileLineColumnChart 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-line-column-chart/nile-line-column-chart.js

@@ -36,6 +36,9 @@ let NileLineColumnChart = class NileLineColumnChart 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 NileLineColumnChart = class NileLineColumnChart extends NileElement {
             'options',
             'height',
             'loading',
+            'showLegend',
+            'legend',
         ];
         const cssVarProps = ['chartBg', 'chartBorderRadius', 'chartBorder', 'chartShadow', 'chartPadding', 'chartMinHeight',
             'loadingText', 'loadingColor', 'loadingFontSize', 'loadingFontFamily', 'loadingBg'];
@@ -140,7 +145,7 @@ let NileLineColumnChart = class NileLineColumnChart extends NileElement {
                 },
             ],
             tooltip: { shared: true },
-            legend: { enabled: true },
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, ...rest }; })(),
             plotOptions: {
                 column: { borderRadius: 2 },
                 series: {
@@ -270,6 +275,12 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'loading-bg' })
 ], NileLineColumnChart.prototype, "loadingBg", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-legend' })
+], NileLineColumnChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileLineColumnChart.prototype, "legend", void 0);
 NileLineColumnChart = __decorate([
     customElement('nile-line-column-chart')
 ], NileLineColumnChart);

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

@@ -33,6 +33,9 @@ let NileLollipopChart = class NileLollipopChart 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) => {
@@ -79,7 +82,9 @@ let NileLollipopChart = class NileLollipopChart extends NileElement {
             this.applyConfig(this.config);
             return;
         }
-        const props = ['data', 'categories', 'chartTitle', 'chartSubtitle', 'options', 'height', 'loading'];
+        const props = ['data', 'categories', '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,7 +137,7 @@ let NileLollipopChart = class NileLollipopChart extends NileElement {
             subtitle: { text: this.chartSubtitle || undefined },
             xAxis: { categories: this.categories },
             yAxis: { title: { text: undefined }, min: 0 },
-            legend: { enabled: this.data.length > 1 },
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, ...rest }; })(),
             tooltip: { shared: true },
             plotOptions: {
                 column: { grouping: false, pointPadding: 0.12 },
@@ -239,6 +244,12 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'loading-bg' })
 ], NileLollipopChart.prototype, "loadingBg", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-legend' })
+], NileLollipopChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileLollipopChart.prototype, "legend", void 0);
 NileLollipopChart = __decorate([
     customElement('nile-lollipop-chart')
 ], NileLollipopChart);

package/dist/src/nile-map-chart/nile-map-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 MapChartDataPoint {
     /** Highcharts map key matching the map topology (e.g. 'us-ca'). */
     'hc-key'?: string;
@@ -66,6 +67,9 @@ export declare class NileMapChart 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-map-chart/nile-map-chart.js

@@ -63,6 +63,9 @@ let NileMapChart = class NileMapChart 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) => {
@@ -176,6 +179,8 @@ let NileMapChart = class NileMapChart extends NileElement {
             'chartSubtitle',
             'options',
             'height',
+            'showLegend',
+            'legend',
             'loading',
             'zoom',
             'seriesType',
@@ -217,9 +222,7 @@ let NileMapChart = class NileMapChart extends NileElement {
             colorAxis: {
                 min: 0,
             },
-            legend: {
-                enabled: true,
-            },
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, ...rest }; })(),
             mapNavigation: {
                 enabled: this.zoom,
                 enableMouseWheelZoom: this.zoom,
@@ -350,6 +353,12 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'loading-bg' })
 ], NileMapChart.prototype, "loadingBg", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-legend' })
+], NileMapChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileMapChart.prototype, "legend", void 0);
 NileMapChart = __decorate([
     customElement('nile-map-chart')
 ], NileMapChart);

package/dist/src/nile-organization-chart/nile-organization-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';
 /** Directed edge: reporting line from `from` to `to` (node ids). */
 export interface OrgChartLink {
     from: string;
@@ -50,6 +51,9 @@ export declare class NileOrganizationChart 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-organization-chart/nile-organization-chart.js

@@ -40,6 +40,9 @@ let NileOrganizationChart = class NileOrganizationChart 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) => {
@@ -96,6 +99,8 @@ let NileOrganizationChart = class NileOrganizationChart extends NileElement {
             'seriesName',
             'inverted',
             'loading',
+            'showLegend',
+            'legend',
         ];
         const cssVarProps = ['chartBg', 'chartBorderRadius', 'chartBorder', 'chartShadow', 'chartPadding', 'chartMinHeight',
             'loadingText', 'loadingColor', 'loadingFontSize', 'loadingFontFamily', 'loadingBg'];
@@ -180,6 +185,7 @@ let NileOrganizationChart = class NileOrganizationChart extends NileElement {
                     nodes: nodeOpts,
                 },
             ],
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, ...rest }; })(),
             credits: { enabled: false },
         }, this.options);
     }
@@ -271,6 +277,12 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'loading-bg' })
 ], NileOrganizationChart.prototype, "loadingBg", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-legend' })
+], NileOrganizationChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileOrganizationChart.prototype, "legend", void 0);
 NileOrganizationChart = __decorate([
     customElement('nile-organization-chart')
 ], NileOrganizationChart);

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

@@ -9,6 +9,57 @@ export interface PieChartSeriesData {
     sliced?: boolean;
     selected?: boolean;
 }
+export interface LegendNavigationConfig {
+    activeColor?: string;
+    animation?: boolean | {
+        duration?: number;
+    };
+    arrowSize?: number;
+    enabled?: boolean;
+    inactiveColor?: string;
+    style?: Record<string, string | number>;
+}
+export interface LegendConfig {
+    /** Show or hide the legend (maps to Highcharts `enabled`). */
+    show?: boolean;
+    layout?: 'horizontal' | 'vertical';
+    align?: 'left' | 'center' | 'right';
+    verticalAlign?: 'top' | 'middle' | 'bottom';
+    navigation?: LegendNavigationConfig;
+    backgroundColor?: string;
+    borderColor?: string;
+    borderRadius?: number;
+    borderWidth?: number;
+    floating?: boolean;
+    itemDistance?: number;
+    itemHiddenStyle?: Record<string, string | number>;
+    itemHoverStyle?: Record<string, string | number>;
+    itemMarginBottom?: number;
+    itemMarginTop?: number;
+    itemStyle?: Record<string, string | number>;
+    itemWidth?: number;
+    labelFormat?: string;
+    lineHeight?: number;
+    margin?: number;
+    maxHeight?: number;
+    maxWidth?: number;
+    padding?: number;
+    reversed?: boolean;
+    rtl?: boolean;
+    squareSymbol?: boolean;
+    symbolHeight?: number;
+    symbolPadding?: number;
+    symbolRadius?: number;
+    symbolWidth?: number;
+    title?: {
+        text?: string;
+        style?: Record<string, string | number>;
+    };
+    useHTML?: boolean;
+    width?: number;
+    x?: number;
+    y?: number;
+}
 export declare class NilePieChart extends NileElement {
     static styles: CSSResultGroup;
     private _hc;
@@ -35,6 +86,8 @@ export declare class NilePieChart extends NileElement {
     showDataLabels: boolean;
     /** Whether to enable the legend. */
     showLegend: 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-pie-chart/nile-pie-chart.js

@@ -31,6 +31,8 @@ let NilePieChart = class NilePieChart extends NileElement {
         this.showDataLabels = true;
         /** Whether to enable the legend. */
         this.showLegend = true;
+        /** Full legend configuration — all Highcharts legend options in one object. */
+        this.legend = null;
         // ── Container styling ──
         this.chartBg = '';
         this.chartBorderRadius = '';
@@ -231,6 +233,10 @@ let NilePieChart = class NilePieChart extends NileElement {
                     })),
                 },
             ],
+            legend: (() => {
+                const { show, ...rest } = this.legend ?? {};
+                return { enabled: show ?? this.showLegend, ...rest };
+            })(),
             credits: {
                 enabled: false,
             },
@@ -292,6 +298,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'show-legend' })
 ], NilePieChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NilePieChart.prototype, "legend", void 0);
 __decorate([
     property({ type: String, attribute: 'chart-bg' })
 ], NilePieChart.prototype, "chartBg", void 0);

package/dist/src/nile-polygon-chart/nile-polygon-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 PolygonSeriesConfig {
     name: string;
     data: [number, number][];
@@ -34,6 +35,9 @@ export declare class NilePolygonChart 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-polygon-chart/nile-polygon-chart.js

@@ -34,6 +34,9 @@ let NilePolygonChart = class NilePolygonChart 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) => {
@@ -89,6 +92,8 @@ let NilePolygonChart = class NilePolygonChart extends NileElement {
             'options',
             'height',
             'loading',
+            'showLegend',
+            'legend',
         ];
         const cssVarProps = ['chartBg', 'chartBorderRadius', 'chartBorder', 'chartShadow', 'chartPadding', 'chartMinHeight',
             'loadingText', 'loadingColor', 'loadingFontSize', 'loadingFontFamily', 'loadingBg'];
@@ -144,6 +149,7 @@ let NilePolygonChart = class NilePolygonChart extends NileElement {
                 color: s.color,
                 lineWidth: s.lineWidth,
             })),
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, ...rest }; })(),
             credits: { enabled: false },
         }, this.options);
     }
@@ -232,6 +238,12 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'loading-bg' })
 ], NilePolygonChart.prototype, "loadingBg", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-legend' })
+], NilePolygonChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NilePolygonChart.prototype, "legend", void 0);
 NilePolygonChart = __decorate([
     customElement('nile-polygon-chart')
 ], NilePolygonChart);

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

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

@@ -22,6 +22,8 @@ let NileRadarChart = class NileRadarChart extends NileElement {
         this.height = '400px';
         this.showArea = false;
         this.showLegend = true;
+        /** Full legend configuration — all Highcharts legend options in one object. */
+        this.legend = null;
         // ── Container styling ──
         this.chartBg = '';
         this.chartBorderRadius = '';
@@ -180,7 +182,7 @@ let NileRadarChart = class NileRadarChart extends NileElement {
                 color: s.color,
                 pointPlacement: 'on',
             })),
-            legend: { enabled: this.showLegend },
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, ...rest }; })(),
             credits: { enabled: false },
         }, this.options);
     }
@@ -236,6 +238,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'show-legend' })
 ], NileRadarChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileRadarChart.prototype, "legend", void 0);
 __decorate([
     property({ type: String, attribute: 'chart-bg' })
 ], NileRadarChart.prototype, "chartBg", void 0);