@aquera/nile-visualization 2.0.0 → 2.2.0

package/dist/src/nile-radial-bar-chart/nile-radial-bar-chart.d.ts

@@ -25,6 +25,8 @@ export declare class NileRadialBarChart extends NileElement {
     innerSize: string;
     paneSize: 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-radial-bar-chart/nile-radial-bar-chart.js

@@ -24,6 +24,8 @@ let NileRadialBarChart = class NileRadialBarChart extends NileElement {
         this.innerSize = '28%';
         this.paneSize = '82%';
         this.showLegend = true;
+        /** Full legend configuration — all Highcharts legend options in one object. */
+        this.legend = null;
         // ── Container styling ──
         this.chartBg = '';
         this.chartBorderRadius = '';
@@ -164,7 +166,7 @@ let NileRadialBarChart = class NileRadialBarChart extends NileElement {
                 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);
     }
@@ -229,6 +231,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'show-legend' })
 ], NileRadialBarChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileRadialBarChart.prototype, "legend", void 0);
 __decorate([
     property({ type: String, attribute: 'chart-bg' })
 ], NileRadialBarChart.prototype, "chartBg", void 0);

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

@@ -24,6 +24,8 @@ export declare class NileScatterChart extends NileElement {
     xAxisTitle: 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-scatter-chart/nile-scatter-chart.js

@@ -22,6 +22,8 @@ let NileScatterChart = class NileScatterChart extends NileElement {
         this.xAxisTitle = '';
         this.yAxisTitle = '';
         this.showLegend = true;
+        /** Full legend configuration — all Highcharts legend options in one object. */
+        this.legend = null;
         // ── Container styling ──
         this.chartBg = '';
         this.chartBorderRadius = '';
@@ -167,7 +169,7 @@ let NileScatterChart = class NileScatterChart extends NileElement {
                 series: { cursor: 'pointer', point: { events: { click() { self.emit('nile-chart-click', { point: this, x: this.x, y: this.y, seriesName: this.series.name }); } } } },
             },
             series: this.data.map(s => ({ type: 'scatter', 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);
     }
@@ -223,6 +225,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'show-legend' })
 ], NileScatterChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileScatterChart.prototype, "legend", void 0);
 __decorate([
     property({ type: String, attribute: 'chart-bg' })
 ], NileScatterChart.prototype, "chartBg", void 0);

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

@@ -28,6 +28,8 @@ export declare class NileSpiderwebChart 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-spiderweb-chart/nile-spiderweb-chart.js

@@ -27,6 +27,8 @@ let NileSpiderwebChart = class NileSpiderwebChart 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 = '';
@@ -170,7 +172,7 @@ let NileSpiderwebChart = class NileSpiderwebChart 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);
     }
@@ -229,6 +231,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'show-legend' })
 ], NileSpiderwebChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileSpiderwebChart.prototype, "legend", void 0);
 __decorate([
     property({ type: String, attribute: 'chart-bg' })
 ], NileSpiderwebChart.prototype, "chartBg", void 0);

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

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

@@ -22,6 +22,8 @@ let NileSplineChart = class NileSplineChart 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 = '';
@@ -161,7 +163,7 @@ let NileSplineChart = class NileSplineChart 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: 'spline', 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);
     }
@@ -217,6 +219,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'show-legend' })
 ], NileSplineChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileSplineChart.prototype, "legend", void 0);
 __decorate([
     property({ type: String, attribute: 'chart-bg' })
 ], NileSplineChart.prototype, "chartBg", void 0);

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

@@ -24,6 +24,8 @@ export declare class NileStackedChart 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;
     /** `normal` = stacked values; `percent` = 100% proportional stacks. */
     stackMode: 'normal' | 'percent';
     pointPadding: number;

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

@@ -23,6 +23,8 @@ let NileStackedChart = class NileStackedChart extends NileElement {
         this.height = '400px';
         this.yAxisTitle = '';
         this.showLegend = true;
+        /** Full legend configuration — all Highcharts legend options in one object. */
+        this.legend = null;
         /** `normal` = stacked values; `percent` = 100% proportional stacks. */
         this.stackMode = 'normal';
         this.pointPadding = 0.05;
@@ -147,7 +149,7 @@ let NileStackedChart = class NileStackedChart extends NileElement {
             subtitle: { text: this.chartSubtitle || undefined },
             xAxis: { categories: this.categories },
             yAxis: percentAxis,
-            legend: { enabled: this.showLegend },
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, ...rest }; })(),
             tooltip: {
                 shared: true,
                 headerFormat: '<b>{point.key}</b><br/>',
@@ -242,6 +244,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'show-legend' })
 ], NileStackedChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileStackedChart.prototype, "legend", void 0);
 __decorate([
     property({ type: String, attribute: 'stack-mode' })
 ], NileStackedChart.prototype, "stackMode", void 0);

package/dist/src/nile-timeline-chart/nile-timeline-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 TimelineEvent {
     /** Shown on axis / tooltip header (e.g. date string). */
     name: string;
@@ -38,6 +39,8 @@ export declare class NileTimelineChart extends NileElement {
     /** Alternate data-label sides along the line. */
     alternateLabels: boolean;
     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-timeline-chart/nile-timeline-chart.js

@@ -31,6 +31,8 @@ let NileTimelineChart = class NileTimelineChart extends NileElement {
         /** Alternate data-label sides along the line. */
         this.alternateLabels = true;
         this.showLegend = false;
+        /** Full legend configuration — all Highcharts legend options in one object. */
+        this.legend = null;
         // ── Container styling ──
         this.chartBg = '';
         this.chartBorderRadius = '';
@@ -156,7 +158,7 @@ let NileTimelineChart = class NileTimelineChart extends NileElement {
             },
             title: { text: this.chartTitle || undefined },
             subtitle: { text: this.chartSubtitle || undefined },
-            legend: { enabled: this.showLegend },
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, ...rest }; })(),
             tooltip: {
                 headerFormat: '',
                 pointFormat: '<span style="color:{point.color}">●</span> <b>{point.label}</b><br/>{point.description}',
@@ -271,6 +273,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'show-legend' })
 ], NileTimelineChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileTimelineChart.prototype, "legend", void 0);
 __decorate([
     property({ type: String, attribute: 'chart-bg' })
 ], NileTimelineChart.prototype, "chartBg", void 0);

package/dist/src/nile-trendline-chart/nile-trendline-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 TrendlineSeriesData {
     name: string;
     data: number[];
@@ -52,6 +53,9 @@ export declare class NileTrendlineChart 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-trendline-chart/nile-trendline-chart.js

@@ -44,6 +44,9 @@ let NileTrendlineChart = class NileTrendlineChart 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) => {
@@ -149,6 +152,8 @@ let NileTrendlineChart = class NileTrendlineChart extends NileElement {
             'height',
             'yAxisTitle',
             'forecast',
+            'showLegend',
+            'legend',
             'loading',
         ];
         const needsUpdate = chartProps.some(p => changedProperties.has(p));
@@ -280,6 +285,7 @@ let NileTrendlineChart = class NileTrendlineChart extends NileElement {
                 },
             },
             series,
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, ...rest }; })(),
             credits: {
                 enabled: false,
             },
@@ -374,6 +380,12 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'loading-bg' })
 ], NileTrendlineChart.prototype, "loadingBg", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-legend' })
+], NileTrendlineChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileTrendlineChart.prototype, "legend", void 0);
 NileTrendlineChart = __decorate([
     customElement('nile-trendline-chart')
 ], NileTrendlineChart);

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

@@ -21,6 +21,8 @@ export declare class NileVariablePieChart extends NileElement {
     seriesName: string;
     showDataLabels: boolean;
     showLegend: boolean;
+    /** Full legend configuration — all Highcharts legend options in one object. */
+    legend: import('../nile-pie-chart/nile-pie-chart.js').LegendConfig | null;
     options: Highcharts.Options;
     loading: boolean;
     height: string;

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

@@ -19,6 +19,8 @@ let NileVariablePieChart = class NileVariablePieChart extends NileElement {
         this.seriesName = '';
         this.showDataLabels = true;
         this.showLegend = true;
+        /** Full legend configuration — all Highcharts legend options in one object. */
+        this.legend = null;
         this.options = {};
         this.loading = false;
         this.height = '400px';
@@ -122,7 +124,7 @@ let NileVariablePieChart = class NileVariablePieChart extends NileElement {
             title: { text: this.chartTitle || undefined },
             subtitle: { text: this.chartSubtitle || undefined },
             tooltip: { pointFormat: '{series.name}: <b>{point.y}</b> ({point.z})' },
-            legend: { enabled: this.showLegend },
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, ...rest }; })(),
             plotOptions: {
                 variablepie: {
                     dataLabels: { enabled: this.showDataLabels },
@@ -203,6 +205,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'show-legend' })
 ], NileVariablePieChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileVariablePieChart.prototype, "legend", void 0);
 __decorate([
     property({ type: Object })
 ], NileVariablePieChart.prototype, "options", void 0);

package/dist/src/nile-vector-chart/nile-vector-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 VectorDataPoint {
     x: number;
     y: number;
@@ -37,6 +38,9 @@ export declare class NileVectorChart 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-vector-chart/nile-vector-chart.js

@@ -35,6 +35,9 @@ let NileVectorChart = class NileVectorChart 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) => {
@@ -91,6 +94,8 @@ let NileVectorChart = class NileVectorChart extends NileElement {
             'options',
             'height',
             'loading',
+            'showLegend',
+            'legend',
         ];
         const cssVarProps = ['chartBg', 'chartBorderRadius', 'chartBorder', 'chartShadow', 'chartPadding', 'chartMinHeight',
             'loadingText', 'loadingColor', 'loadingFontSize', 'loadingFontFamily', 'loadingBg'];
@@ -155,6 +160,7 @@ let NileVectorChart = class NileVectorChart extends NileElement {
                     })),
                 },
             ],
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, ...rest }; })(),
             credits: { enabled: false },
         }, this.options);
     }
@@ -246,6 +252,12 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'loading-bg' })
 ], NileVectorChart.prototype, "loadingBg", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-legend' })
+], NileVectorChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileVectorChart.prototype, "legend", void 0);
 NileVectorChart = __decorate([
     customElement('nile-vector-chart')
 ], NileVectorChart);

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

@@ -25,6 +25,8 @@ export declare class NileWaterfallChart 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-waterfall-chart/nile-waterfall-chart.js

@@ -21,6 +21,8 @@ let NileWaterfallChart = class NileWaterfallChart 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 = '';
@@ -180,7 +182,7 @@ let NileWaterfallChart = class NileWaterfallChart extends NileElement {
                     color: '#3b82f6',
                     negativeColor: '#ef4444',
                 }],
-            legend: { enabled: this.showLegend },
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, ...rest }; })(),
             credits: { enabled: false },
         }, this.options);
     }
@@ -233,6 +235,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'show-legend' })
 ], NileWaterfallChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileWaterfallChart.prototype, "legend", void 0);
 __decorate([
     property({ type: String, attribute: 'chart-bg' })
 ], NileWaterfallChart.prototype, "chartBg", void 0);

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

@@ -27,6 +27,8 @@ export declare class NileXrangeChart extends NileElement {
     loading: boolean;
     height: 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-xrange-chart/nile-xrange-chart.js

@@ -23,6 +23,8 @@ let NileXrangeChart = class NileXrangeChart extends NileElement {
         this.loading = false;
         this.height = '400px';
         this.showLegend = true;
+        /** Full legend configuration — all Highcharts legend options in one object. */
+        this.legend = null;
         // ── Container styling ──
         this.chartBg = '';
         this.chartBorderRadius = '';
@@ -169,7 +171,7 @@ let NileXrangeChart = class NileXrangeChart extends NileElement {
                     })),
                 },
             ],
-            legend: { enabled: this.showLegend },
+            legend: (() => { const { show, ...rest } = this.legend ?? {}; return { enabled: show ?? this.showLegend, ...rest }; })(),
             credits: { enabled: false },
         }, this.options);
     }
@@ -231,6 +233,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'show-legend' })
 ], NileXrangeChart.prototype, "showLegend", void 0);
+__decorate([
+    property({ type: Object })
+], NileXrangeChart.prototype, "legend", void 0);
 __decorate([
     property({ type: String, attribute: 'chart-bg' })
 ], NileXrangeChart.prototype, "chartBg", void 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aquera/nile-visualization",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "description": "A visualization Library for the Nile Design System",
   "license": "MIT",
   "author": "Aquera Inc",