@progress/kendo-angular-charts 17.0.0-develop.4 → 17.0.0-develop.41

package/{esm2020 → esm2022}/chart.component.mjs

@@ -13,6 +13,7 @@ import { combineLatest } from 'rxjs';
 import { auditTime, tap } from 'rxjs/operators';
 import './chart-defaults';
 import { DonutCenterTemplateDirective } from './chart/donut-center-template.directive';
+import { NoDataTemplateDirective } from './chart/no-data-template.directive';
 import { SeriesItemComponent } from './chart/series-item.component';
 import { CrosshairTooltipsContainerComponent } from './chart/tooltip/crosshair-tooltips-container.component';
 import { TooltipPopupComponent } from './chart/tooltip/tooltip-popup.component';
@@ -31,6 +32,7 @@ import { SeriesComponent } from './chart/series.component';
 import { DrilldownEvent } from './events/drilldown-event';
 import { hasObservers } from './common/has-observers';
 import { NgIf, NgStyle, NgTemplateOutlet } from '@angular/common';
+import { LocalizedChartMessagesDirective } from './chart/localization/localized-messages.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "./common/configuration.service";
 import * as i2 from "./common/theme.service";
@@ -76,161 +78,181 @@ import * as i5 from "./events/instance-event.service";
  * ```
  */
 export class ChartComponent {
-    constructor(configurationService, themeService, element, intl, localizationService, ngZone, instanceEventService, changeDetector, renderer) {
-        this.configurationService = configurationService;
-        this.themeService = themeService;
-        this.element = element;
-        this.intl = intl;
-        this.localizationService = localizationService;
-        this.ngZone = ngZone;
-        this.instanceEventService = instanceEventService;
-        this.changeDetector = changeDetector;
-        this.renderer = renderer;
-        /**
-         * Fires when the user clicks an axis label ([see example](slug:events_chart)).
-         */
-        this.axisLabelClick = new EventEmitter();
-        /**
-         * Fires as long as the user is dragging the Chart with the mouse or through swipe gestures.
-         */
-        this.drag = new EventEmitter();
-        /**
-         * Fires when the user stops dragging the Chart.
-         */
-        this.dragEnd = new EventEmitter();
-        /**
-         * Fires when the user starts dragging the Chart.
-         */
-        this.dragStart = new EventEmitter();
-        /**
-         * Fires when the user hovers over a legend item ([see example](slug:events_chart)).
-         */
-        this.legendItemHover = new EventEmitter();
-        /**
-         * Fires when the cursor leaves a legend item.
-         */
-        this.legendItemLeave = new EventEmitter();
-        /**
-         * Fires when the user clicks a note.
-         */
-        this.noteClick = new EventEmitter();
-        /**
-         * Fires when the user hovers over a note.
-         */
-        this.noteHover = new EventEmitter();
-        /**
-         * Fires when the cursor leaves a note.
-         */
-        this.noteLeave = new EventEmitter();
-        /**
-         * Fires when a pane is rendered because the Chart is rendered, performs panning or zooming, or is exported with different options.
-         * The event is used to render custom visuals in the panes.
-         */
-        this.paneRender = new EventEmitter();
-        /**
-         * Fires when the user clicks the plot area ([see example](slug:events_chart)).
-         * The `click` event is triggered by the `tap` and `contextmenu` events.
-         * To distinguish between the original events, inspect the `e.originalEvent.type` field.
-         */
-        this.plotAreaClick = new EventEmitter();
-        /**
-         * Fires when the user hovers the plot area ([see example](slug:events_chart)).
-         */
-        this.plotAreaHover = new EventEmitter();
-        /**
-         * Fires when the cursor leaves the plot area.
-         */
-        this.plotAreaLeave = new EventEmitter();
-        /**
-         * Fires when the Chart is ready to render on screen ([see example](slug:events_chart)).
-         * For example, you can use it to remove loading indicators.
-         * Any changes made to the options are ignored.
-         */
-        this.render = new EventEmitter();
-        /**
-         * Fires when the user modifies the selection.
-         *
-         * The range units include a generic axis category index (0-based) and a date axis represented by a date instance.
-         */
-        this.select = new EventEmitter();
-        /**
-         * Fires when the user completes the modification of the selection.
-         *
-         * The range units include a generic axis category index (0-based) and a date axis represented by a date instance.
-         */
-        this.selectEnd = new EventEmitter();
-        /**
-         * Fires when the user starts modifying the axis selection.
-         *
-         * The range units include a generic axis category index (0-based) and a date axis represented by a date instance.
-         */
-        this.selectStart = new EventEmitter();
-        /**
-         * Fires when the user clicks the Chart series.
-         *
-         * The `click` event will be triggered by the `tap` and `contextmenu` events ([see example](slug:events_chart)).
-         * To distinguish between the original events, inspect the `e.originalEvent.type` field.
-         */
-        this.seriesClick = new EventEmitter();
-        /**
-         * Fires when the user when the user wants to drill down on a specific point.
-         */
-        this.drilldown = new EventEmitter();
-        /**
-         * Fires when the user hovers the Chart series ([see example](slug:events_chart)).
-         */
-        this.seriesHover = new EventEmitter();
-        /**
-         * Fires when the cursor enters a series.
-         */
-        this.seriesOver = new EventEmitter();
-        /**
-         * Fires when the cursor leaves a series.
-         */
-        this.seriesLeave = new EventEmitter();
-        /**
-         * Fires as long as the user is zooming the Chart by using the mousewheel operation.
-         */
-        this.zoom = new EventEmitter();
-        /**
-         * Fires when the user stops zooming the Chart.
-         */
-        this.zoomEnd = new EventEmitter();
-        /**
-         * Fires when the user uses the mousewheel to zoom the Chart.
-         */
-        this.zoomStart = new EventEmitter();
-        /**
-         * Fires when a legend item is clicked before the selected series visibility is toggled.
-         * Can be prevented.
-         */
-        this.legendItemClick = new EventEmitter();
-        /**
-         * Fires when the drill-down level has changed.
-         */
-        this.drilldownLevelChange = new EventEmitter();
-        /**
-         * Limits the automatic resizing of the Chart. Sets the maximum number of times per second
-         * that the component redraws its content when the size of its container changes.
-         * Defaults to `10`. To disable the automatic resizing, set it to `0`.
-         *
-         * @default 10
-         */
-        this.resizeRateLimit = 10;
-        /**
-         * @hidden
-         */
-        this.showLicenseWatermark = false;
-        this.theme = null;
-        this.suppressTransitions = false;
-        this.rtl = false;
-        this.hostClasses = ['k-chart', 'k-widget'];
-        this.drilldownState = [];
-        const isValid = validatePackage(packageMetadata);
-        this.showLicenseWatermark = shouldShowValidationUI(isValid);
-        this.themeService.loadTheme();
-        this.refreshWait();
-    }
+    configurationService;
+    themeService;
+    element;
+    intl;
+    localizationService;
+    ngZone;
+    instanceEventService;
+    changeDetector;
+    renderer;
+    /**
+     * Specifies if the Chart can be panned.
+     * Panning is not available for the `Donut`, `Pie`, `Funnel`, `Pyramid`, `Polar`, and `Radar` series.
+     * @default false
+     */
+    pannable;
+    renderAs;
+    seriesColors;
+    subtitle;
+    title;
+    noData = true;
+    /**
+     * If set to `true`, the Chart plays animations when it displays the series.
+     * By default, animations are enabled.
+     * @default true
+     */
+    transitions;
+    zoomable;
+    axisDefaults;
+    categoryAxis;
+    chartArea;
+    legend;
+    panes;
+    paneDefaults;
+    plotArea;
+    series;
+    seriesDefaults;
+    tooltip;
+    valueAxis;
+    xAxis;
+    yAxis;
+    /**
+     * Fires when the user clicks an axis label ([see example](slug:events_chart)).
+     */
+    axisLabelClick = new EventEmitter();
+    /**
+     * Fires as long as the user is dragging the Chart with the mouse or through swipe gestures.
+     */
+    drag = new EventEmitter();
+    /**
+     * Fires when the user stops dragging the Chart.
+     */
+    dragEnd = new EventEmitter();
+    /**
+     * Fires when the user starts dragging the Chart.
+     */
+    dragStart = new EventEmitter();
+    /**
+     * Fires when the user hovers over a legend item ([see example](slug:events_chart)).
+     */
+    legendItemHover = new EventEmitter();
+    /**
+     * Fires when the cursor leaves a legend item.
+     */
+    legendItemLeave = new EventEmitter();
+    /**
+     * Fires when the user clicks a note.
+     */
+    noteClick = new EventEmitter();
+    /**
+     * Fires when the user hovers over a note.
+     */
+    noteHover = new EventEmitter();
+    /**
+     * Fires when the cursor leaves a note.
+     */
+    noteLeave = new EventEmitter();
+    /**
+     * Fires when a pane is rendered because the Chart is rendered, performs panning or zooming, or is exported with different options.
+     * The event is used to render custom visuals in the panes.
+     */
+    paneRender = new EventEmitter();
+    /**
+     * Fires when the user clicks the plot area ([see example](slug:events_chart)).
+     * The `click` event is triggered by the `tap` and `contextmenu` events.
+     * To distinguish between the original events, inspect the `e.originalEvent.type` field.
+     */
+    plotAreaClick = new EventEmitter();
+    /**
+     * Fires when the user hovers the plot area ([see example](slug:events_chart)).
+     */
+    plotAreaHover = new EventEmitter();
+    /**
+     * Fires when the cursor leaves the plot area.
+     */
+    plotAreaLeave = new EventEmitter();
+    /**
+     * Fires when the Chart is ready to render on screen ([see example](slug:events_chart)).
+     * For example, you can use it to remove loading indicators.
+     * Any changes made to the options are ignored.
+     */
+    render = new EventEmitter();
+    /**
+     * Fires when the user modifies the selection.
+     *
+     * The range units include a generic axis category index (0-based) and a date axis represented by a date instance.
+     */
+    select = new EventEmitter();
+    /**
+     * Fires when the user completes the modification of the selection.
+     *
+     * The range units include a generic axis category index (0-based) and a date axis represented by a date instance.
+     */
+    selectEnd = new EventEmitter();
+    /**
+     * Fires when the user starts modifying the axis selection.
+     *
+     * The range units include a generic axis category index (0-based) and a date axis represented by a date instance.
+     */
+    selectStart = new EventEmitter();
+    /**
+     * Fires when the user clicks the Chart series.
+     *
+     * The `click` event will be triggered by the `tap` and `contextmenu` events ([see example](slug:events_chart)).
+     * To distinguish between the original events, inspect the `e.originalEvent.type` field.
+     */
+    seriesClick = new EventEmitter();
+    /**
+     * Fires when the user when the user wants to drill down on a specific point.
+     */
+    drilldown = new EventEmitter();
+    /**
+     * Fires when the user hovers the Chart series ([see example](slug:events_chart)).
+     */
+    seriesHover = new EventEmitter();
+    /**
+     * Fires when the cursor enters a series.
+     */
+    seriesOver = new EventEmitter();
+    /**
+     * Fires when the cursor leaves a series.
+     */
+    seriesLeave = new EventEmitter();
+    /**
+     * Fires as long as the user is zooming the Chart by using the mousewheel operation.
+     */
+    zoom = new EventEmitter();
+    /**
+     * Fires when the user stops zooming the Chart.
+     */
+    zoomEnd = new EventEmitter();
+    /**
+     * Fires when the user uses the mousewheel to zoom the Chart.
+     */
+    zoomStart = new EventEmitter();
+    /**
+     * Fires when a legend item is clicked before the selected series visibility is toggled.
+     * Can be prevented.
+     */
+    legendItemClick = new EventEmitter();
+    /**
+     * Fires when the drill-down level has changed.
+     */
+    drilldownLevelChange = new EventEmitter();
+    /**
+     * Limits the automatic resizing of the Chart. Sets the maximum number of times per second
+     * that the component redraws its content when the size of its container changes.
+     * Defaults to `10`. To disable the automatic resizing, set it to `0`.
+     *
+     * @default 10
+     */
+    resizeRateLimit = 10;
+    /**
+     * The settings for the tooltip popup.
+     */
+    popupSettings;
     /**
      * Gets or sets the current drill-down level for [Drilldown Charts](slug:drilldown_chart_charts).
      *
@@ -253,6 +275,59 @@ export class ChartComponent {
         this.seriesComponents.toArray().slice(-removed.length - 1).forEach(series => series.hidden = false);
         this.drilldownLevelChange.emit(level);
     }
+    /**
+     * The Drawing `Surface` of the Chart.
+     */
+    surface;
+    seriesCollectionComponent;
+    seriesComponents;
+    donutCenterTemplate;
+    noDataTemplate;
+    tooltipInstance;
+    crossahirTooltips;
+    surfaceElement;
+    /**
+     * @hidden
+     */
+    donutCenterStyle;
+    /**
+     * @hidden
+     */
+    messageFor(key) {
+        return this.localizationService.get(key);
+    }
+    /**
+     * @hidden
+     */
+    showLicenseWatermark = false;
+    instance;
+    options;
+    theme = null;
+    optionsChange;
+    suppressTransitions = false;
+    resizeTimeout;
+    redrawTimeout;
+    domSubscriptions;
+    destroyed;
+    subscriptions;
+    rtl = false;
+    hostClasses = ['k-chart', 'k-widget'];
+    drilldownState = [];
+    constructor(configurationService, themeService, element, intl, localizationService, ngZone, instanceEventService, changeDetector, renderer) {
+        this.configurationService = configurationService;
+        this.themeService = themeService;
+        this.element = element;
+        this.intl = intl;
+        this.localizationService = localizationService;
+        this.ngZone = ngZone;
+        this.instanceEventService = instanceEventService;
+        this.changeDetector = changeDetector;
+        this.renderer = renderer;
+        const isValid = validatePackage(packageMetadata);
+        this.showLicenseWatermark = shouldShowValidationUI(isValid);
+        this.themeService.loadTheme();
+        this.refreshWait();
+    }
     ngOnInit() {
         if (this.element) {
             this.hostClasses.forEach(name => {
@@ -724,19 +799,32 @@ export class ChartComponent {
     get isRTL() {
         return Boolean(this.localizationService.rtl);
     }
-}
-ChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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 });
-ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartComponent, isStandalone: true, selector: "kendo-chart", inputs: { pannable: "pannable", renderAs: "renderAs", seriesColors: "seriesColors", subtitle: "subtitle", title: "title", 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,
-        LocalizationService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.chart'
-        }
-    ], queries: [{ propertyName: "donutCenterTemplate", first: true, predicate: DonutCenterTemplateDirective, descendants: true }, { propertyName: "seriesCollectionComponent", predicate: SeriesComponent }, { propertyName: "seriesComponents", predicate: SeriesItemComponent, descendants: true }], viewQueries: [{ propertyName: "tooltipInstance", first: true, predicate: TooltipPopupComponent, descendants: true, static: true }, { propertyName: "crossahirTooltips", first: true, predicate: CrosshairTooltipsContainerComponent, descendants: true, static: true }, { propertyName: "surfaceElement", first: true, predicate: ["surface"], descendants: true, static: true }], exportAs: ["kendoChart"], usesOnChanges: true, ngImport: i0, template: `
-    <div #surface class="k-chart-surface"></div>
+    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: [
+            ConfigurationService,
+            TooltipTemplateService,
+            InstanceEventService,
+            LocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.chart'
+            }
+        ], queries: [{ propertyName: "donutCenterTemplate", first: true, predicate: DonutCenterTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "seriesCollectionComponent", predicate: SeriesComponent }, { propertyName: "seriesComponents", predicate: SeriesItemComponent, descendants: true }], viewQueries: [{ propertyName: "tooltipInstance", first: true, predicate: TooltipPopupComponent, descendants: true, static: true }, { propertyName: "crossahirTooltips", first: true, predicate: CrosshairTooltipsContainerComponent, descendants: true, static: true }, { propertyName: "surfaceElement", first: true, predicate: ["surface"], descendants: true, static: true }], exportAs: ["kendoChart"], usesOnChanges: true, ngImport: i0, template: `
+    <ng-container
+        kendoChartLocalizedMessages
+        i18n-noData="kendo.chart.noData|The message to display when no series are defined, or all series are empty"
+        noData="No data available"
+    ></ng-container>
+    <div #surface class="k-chart-surface">
+        <div *ngIf="noData" class='k-chart-overlay' [style.display]="'none'">
+            <div class='k-no-data'>
+                <ng-template *ngIf="noDataTemplate; else noDataMessage" [ngTemplateOutlet]="noDataTemplate.templateRef"></ng-template>
+                <ng-template #noDataMessage>
+                    {{ messageFor('noData') }}
+                </ng-template>
+            </div>
+        </div>
+    </div>
     <kendo-chart-crosshair-tooltips-container [popupSettings]="popupSettings">
     </kendo-chart-crosshair-tooltips-container>
     <kendo-chart-tooltip-popup (leave)="tooltipMouseleave($event)" [popupSettings]="popupSettings">
@@ -747,8 +835,9 @@ ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version
     </div>
 
     <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
-  `, isInline: true, dependencies: [{ kind: "component", type: CrosshairTooltipsContainerComponent, selector: "kendo-chart-crosshair-tooltips-container", inputs: ["popupSettings"] }, { kind: "component", type: TooltipPopupComponent, selector: "kendo-chart-tooltip-popup", inputs: ["animate", "classNames", "popupSettings", "wrapperClass"], outputs: ["leave"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedChartMessagesDirective, selector: "[kendoChartLocalizedMessages]" }, { kind: "component", type: CrosshairTooltipsContainerComponent, selector: "kendo-chart-crosshair-tooltips-container", inputs: ["popupSettings"] }, { kind: "component", type: TooltipPopupComponent, selector: "kendo-chart-tooltip-popup", inputs: ["animate", "classNames", "wrapperClass"], outputs: ["leave"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChartComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -765,7 +854,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     ],
                     selector: 'kendo-chart',
                     template: `
-    <div #surface class="k-chart-surface"></div>
+    <ng-container
+        kendoChartLocalizedMessages
+        i18n-noData="kendo.chart.noData|The message to display when no series are defined, or all series are empty"
+        noData="No data available"
+    ></ng-container>
+    <div #surface class="k-chart-surface">
+        <div *ngIf="noData" class='k-chart-overlay' [style.display]="'none'">
+            <div class='k-no-data'>
+                <ng-template *ngIf="noDataTemplate; else noDataMessage" [ngTemplateOutlet]="noDataTemplate.templateRef"></ng-template>
+                <ng-template #noDataMessage>
+                    {{ messageFor('noData') }}
+                </ng-template>
+            </div>
+        </div>
+    </div>
     <kendo-chart-crosshair-tooltips-container [popupSettings]="popupSettings">
     </kendo-chart-crosshair-tooltips-container>
     <kendo-chart-tooltip-popup (leave)="tooltipMouseleave($event)" [popupSettings]="popupSettings">
@@ -778,7 +881,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
     <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
   `,
                     standalone: true,
-                    imports: [CrosshairTooltipsContainerComponent, TooltipPopupComponent, ResizeSensorComponent, NgIf, NgStyle, NgTemplateOutlet, WatermarkOverlayComponent]
+                    imports: [LocalizedChartMessagesDirective, CrosshairTooltipsContainerComponent, TooltipPopupComponent, ResizeSensorComponent, NgIf, NgStyle, NgTemplateOutlet, WatermarkOverlayComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i1.ConfigurationService }, { type: i2.ThemeService }, { type: i0.ElementRef }, { type: i3.IntlService }, { type: i4.LocalizationService }, { type: i0.NgZone }, { type: i5.InstanceEventService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { pannable: [{
                 type: Input
@@ -790,6 +893,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], title: [{
                 type: Input
+            }], noData: [{
+                type: Input
             }], transitions: [{
                 type: Input
             }], zoomable: [{
@@ -889,6 +994,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], donutCenterTemplate: [{
                 type: ContentChild,
                 args: [DonutCenterTemplateDirective, { static: false }]
+            }], noDataTemplate: [{
+                type: ContentChild,
+                args: [NoDataTemplateDirective, { static: false }]
             }], tooltipInstance: [{
                 type: ViewChild,
                 args: [TooltipPopupComponent, { static: true }]

package/{esm2020 → esm2022}/chart.directives.mjs

@@ -4,6 +4,9 @@
 *-------------------------------------------------------------------------------------------*/
 import { ChartComponent } from './chart.component';
 import { DonutCenterTemplateDirective } from './chart/donut-center-template.directive';
+import { NoDataTemplateDirective } from './chart/no-data-template.directive';
+import { ChartCustomMessagesComponent } from './chart/localization/custom-messages.component';
+import { LocalizedChartMessagesDirective } from './chart/localization/localized-messages.directive';
 import { XAxisComponent } from './chart/x-axis.component';
 import { XAxisCrosshairComponent } from './chart/x-axis-item/crosshair.component';
 import { XAxisCrosshairTooltipComponent } from './chart/x-axis-item/crosshair.tooltip.component';
@@ -24,4 +27,4 @@ import { YAxisNotesLabelComponent } from './chart/y-axis-item/notes.label.compon
 import { YAxisTitleComponent } from './chart/y-axis-item/title.component';
 import { ZoomableComponent } from './chart/zoomable.component';
 // Re-exports
-export { ChartComponent, DonutCenterTemplateDirective, XAxisComponent, XAxisCrosshairComponent, XAxisCrosshairTooltipComponent, XAxisItemComponent, XAxisLabelsComponent, XAxisNotesComponent, XAxisNotesIconComponent, XAxisNotesLabelComponent, XAxisTitleComponent, YAxisComponent, YAxisCrosshairComponent, YAxisCrosshairTooltipComponent, YAxisItemComponent, YAxisLabelsComponent, YAxisNotesComponent, YAxisNotesIconComponent, YAxisNotesLabelComponent, YAxisTitleComponent, ZoomableComponent };
+export { ChartComponent, DonutCenterTemplateDirective, NoDataTemplateDirective, ChartCustomMessagesComponent, LocalizedChartMessagesDirective, XAxisComponent, XAxisCrosshairComponent, XAxisCrosshairTooltipComponent, XAxisItemComponent, XAxisLabelsComponent, XAxisNotesComponent, XAxisNotesIconComponent, XAxisNotesLabelComponent, XAxisTitleComponent, YAxisComponent, YAxisCrosshairComponent, YAxisCrosshairTooltipComponent, YAxisItemComponent, YAxisLabelsComponent, YAxisNotesComponent, YAxisNotesIconComponent, YAxisNotesLabelComponent, YAxisTitleComponent, ZoomableComponent };