@aquera/nile-visualization 1.4.0 → 1.6.0

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

@@ -148,10 +148,8 @@ let NileChart = class NileChart extends NileElement {
         return this.resolvedConfig?.summary ?? this.summary;
     }
     /** AI panel shows when ai.enabled is true OR when a summary is provided. */
-    /** AI panel shows when ai.enabled is true OR when a summary is provided. */
     get aiEnabled() {
         return this.resolvedConfig?.ai?.enabled === true || !!this.effectiveSummary;
-        return this.resolvedConfig?.ai?.enabled === true || !!this.effectiveSummary;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -395,8 +393,20 @@ let NileChart = class NileChart extends NileElement {
           .categories=${config.categories ?? []}
           .height=${config.height ?? '100%'}
           .yAxisTitle=${config.yAxisTitle ?? ''}
+          .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-bar-chart>`;
             case 'pie':
                 return html `<nile-pie-chart
@@ -407,6 +417,17 @@ let NileChart = class NileChart extends NileElement {
           .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-pie-chart>`;
             case 'trendline':
                 return html `<nile-trendline-chart
@@ -417,6 +438,17 @@ let NileChart = class NileChart extends NileElement {
           .forecast=${config.forecast ?? null}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-trendline-chart>`;
             case 'anomaly':
                 return html `<nile-anomaly-chart
@@ -427,6 +459,17 @@ let NileChart = class NileChart extends NileElement {
           .anomaly=${config.anomaly ?? {}}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-anomaly-chart>`;
             case 'line':
                 return html `<nile-line-chart
@@ -434,8 +477,20 @@ let NileChart = class NileChart extends NileElement {
           .categories=${config.categories ?? []}
           .height=${config.height ?? '100%'}
           .yAxisTitle=${config.yAxisTitle ?? ''}
+          .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-line-chart>`;
             case 'area':
                 return html `<nile-area-chart
@@ -444,8 +499,20 @@ let NileChart = class NileChart extends NileElement {
           .height=${config.height ?? '100%'}
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .stacked=${config.stacked ?? false}
+          .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-area-chart>`;
             case 'column':
                 return html `<nile-column-chart
@@ -453,8 +520,20 @@ let NileChart = class NileChart extends NileElement {
           .categories=${config.categories ?? []}
           .height=${config.height ?? '100%'}
           .yAxisTitle=${config.yAxisTitle ?? ''}
+          .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-column-chart>`;
             case 'donut':
                 return html `<nile-donut-chart
@@ -468,6 +547,17 @@ let NileChart = class NileChart extends NileElement {
           .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-donut-chart>`;
             case 'scatter':
                 return html `<nile-scatter-chart
@@ -475,8 +565,20 @@ let NileChart = class NileChart extends NileElement {
           .height=${config.height ?? '100%'}
           .xAxisTitle=${config.xAxisTitle ?? ''}
           .yAxisTitle=${config.yAxisTitle ?? ''}
+          .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-scatter-chart>`;
             case 'bubble':
                 return html `<nile-bubble-chart
@@ -484,8 +586,20 @@ let NileChart = class NileChart extends NileElement {
           .height=${config.height ?? '100%'}
           .xAxisTitle=${config.xAxisTitle ?? ''}
           .yAxisTitle=${config.yAxisTitle ?? ''}
+          .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-bubble-chart>`;
             case 'spline':
                 return html `<nile-spline-chart
@@ -493,8 +607,20 @@ let NileChart = class NileChart extends NileElement {
           .categories=${config.categories ?? []}
           .height=${config.height ?? '100%'}
           .yAxisTitle=${config.yAxisTitle ?? ''}
+          .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-spline-chart>`;
             case 'radar':
                 return html `<nile-radar-chart
@@ -502,8 +628,20 @@ let NileChart = class NileChart extends NileElement {
           .categories=${config.categories ?? []}
           .height=${config.height ?? '100%'}
           .showArea=${config.showArea ?? false}
+          .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-radar-chart>`;
             case 'gauge':
                 return html `<nile-gauge-chart
@@ -515,14 +653,37 @@ let NileChart = class NileChart extends NileElement {
           .height=${config.height ?? '100%'}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-gauge-chart>`;
             case 'waterfall':
                 return html `<nile-waterfall-chart
           .data=${config.data}
           .height=${config.height ?? '100%'}
           .yAxisTitle=${config.yAxisTitle ?? ''}
+          .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-waterfall-chart>`;
             case 'map':
                 return html `<nile-map-chart
@@ -534,6 +695,17 @@ let NileChart = class NileChart extends NileElement {
           .height=${config.height ?? '100%'}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-map-chart>`;
             case 'stacked':
                 return html `<nile-stacked-chart
@@ -546,6 +718,17 @@ let NileChart = class NileChart extends NileElement {
           .pointPadding=${config.pointPadding ?? 0.05}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-stacked-chart>`;
             case 'cluster':
                 return html `<nile-cluster-chart
@@ -558,6 +741,17 @@ let NileChart = class NileChart extends NileElement {
           .pointPadding=${config.pointPadding ?? 0.05}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-cluster-chart>`;
             case 'histogram':
                 return html `<nile-histogram-chart
@@ -573,6 +767,17 @@ let NileChart = class NileChart extends NileElement {
           .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-histogram-chart>`;
             case 'bellcurve':
                 return html `<nile-bellcurve-chart
@@ -589,6 +794,17 @@ let NileChart = class NileChart extends NileElement {
           .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-bellcurve-chart>`;
             case 'boxplot':
                 return html `<nile-boxplot-chart
@@ -601,6 +817,17 @@ let NileChart = class NileChart extends NileElement {
           .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-boxplot-chart>`;
             case 'timeline':
                 return html `<nile-timeline-chart
@@ -613,6 +840,17 @@ let NileChart = class NileChart extends NileElement {
           .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-timeline-chart>`;
             case 'dumbbell':
                 return html `<nile-dumbbell-chart
@@ -626,6 +864,17 @@ let NileChart = class NileChart extends NileElement {
           .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-dumbbell-chart>`;
             case 'dumbbellLower':
                 return html `<nile-dumbbell-lower-chart
@@ -639,6 +888,17 @@ let NileChart = class NileChart extends NileElement {
           .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-dumbbell-lower-chart>`;
             case 'dumbbellUpper':
                 return html `<nile-dumbbell-upper-chart
@@ -652,6 +912,17 @@ let NileChart = class NileChart extends NileElement {
           .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-dumbbell-upper-chart>`;
             case 'fan':
                 return html `<nile-fan-chart
@@ -666,6 +937,17 @@ let NileChart = class NileChart extends NileElement {
           .showLegend=${config.showLegend ?? false}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-fan-chart>`;
             case 'funnel':
                 return html `<nile-funnel-chart
@@ -675,6 +957,17 @@ let NileChart = class NileChart extends NileElement {
           .showDataLabels=${config.showDataLabels ?? true}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-funnel-chart>`;
             case 'organization':
                 return html `<nile-organization-chart
@@ -685,6 +978,17 @@ let NileChart = class NileChart extends NileElement {
           .inverted=${config.inverted ?? true}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-organization-chart>`;
             case 'line-column':
                 return html `<nile-line-column-chart
@@ -696,6 +1000,17 @@ let NileChart = class NileChart extends NileElement {
           .lineAxisTitle=${config.lineAxisTitle ?? ''}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-line-column-chart>`;
             case 'heatmap':
                 return html `<nile-heatmap-chart
@@ -710,8 +1025,20 @@ let NileChart = class NileChart extends NileElement {
           .maxColor=${config.maxColor ?? '#1e40af'}
           .colorAxisTitle=${config.colorAxisTitle ?? ''}
           .showDataLabels=${config.showDataLabels ?? true}
+          .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-heatmap-chart>`;
             case 'flame':
                 return html `<nile-flame-chart
@@ -721,6 +1048,17 @@ let NileChart = class NileChart extends NileElement {
           .height=${config.height ?? '100%'}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-flame-chart>`;
             case 'spiderweb':
                 return html `<nile-spiderweb-chart
@@ -728,8 +1066,20 @@ let NileChart = class NileChart extends NileElement {
           .categories=${config.categories ?? []}
           .height=${config.height ?? '100%'}
           .showArea=${config.showArea ?? false}
+          .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-spiderweb-chart>`;
             case 'invertedArea':
                 return html `<nile-inverted-area-chart
@@ -740,6 +1090,17 @@ let NileChart = class NileChart extends NileElement {
           .stacked=${config.stacked ?? false}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-inverted-area-chart>`;
             case 'columnPyramid':
                 return html `<nile-column-pyramid-chart
@@ -748,6 +1109,17 @@ let NileChart = class NileChart extends NileElement {
           .height=${config.height ?? '100%'}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-column-pyramid-chart>`;
             case 'lollipop':
                 return html `<nile-lollipop-chart
@@ -756,6 +1128,17 @@ let NileChart = class NileChart extends NileElement {
           .height=${config.height ?? '100%'}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-lollipop-chart>`;
             case 'areaSpline':
                 return html `<nile-area-spline-chart
@@ -766,6 +1149,17 @@ let NileChart = class NileChart extends NileElement {
           .stacked=${config.stacked ?? false}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-area-spline-chart>`;
             case 'areaNegative':
                 return html `<nile-area-negative-chart
@@ -776,6 +1170,17 @@ let NileChart = class NileChart extends NileElement {
           .threshold=${config.threshold ?? 0}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-area-negative-chart>`;
             case 'areaRange':
                 return html `<nile-area-range-chart
@@ -785,6 +1190,17 @@ let NileChart = class NileChart extends NileElement {
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-area-range-chart>`;
             case 'columnRange':
                 return html `<nile-column-range-chart
@@ -794,6 +1210,17 @@ let NileChart = class NileChart extends NileElement {
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-column-range-chart>`;
             case 'columnDrilldown':
                 return html `<nile-column-drilldown-chart
@@ -804,6 +1231,17 @@ let NileChart = class NileChart extends NileElement {
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-column-drilldown-chart>`;
             case 'radialBar':
                 return html `<nile-radial-bar-chart
@@ -813,8 +1251,20 @@ let NileChart = class NileChart extends NileElement {
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .innerSize=${config.innerSize ?? '28%'}
           .paneSize=${config.paneSize ?? '82%'}
+          .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-radial-bar-chart>`;
             case 'variablePie':
                 return html `<nile-variable-pie-chart
@@ -825,6 +1275,17 @@ let NileChart = class NileChart extends NileElement {
           .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-variable-pie-chart>`;
             case 'euler':
                 return html `<nile-euler-chart
@@ -832,6 +1293,17 @@ let NileChart = class NileChart extends NileElement {
           .height=${config.height ?? '100%'}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-euler-chart>`;
             case 'polygon':
                 return html `<nile-polygon-chart
@@ -841,6 +1313,17 @@ let NileChart = class NileChart extends NileElement {
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-polygon-chart>`;
             case 'vector':
                 return html `<nile-vector-chart
@@ -851,6 +1334,17 @@ let NileChart = class NileChart extends NileElement {
           .yAxisTitle=${config.yAxisTitle ?? ''}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-vector-chart>`;
             case 'xrange':
                 return html `<nile-xrange-chart
@@ -859,8 +1353,20 @@ let NileChart = class NileChart extends NileElement {
           .height=${config.height ?? '100%'}
           .seriesName=${config.seriesName ?? ''}
           .datetimeAxis=${config.datetimeAxis ?? false}
+          .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
+          .chartBg=${config.chartBg ?? ''}
+          .chartBorderRadius=${config.chartBorderRadius ?? ''}
+          .chartBorder=${config.chartBorder ?? ''}
+          .chartShadow=${config.chartShadow ?? ''}
+          .chartPadding=${config.chartPadding ?? ''}
+          .chartMinHeight=${config.chartMinHeight ?? ''}
+          .loadingText=${config.loadingText ?? 'Loading...'}
+          .loadingColor=${config.loadingColor ?? ''}
+          .loadingFontSize=${config.loadingFontSize ?? ''}
+          .loadingFontFamily=${config.loadingFontFamily ?? ''}
+          .loadingBg=${config.loadingBg ?? ''}
         ></nile-xrange-chart>`;
             case 'kpi': {
                 const k = config;
@@ -877,13 +1383,51 @@ let NileChart = class NileChart extends NileElement {
                         trendValue: k.trendValue,
                         trendDirection: k.trendDirection,
                         trendLabel: k.trendLabel,
+                        trendUpColor: k.trendUpColor,
+                        trendDownColor: k.trendDownColor,
+                        trendNeutralColor: k.trendNeutralColor,
                         description: k.description,
                         sparkline: k.sparkline,
                         sparklineColor: k.sparklineColor,
+                        sparklineType: k.sparklineType,
+                        sparklineFillOpacity: k.sparklineFillOpacity,
+                        sparklineMarkers: k.sparklineMarkers,
+                        sparklineHeight: k.sparklineHeight,
+                        sparklineLineWidth: k.sparklineLineWidth,
                         gaugeValue: k.gaugeValue,
                         gaugeMin: k.gaugeMin,
                         gaugeMax: k.gaugeMax,
                         gaugeColor: k.gaugeColor,
+                        gaugeTrackColor: k.gaugeTrackColor,
+                        gaugeStartAngle: k.gaugeStartAngle,
+                        gaugeEndAngle: k.gaugeEndAngle,
+                        gaugeInnerRadius: k.gaugeInnerRadius,
+                        gaugeOuterRadius: k.gaugeOuterRadius,
+                        gaugeRounded: k.gaugeRounded,
+                        gaugeHeight: k.gaugeHeight,
+                        gaugeLabelFontSize: k.gaugeLabelFontSize,
+                        gaugeLabelColor: k.gaugeLabelColor,
+                        gaugeLabelFontWeight: k.gaugeLabelFontWeight,
+                        gaugeLabelYOffset: k.gaugeLabelYOffset,
+                        valueFontSize: k.valueFontSize,
+                        valueColor: k.valueColor,
+                        labelColor: k.labelColor,
+                        labelFontSize: k.labelFontSize,
+                        labelFontWeight: k.labelFontWeight,
+                        descriptionColor: k.descriptionColor,
+                        descriptionFontSize: k.descriptionFontSize,
+                        prefixSuffixColor: k.prefixSuffixColor,
+                        prefixSuffixFontSize: k.prefixSuffixFontSize,
+                        cardBackground: k.cardBackground,
+                        cardBorderColor: k.cardBorderColor,
+                        cardBorderWidth: k.cardBorderWidth,
+                        cardBorderRadius: k.cardBorderRadius,
+                        cardShadow: k.cardShadow,
+                        cardShadowHover: k.cardShadowHover,
+                        cardPaddingVertical: k.cardPaddingVertical,
+                        cardPaddingHorizontal: k.cardPaddingHorizontal,
+                        contentGap: k.contentGap,
+                        tooltipEnabled: k.tooltipEnabled,
                         loading: k.loading,
                         options: k.options,
                         height: k.height,
@@ -897,8 +1441,7 @@ 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;' +
-                    'display:block;';
+                    '--nile-data-grid-shadow:none;';
                 const gridStyle = config.height
                     ? `${gridChrome}height:${config.height};`
                     : gridChrome;
@@ -909,6 +1452,7 @@ let NileChart = class NileChart extends NileElement {
           .loading=${config.loading ?? false}
           .striped=${config.striped ?? false}
           .hoverable=${config.hoverable ?? false}
+          .stickyHeader=${config.stickyHeader ?? false}
           .emptyMessage=${config.emptyMessage ?? 'No data'}
           .loadingMessage=${config.loadingMessage ?? 'Loading\u2026'}
           .noMatchMessage=${config.noMatchMessage ?? 'No matching rows'}