@progress/kendo-angular-charts 20.1.0-develop.9 → 20.1.0

package/chart-options.interface.d.ts

@@ -35,6 +35,11 @@ export interface ChartOptions {
      * By default, animations are enabled.
      */
     transitions?: boolean;
+    /**
+     * @hidden
+     * Defines whether the Chart automatically repaints when its styles are modified through CSS variables.
+     */
+    observeStyles?: boolean;
     /**
      * Defines whether the Chart can be zoomed.
      * Zooming is not available for the `Donut`, `Pie`, `Funnel`, `Pyramid`, `Polar`, and `Radar` series.

package/chart.component.d.ts

@@ -112,6 +112,12 @@ export declare class ChartComponent implements ChartOptions, OnChanges, OnInit,
      * @default true
      */
     noData: boolean;
+    /**
+     * @hidden
+     * Defines whether the Chart automatically repaints when its styles are modified through CSS variables.
+     * @default true
+     */
+    observeStyles: boolean;
     /**
      * Defines whether the Chart plays animations when it displays the series.
      * By default, animations are enabled.
@@ -362,6 +368,7 @@ export declare class ChartComponent implements ChartOptions, OnChanges, OnInit,
     constructor(configurationService: ConfigurationService, themeService: ThemeService, element: ElementRef, intl: IntlService, localizationService: LocalizationService, ngZone: NgZone, instanceEventService: InstanceEventService, changeDetector: ChangeDetectorRef, renderer: Renderer2);
     ngOnInit(): void;
     ngAfterViewInit(): void;
+    private onStyleChanged;
     private onDrilldown;
     ngAfterViewChecked(): void;
     ngOnChanges(changes: {
@@ -504,5 +511,5 @@ export declare class ChartComponent implements ChartOptions, OnChanges, OnInit,
     protected setDirection(): void;
     protected get isRTL(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChartComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ChartComponent, "kendo-chart", ["kendoChart"], { "pannable": { "alias": "pannable"; "required": false; }; "renderAs": { "alias": "renderAs"; "required": false; }; "seriesColors": { "alias": "seriesColors"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "title": { "alias": "title"; "required": false; }; "noData": { "alias": "noData"; "required": false; }; "transitions": { "alias": "transitions"; "required": false; }; "zoomable": { "alias": "zoomable"; "required": false; }; "axisDefaults": { "alias": "axisDefaults"; "required": false; }; "categoryAxis": { "alias": "categoryAxis"; "required": false; }; "chartArea": { "alias": "chartArea"; "required": false; }; "legend": { "alias": "legend"; "required": false; }; "panes": { "alias": "panes"; "required": false; }; "paneDefaults": { "alias": "paneDefaults"; "required": false; }; "plotArea": { "alias": "plotArea"; "required": false; }; "series": { "alias": "series"; "required": false; }; "seriesDefaults": { "alias": "seriesDefaults"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "valueAxis": { "alias": "valueAxis"; "required": false; }; "xAxis": { "alias": "xAxis"; "required": false; }; "yAxis": { "alias": "yAxis"; "required": false; }; "resizeRateLimit": { "alias": "resizeRateLimit"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; "drilldownLevel": { "alias": "drilldownLevel"; "required": false; }; }, { "axisLabelClick": "axisLabelClick"; "drag": "drag"; "dragEnd": "dragEnd"; "dragStart": "dragStart"; "legendItemHover": "legendItemHover"; "legendItemLeave": "legendItemLeave"; "noteClick": "noteClick"; "noteHover": "noteHover"; "noteLeave": "noteLeave"; "paneRender": "paneRender"; "plotAreaClick": "plotAreaClick"; "plotAreaHover": "plotAreaHover"; "plotAreaLeave": "plotAreaLeave"; "render": "render"; "select": "select"; "selectEnd": "selectEnd"; "selectStart": "selectStart"; "seriesClick": "seriesClick"; "drilldown": "drilldown"; "seriesHover": "seriesHover"; "seriesOver": "seriesOver"; "seriesLeave": "seriesLeave"; "zoom": "zoom"; "zoomEnd": "zoomEnd"; "zoomStart": "zoomStart"; "legendItemClick": "legendItemClick"; "drilldownLevelChange": "drilldownLevelChange"; }, ["donutCenterTemplate", "noDataTemplate", "seriesCollectionComponent", "seriesComponents"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ChartComponent, "kendo-chart", ["kendoChart"], { "pannable": { "alias": "pannable"; "required": false; }; "renderAs": { "alias": "renderAs"; "required": false; }; "seriesColors": { "alias": "seriesColors"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "title": { "alias": "title"; "required": false; }; "noData": { "alias": "noData"; "required": false; }; "observeStyles": { "alias": "observeStyles"; "required": false; }; "transitions": { "alias": "transitions"; "required": false; }; "zoomable": { "alias": "zoomable"; "required": false; }; "axisDefaults": { "alias": "axisDefaults"; "required": false; }; "categoryAxis": { "alias": "categoryAxis"; "required": false; }; "chartArea": { "alias": "chartArea"; "required": false; }; "legend": { "alias": "legend"; "required": false; }; "panes": { "alias": "panes"; "required": false; }; "paneDefaults": { "alias": "paneDefaults"; "required": false; }; "plotArea": { "alias": "plotArea"; "required": false; }; "series": { "alias": "series"; "required": false; }; "seriesDefaults": { "alias": "seriesDefaults"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "valueAxis": { "alias": "valueAxis"; "required": false; }; "xAxis": { "alias": "xAxis"; "required": false; }; "yAxis": { "alias": "yAxis"; "required": false; }; "resizeRateLimit": { "alias": "resizeRateLimit"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; "drilldownLevel": { "alias": "drilldownLevel"; "required": false; }; }, { "axisLabelClick": "axisLabelClick"; "drag": "drag"; "dragEnd": "dragEnd"; "dragStart": "dragStart"; "legendItemHover": "legendItemHover"; "legendItemLeave": "legendItemLeave"; "noteClick": "noteClick"; "noteHover": "noteHover"; "noteLeave": "noteLeave"; "paneRender": "paneRender"; "plotAreaClick": "plotAreaClick"; "plotAreaHover": "plotAreaHover"; "plotAreaLeave": "plotAreaLeave"; "render": "render"; "select": "select"; "selectEnd": "selectEnd"; "selectStart": "selectStart"; "seriesClick": "seriesClick"; "drilldown": "drilldown"; "seriesHover": "seriesHover"; "seriesOver": "seriesOver"; "seriesLeave": "seriesLeave"; "zoom": "zoom"; "zoomEnd": "zoomEnd"; "zoomStart": "zoomStart"; "legendItemClick": "legendItemClick"; "drilldownLevelChange": "drilldownLevelChange"; }, ["donutCenterTemplate", "noDataTemplate", "seriesCollectionComponent", "seriesComponents"], never, true, never>;
 }

package/esm2022/chart.component.mjs

@@ -98,6 +98,12 @@ export class ChartComponent {
      * @default true
      */
     noData = true;
+    /**
+     * @hidden
+     * Defines whether the Chart automatically repaints when its styles are modified through CSS variables.
+     * @default true
+     */
+    observeStyles = true;
     /**
      * Defines whether the Chart plays animations when it displays the series.
      * By default, animations are enabled.
@@ -386,6 +392,12 @@ export class ChartComponent {
             });
             this.renderer.setStyle(this.element.nativeElement, 'position', 'relative');
         }
+        // Initialize observeStyles default value if not already set
+        const store = this.configurationService.store;
+        if (store.observeStyles === undefined && this.observeStyles !== undefined) {
+            store.observeStyles = this.observeStyles;
+            this.configurationService.push(store);
+        }
     }
     ngAfterViewInit() {
         if (this.canRender) {
@@ -400,6 +412,10 @@ export class ChartComponent {
         this.subscriptions = this.intl.changes.subscribe(this.intlChange.bind(this));
         this.subscriptions.add(this.localizationService.changes.subscribe(this.rtlChange.bind(this)));
     }
+    onStyleChanged() {
+        this.suppressTransitions = true;
+        this.themeService.reset();
+    }
     onDrilldown(e) {
         const seriesComponent = this.seriesComponents.find(sc => sc.name === e.series.name);
         const seriesCollection = this.seriesCollectionComponent.first;
@@ -682,6 +698,10 @@ export class ChartComponent {
             this.onDrilldown(e);
             return;
         }
+        if (name === 'styleChanged') {
+            this.onStyleChanged();
+            return;
+        }
         const emitter = this.activeEmitter(name);
         if (emitter) {
             const args = this.instanceEventService.create(name, e, this);
@@ -732,7 +752,7 @@ export class ChartComponent {
         }
     }
     updateOptions() {
-        this.instance.setOptions(this.options);
+        this.instance.setOptions(this.options, this.theme);
     }
     /**
      * @hidden
@@ -857,7 +877,7 @@ export class ChartComponent {
         return Boolean(this.localizationService.rtl);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChartComponent, deps: [{ token: i1.ConfigurationService }, { token: i2.ThemeService }, { token: i0.ElementRef }, { token: i3.IntlService }, { token: i4.LocalizationService }, { token: i0.NgZone }, { token: i5.InstanceEventService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChartComponent, isStandalone: true, selector: "kendo-chart", inputs: { pannable: "pannable", renderAs: "renderAs", seriesColors: "seriesColors", subtitle: "subtitle", title: "title", noData: "noData", transitions: "transitions", zoomable: "zoomable", axisDefaults: "axisDefaults", categoryAxis: "categoryAxis", chartArea: "chartArea", legend: "legend", panes: "panes", paneDefaults: "paneDefaults", plotArea: "plotArea", series: "series", seriesDefaults: "seriesDefaults", tooltip: "tooltip", valueAxis: "valueAxis", xAxis: "xAxis", yAxis: "yAxis", resizeRateLimit: "resizeRateLimit", popupSettings: "popupSettings", drilldownLevel: "drilldownLevel" }, outputs: { axisLabelClick: "axisLabelClick", drag: "drag", dragEnd: "dragEnd", dragStart: "dragStart", legendItemHover: "legendItemHover", legendItemLeave: "legendItemLeave", noteClick: "noteClick", noteHover: "noteHover", noteLeave: "noteLeave", paneRender: "paneRender", plotAreaClick: "plotAreaClick", plotAreaHover: "plotAreaHover", plotAreaLeave: "plotAreaLeave", render: "render", select: "select", selectEnd: "selectEnd", selectStart: "selectStart", seriesClick: "seriesClick", drilldown: "drilldown", seriesHover: "seriesHover", seriesOver: "seriesOver", seriesLeave: "seriesLeave", zoom: "zoom", zoomEnd: "zoomEnd", zoomStart: "zoomStart", legendItemClick: "legendItemClick", drilldownLevelChange: "drilldownLevelChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChartComponent, isStandalone: true, selector: "kendo-chart", inputs: { pannable: "pannable", renderAs: "renderAs", seriesColors: "seriesColors", subtitle: "subtitle", title: "title", noData: "noData", observeStyles: "observeStyles", transitions: "transitions", zoomable: "zoomable", axisDefaults: "axisDefaults", categoryAxis: "categoryAxis", chartArea: "chartArea", legend: "legend", panes: "panes", paneDefaults: "paneDefaults", plotArea: "plotArea", series: "series", seriesDefaults: "seriesDefaults", tooltip: "tooltip", valueAxis: "valueAxis", xAxis: "xAxis", yAxis: "yAxis", resizeRateLimit: "resizeRateLimit", popupSettings: "popupSettings", drilldownLevel: "drilldownLevel" }, outputs: { axisLabelClick: "axisLabelClick", drag: "drag", dragEnd: "dragEnd", dragStart: "dragStart", legendItemHover: "legendItemHover", legendItemLeave: "legendItemLeave", noteClick: "noteClick", noteHover: "noteHover", noteLeave: "noteLeave", paneRender: "paneRender", plotAreaClick: "plotAreaClick", plotAreaHover: "plotAreaHover", plotAreaLeave: "plotAreaLeave", render: "render", select: "select", selectEnd: "selectEnd", selectStart: "selectStart", seriesClick: "seriesClick", drilldown: "drilldown", seriesHover: "seriesHover", seriesOver: "seriesOver", seriesLeave: "seriesLeave", zoom: "zoom", zoomEnd: "zoomEnd", zoomStart: "zoomStart", legendItemClick: "legendItemClick", drilldownLevelChange: "drilldownLevelChange" }, providers: [
             ConfigurationService,
             TooltipTemplateService,
             InstanceEventService,
@@ -952,6 +972,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], noData: [{
                 type: Input
+            }], observeStyles: [{
+                type: Input
             }], transitions: [{
                 type: Input
             }], zoomable: [{

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1759490945,
-    version: '20.1.0-develop.9',
+    publishDate: 1761117335,
+    version: '20.1.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/fesm2022/progress-kendo-angular-charts.mjs

@@ -2878,8 +2878,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1759490945,
-    version: '20.1.0-develop.9',
+    publishDate: 1761117335,
+    version: '20.1.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -3128,6 +3128,12 @@ class ChartComponent {
      * @default true
      */
     noData = true;
+    /**
+     * @hidden
+     * Defines whether the Chart automatically repaints when its styles are modified through CSS variables.
+     * @default true
+     */
+    observeStyles = true;
     /**
      * Defines whether the Chart plays animations when it displays the series.
      * By default, animations are enabled.
@@ -3416,6 +3422,12 @@ class ChartComponent {
             });
             this.renderer.setStyle(this.element.nativeElement, 'position', 'relative');
         }
+        // Initialize observeStyles default value if not already set
+        const store = this.configurationService.store;
+        if (store.observeStyles === undefined && this.observeStyles !== undefined) {
+            store.observeStyles = this.observeStyles;
+            this.configurationService.push(store);
+        }
     }
     ngAfterViewInit() {
         if (this.canRender) {
@@ -3430,6 +3442,10 @@ class ChartComponent {
         this.subscriptions = this.intl.changes.subscribe(this.intlChange.bind(this));
         this.subscriptions.add(this.localizationService.changes.subscribe(this.rtlChange.bind(this)));
     }
+    onStyleChanged() {
+        this.suppressTransitions = true;
+        this.themeService.reset();
+    }
     onDrilldown(e) {
         const seriesComponent = this.seriesComponents.find(sc => sc.name === e.series.name);
         const seriesCollection = this.seriesCollectionComponent.first;
@@ -3712,6 +3728,10 @@ class ChartComponent {
             this.onDrilldown(e);
             return;
         }
+        if (name === 'styleChanged') {
+            this.onStyleChanged();
+            return;
+        }
         const emitter = this.activeEmitter(name);
         if (emitter) {
             const args = this.instanceEventService.create(name, e, this);
@@ -3762,7 +3782,7 @@ class ChartComponent {
         }
     }
     updateOptions() {
-        this.instance.setOptions(this.options);
+        this.instance.setOptions(this.options, this.theme);
     }
     /**
      * @hidden
@@ -3887,7 +3907,7 @@ class ChartComponent {
         return Boolean(this.localizationService.rtl);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChartComponent, deps: [{ token: ConfigurationService }, { token: ThemeService }, { token: i0.ElementRef }, { token: i3.IntlService }, { token: i1$1.LocalizationService }, { token: i0.NgZone }, { token: InstanceEventService$1 }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChartComponent, isStandalone: true, selector: "kendo-chart", inputs: { pannable: "pannable", renderAs: "renderAs", seriesColors: "seriesColors", subtitle: "subtitle", title: "title", noData: "noData", transitions: "transitions", zoomable: "zoomable", axisDefaults: "axisDefaults", categoryAxis: "categoryAxis", chartArea: "chartArea", legend: "legend", panes: "panes", paneDefaults: "paneDefaults", plotArea: "plotArea", series: "series", seriesDefaults: "seriesDefaults", tooltip: "tooltip", valueAxis: "valueAxis", xAxis: "xAxis", yAxis: "yAxis", resizeRateLimit: "resizeRateLimit", popupSettings: "popupSettings", drilldownLevel: "drilldownLevel" }, outputs: { axisLabelClick: "axisLabelClick", drag: "drag", dragEnd: "dragEnd", dragStart: "dragStart", legendItemHover: "legendItemHover", legendItemLeave: "legendItemLeave", noteClick: "noteClick", noteHover: "noteHover", noteLeave: "noteLeave", paneRender: "paneRender", plotAreaClick: "plotAreaClick", plotAreaHover: "plotAreaHover", plotAreaLeave: "plotAreaLeave", render: "render", select: "select", selectEnd: "selectEnd", selectStart: "selectStart", seriesClick: "seriesClick", drilldown: "drilldown", seriesHover: "seriesHover", seriesOver: "seriesOver", seriesLeave: "seriesLeave", zoom: "zoom", zoomEnd: "zoomEnd", zoomStart: "zoomStart", legendItemClick: "legendItemClick", drilldownLevelChange: "drilldownLevelChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChartComponent, isStandalone: true, selector: "kendo-chart", inputs: { pannable: "pannable", renderAs: "renderAs", seriesColors: "seriesColors", subtitle: "subtitle", title: "title", noData: "noData", observeStyles: "observeStyles", transitions: "transitions", zoomable: "zoomable", axisDefaults: "axisDefaults", categoryAxis: "categoryAxis", chartArea: "chartArea", legend: "legend", panes: "panes", paneDefaults: "paneDefaults", plotArea: "plotArea", series: "series", seriesDefaults: "seriesDefaults", tooltip: "tooltip", valueAxis: "valueAxis", xAxis: "xAxis", yAxis: "yAxis", resizeRateLimit: "resizeRateLimit", popupSettings: "popupSettings", drilldownLevel: "drilldownLevel" }, outputs: { axisLabelClick: "axisLabelClick", drag: "drag", dragEnd: "dragEnd", dragStart: "dragStart", legendItemHover: "legendItemHover", legendItemLeave: "legendItemLeave", noteClick: "noteClick", noteHover: "noteHover", noteLeave: "noteLeave", paneRender: "paneRender", plotAreaClick: "plotAreaClick", plotAreaHover: "plotAreaHover", plotAreaLeave: "plotAreaLeave", render: "render", select: "select", selectEnd: "selectEnd", selectStart: "selectStart", seriesClick: "seriesClick", drilldown: "drilldown", seriesHover: "seriesHover", seriesOver: "seriesOver", seriesLeave: "seriesLeave", zoom: "zoom", zoomEnd: "zoomEnd", zoomStart: "zoomStart", legendItemClick: "legendItemClick", drilldownLevelChange: "drilldownLevelChange" }, providers: [
             ConfigurationService,
             TooltipTemplateService,
             InstanceEventService$1,
@@ -3982,6 +4002,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], noData: [{
                 type: Input
+            }], observeStyles: [{
+                type: Input
             }], transitions: [{
                 type: Input
             }], zoomable: [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-charts",
-  "version": "20.1.0-develop.9",
+  "version": "20.1.0",
   "description": "Kendo UI Charts for Angular - A comprehensive package for creating beautiful and interactive data visualization. Every chart type, stock charts, and sparklines are included.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -42,7 +42,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1759490945,
+      "publishDate": 1761117335,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -53,18 +53,18 @@
     "@angular/platform-browser": "16 - 20",
     "@progress/kendo-drawing": "^1.21.0",
     "@progress/kendo-licensing": "^1.7.0",
-    "@progress/kendo-angular-common": "20.1.0-develop.9",
-    "@progress/kendo-angular-intl": "20.1.0-develop.9",
-    "@progress/kendo-angular-icons": "20.1.0-develop.9",
-    "@progress/kendo-angular-l10n": "20.1.0-develop.9",
-    "@progress/kendo-angular-popup": "20.1.0-develop.9",
-    "@progress/kendo-angular-navigation": "20.1.0-develop.9",
+    "@progress/kendo-angular-common": "20.1.0",
+    "@progress/kendo-angular-intl": "20.1.0",
+    "@progress/kendo-angular-icons": "20.1.0",
+    "@progress/kendo-angular-l10n": "20.1.0",
+    "@progress/kendo-angular-popup": "20.1.0",
+    "@progress/kendo-angular-navigation": "20.1.0",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "20.1.0-develop.9",
-    "@progress/kendo-charts": "2.8.0",
+    "@progress/kendo-angular-schematics": "20.1.0",
+    "@progress/kendo-charts": "2.9.0",
     "@progress/kendo-svg-icons": "^4.0.0"
   },
   "schematics": "./schematics/collection.json",