@syncfusion/ej2-angular-charts 32.2.9 → 33.1.44

package/fesm2015/syncfusion-ej2-angular-charts.mjs

@@ -2,12 +2,12 @@ import * as i0 from '@angular/core';
 import { Directive, ContentChildren, ContentChild, Component, NgModule, ChangeDetectionStrategy } from '@angular/core';
 import { ComplexBase, setValue, ArrayBase, Template, ComponentBase, ComponentMixins } from '@syncfusion/ej2-angular-base';
 import { __decorate } from 'tslib';
-import { Chart, LineSeries, ScatterSeries, ColumnSeries, SplineSeries, SplineAreaSeries, StripLine, AreaSeries, ScrollBar, StepLineSeries, StepAreaSeries, StackingColumnSeries, StackingLineSeries, StackingAreaSeries, StackingStepAreaSeries, BarSeries, StackingBarSeries, RangeColumnSeries, BubbleSeries, Tooltip, Crosshair, Category, DateTime, Logarithmic, Legend, Zoom, DataLabel, Selection, ChartAnnotation, HiloSeries, HiloOpenCloseSeries, WaterfallSeries, RangeAreaSeries, RangeStepAreaSeries, SplineRangeAreaSeries, CandleSeries, PolarSeries, RadarSeries, SmaIndicator, TmaIndicator, EmaIndicator, AccumulationDistributionIndicator, MacdIndicator, AtrIndicator, RsiIndicator, MomentumIndicator, StochasticIndicator, BollingerBands, BoxAndWhiskerSeries, HistogramSeries, ErrorBar, Trendlines, DateTimeCategory, MultiColoredLineSeries, MultiColoredAreaSeries, MultiLevelLabel, ParetoSeries, Export, DataEditing, Highlight, LastValueLabel, AccumulationChart, PieSeries, FunnelSeries, PyramidSeries, AccumulationTooltip, AccumulationLegend, AccumulationSelection, AccumulationHighlight, AccumulationDataLabel, AccumulationAnnotation, RangeNavigator, RangeTooltip, PeriodSelector, Sparkline, SparklineTooltip, Smithchart, SmithchartLegend, TooltipRender, StockChart, StockLegend, BulletChart, BulletTooltip, BulletChartLegend, Chart3D, ColumnSeries3D, StackingColumnSeries3D, BarSeries3D, StackingBarSeries3D, Category3D, DateTime3D, DateTimeCategory3D, Logarithmic3D, Tooltip3D, Legend3D, DataLabel3D, Selection3D, Export3D, Highlight3D, CircularChart3D, PieSeries3D, CircularChartTooltip3D, CircularChartLegend3D, CircularChartSelection3D, CircularChartDataLabel3D, CircularChartHighlight3D, CircularChartExport3D } from '@syncfusion/ej2-charts';
+import { Chart, LineSeries, ScatterSeries, ColumnSeries, SplineSeries, SplineAreaSeries, StripLine, AreaSeries, ScrollBar, StepLineSeries, StepAreaSeries, StackingColumnSeries, StackingLineSeries, StackingAreaSeries, StackingStepAreaSeries, BarSeries, StackingBarSeries, RangeColumnSeries, BubbleSeries, Tooltip, Crosshair, Category, DateTime, Logarithmic, Legend, Zoom, DataLabel, Selection, ChartAnnotation, HiloSeries, HiloOpenCloseSeries, WaterfallSeries, RangeAreaSeries, RangeStepAreaSeries, SplineRangeAreaSeries, CandleSeries, PolarSeries, RadarSeries, SmaIndicator, TmaIndicator, EmaIndicator, AccumulationDistributionIndicator, MacdIndicator, AtrIndicator, RsiIndicator, MomentumIndicator, StochasticIndicator, BollingerBands, BoxAndWhiskerSeries, HistogramSeries, ErrorBar, Trendlines, DateTimeCategory, MultiColoredLineSeries, MultiColoredAreaSeries, MultiLevelLabel, ParetoSeries, Export, DataEditing, Highlight, LastValueLabel, SeriesLabel, AccumulationChart, PieSeries, FunnelSeries, PyramidSeries, AccumulationTooltip, AccumulationLegend, AccumulationSelection, AccumulationHighlight, AccumulationDataLabel, AccumulationAnnotation, RangeNavigator, RangeTooltip, PeriodSelector, Sparkline, SparklineTooltip, Smithchart, SmithchartLegend, TooltipRender, StockChart, StockLegend, BulletChart, BulletTooltip, BulletChartLegend, Chart3D, ColumnSeries3D, StackingColumnSeries3D, BarSeries3D, StackingBarSeries3D, Category3D, DateTime3D, DateTimeCategory3D, Logarithmic3D, Tooltip3D, Legend3D, DataLabel3D, Selection3D, Export3D, Highlight3D, CircularChart3D, PieSeries3D, CircularChartTooltip3D, CircularChartLegend3D, CircularChartSelection3D, CircularChartDataLabel3D, CircularChartHighlight3D, CircularChartExport3D, Sankey, SankeyLegend, SankeyTooltip, SankeyHighlight, SankeyExport } from '@syncfusion/ej2-charts';
 export * from '@syncfusion/ej2-charts';
 import { CommonModule } from '@angular/common';
 
-let input$y = ['accessibility', 'animation', 'backwardForecast', 'dashArray', 'enableTooltip', 'fill', 'forwardForecast', 'intercept', 'legendShape', 'marker', 'name', 'period', 'polynomialOrder', 'type', 'visible', 'width'];
-let outputs$H = [];
+let input$A = ['accessibility', 'animation', 'backwardForecast', 'dashArray', 'enableTooltip', 'fill', 'forwardForecast', 'intercept', 'legendShape', 'linearGradient', 'marker', 'name', 'period', 'polynomialOrder', 'radialGradient', 'type', 'visible', 'width'];
+let outputs$K = [];
 /**
  * Series Directive
  * ```html
@@ -25,18 +25,18 @@ class TrendlineDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$H);
-        this.directivePropList = input$y;
+        this.registerEvents(outputs$K);
+        this.directivePropList = input$A;
     }
 }
 TrendlineDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TrendlineDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-TrendlineDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: TrendlineDirective, selector: "e-series>e-trendlines>e-trendline", inputs: { accessibility: "accessibility", animation: "animation", backwardForecast: "backwardForecast", dashArray: "dashArray", enableTooltip: "enableTooltip", fill: "fill", forwardForecast: "forwardForecast", intercept: "intercept", legendShape: "legendShape", marker: "marker", name: "name", period: "period", polynomialOrder: "polynomialOrder", type: "type", visible: "visible", width: "width" }, usesInheritance: true, ngImport: i0 });
+TrendlineDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: TrendlineDirective, selector: "e-series>e-trendlines>e-trendline", inputs: { accessibility: "accessibility", animation: "animation", backwardForecast: "backwardForecast", dashArray: "dashArray", enableTooltip: "enableTooltip", fill: "fill", forwardForecast: "forwardForecast", intercept: "intercept", legendShape: "legendShape", linearGradient: "linearGradient", marker: "marker", name: "name", period: "period", polynomialOrder: "polynomialOrder", radialGradient: "radialGradient", type: "type", visible: "visible", width: "width" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: TrendlineDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'e-series>e-trendlines>e-trendline',
-                    inputs: input$y,
-                    outputs: outputs$H,
+                    inputs: input$A,
+                    outputs: outputs$K,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
@@ -61,8 +61,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-let input$x = ['color', 'dashArray', 'value'];
-let outputs$G = [];
+let input$z = ['color', 'dashArray', 'value'];
+let outputs$J = [];
 /**
  * Series Directive
  * ```html
@@ -80,8 +80,8 @@ class SegmentDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$G);
-        this.directivePropList = input$x;
+        this.registerEvents(outputs$J);
+        this.directivePropList = input$z;
     }
 }
 SegmentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SegmentDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -90,8 +90,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'e-series>e-segments>e-segment',
-                    inputs: input$x,
-                    outputs: outputs$G,
+                    inputs: input$z,
+                    outputs: outputs$J,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
@@ -116,8 +116,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-let input$w = ['accessibility', 'animation', 'bearFillColor', 'binInterval', 'border', 'boxPlotMode', 'bullFillColor', 'cardinalSplineTension', 'close', 'colorName', 'columnFacet', 'columnSpacing', 'columnWidth', 'columnWidthInPixel', 'connector', 'cornerRadius', 'dashArray', 'dataSource', 'dragSettings', 'drawType', 'emptyPointSettings', 'enableComplexProperty', 'enableSolidCandles', 'enableTooltip', 'errorBar', 'fill', 'groupName', 'high', 'intermediateSumIndexes', 'isClosed', 'lastValueLabel', 'legendImageUrl', 'legendShape', 'low', 'marker', 'maxRadius', 'minRadius', 'name', 'negativeFillColor', 'noRisers', 'nonHighlightStyle', 'opacity', 'open', 'paretoOptions', 'pointColorMapping', 'query', 'segmentAxis', 'segments', 'selectionStyle', 'showMean', 'showNearestTooltip', 'showNormalDistribution', 'showOutliers', 'size', 'splineType', 'stackingGroup', 'step', 'sumIndexes', 'summaryFillColor', 'tooltipFormat', 'tooltipMappingName', 'trendlines', 'type', 'unSelectedStyle', 'visible', 'volume', 'width', 'xAxisName', 'xName', 'yAxisName', 'yName', 'zOrder'];
-let outputs$F = [];
+let input$y = ['accessibility', 'animation', 'bearFillColor', 'binInterval', 'border', 'boxPlotMode', 'bullFillColor', 'cardinalSplineTension', 'close', 'colorName', 'columnFacet', 'columnSpacing', 'columnWidth', 'columnWidthInPixel', 'connector', 'cornerRadius', 'dashArray', 'dataSource', 'dragSettings', 'drawType', 'emptyPointSettings', 'enableComplexProperty', 'enableSolidCandles', 'enableTooltip', 'errorBar', 'fill', 'groupName', 'high', 'intermediateSumIndexes', 'isClosed', 'labelSettings', 'lastValueLabel', 'legendImageUrl', 'legendShape', 'linearGradient', 'low', 'marker', 'maxRadius', 'minRadius', 'name', 'negativeFillColor', 'noRisers', 'nonHighlightStyle', 'opacity', 'open', 'paretoOptions', 'pointColorMapping', 'query', 'radialGradient', 'segmentAxis', 'segments', 'selectionStyle', 'showMean', 'showNearestTooltip', 'showNormalDistribution', 'showOutliers', 'size', 'splineType', 'stackingGroup', 'step', 'sumIndexes', 'summaryFillColor', 'tooltipFormat', 'tooltipMappingName', 'trendlines', 'type', 'unSelectedStyle', 'visible', 'volume', 'width', 'xAxisName', 'xName', 'yAxisName', 'yName', 'zOrder'];
+let outputs$I = [];
 /**
  * Series Directive
  * ```html
@@ -132,12 +132,12 @@ class SeriesDirective extends ComplexBase {
         this.viewContainerRef = viewContainerRef;
         this.tags = ['trendlines', 'segments'];
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$F);
-        this.directivePropList = input$w;
+        this.registerEvents(outputs$I);
+        this.directivePropList = input$y;
     }
 }
 SeriesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SeriesDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-SeriesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: SeriesDirective, selector: "e-series-collection>e-series", inputs: { accessibility: "accessibility", animation: "animation", bearFillColor: "bearFillColor", binInterval: "binInterval", border: "border", boxPlotMode: "boxPlotMode", bullFillColor: "bullFillColor", cardinalSplineTension: "cardinalSplineTension", close: "close", colorName: "colorName", columnFacet: "columnFacet", columnSpacing: "columnSpacing", columnWidth: "columnWidth", columnWidthInPixel: "columnWidthInPixel", connector: "connector", cornerRadius: "cornerRadius", dashArray: "dashArray", dataSource: "dataSource", dragSettings: "dragSettings", drawType: "drawType", emptyPointSettings: "emptyPointSettings", enableComplexProperty: "enableComplexProperty", enableSolidCandles: "enableSolidCandles", enableTooltip: "enableTooltip", errorBar: "errorBar", fill: "fill", groupName: "groupName", high: "high", intermediateSumIndexes: "intermediateSumIndexes", isClosed: "isClosed", lastValueLabel: "lastValueLabel", legendImageUrl: "legendImageUrl", legendShape: "legendShape", low: "low", marker: "marker", maxRadius: "maxRadius", minRadius: "minRadius", name: "name", negativeFillColor: "negativeFillColor", noRisers: "noRisers", nonHighlightStyle: "nonHighlightStyle", opacity: "opacity", open: "open", paretoOptions: "paretoOptions", pointColorMapping: "pointColorMapping", query: "query", segmentAxis: "segmentAxis", segments: "segments", selectionStyle: "selectionStyle", showMean: "showMean", showNearestTooltip: "showNearestTooltip", showNormalDistribution: "showNormalDistribution", showOutliers: "showOutliers", size: "size", splineType: "splineType", stackingGroup: "stackingGroup", step: "step", sumIndexes: "sumIndexes", summaryFillColor: "summaryFillColor", tooltipFormat: "tooltipFormat", tooltipMappingName: "tooltipMappingName", trendlines: "trendlines", type: "type", unSelectedStyle: "unSelectedStyle", visible: "visible", volume: "volume", width: "width", xAxisName: "xAxisName", xName: "xName", yAxisName: "yAxisName", yName: "yName", zOrder: "zOrder" }, queries: [{ propertyName: "dataLabel_template", first: true, predicate: ["dataLabelTemplate"], descendants: true }, { propertyName: "childTrendlines", first: true, predicate: TrendlinesDirective, descendants: true }, { propertyName: "childSegments", first: true, predicate: SegmentsDirective, descendants: true }], usesInheritance: true, ngImport: i0 });
+SeriesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: SeriesDirective, selector: "e-series-collection>e-series", inputs: { accessibility: "accessibility", animation: "animation", bearFillColor: "bearFillColor", binInterval: "binInterval", border: "border", boxPlotMode: "boxPlotMode", bullFillColor: "bullFillColor", cardinalSplineTension: "cardinalSplineTension", close: "close", colorName: "colorName", columnFacet: "columnFacet", columnSpacing: "columnSpacing", columnWidth: "columnWidth", columnWidthInPixel: "columnWidthInPixel", connector: "connector", cornerRadius: "cornerRadius", dashArray: "dashArray", dataSource: "dataSource", dragSettings: "dragSettings", drawType: "drawType", emptyPointSettings: "emptyPointSettings", enableComplexProperty: "enableComplexProperty", enableSolidCandles: "enableSolidCandles", enableTooltip: "enableTooltip", errorBar: "errorBar", fill: "fill", groupName: "groupName", high: "high", intermediateSumIndexes: "intermediateSumIndexes", isClosed: "isClosed", labelSettings: "labelSettings", lastValueLabel: "lastValueLabel", legendImageUrl: "legendImageUrl", legendShape: "legendShape", linearGradient: "linearGradient", low: "low", marker: "marker", maxRadius: "maxRadius", minRadius: "minRadius", name: "name", negativeFillColor: "negativeFillColor", noRisers: "noRisers", nonHighlightStyle: "nonHighlightStyle", opacity: "opacity", open: "open", paretoOptions: "paretoOptions", pointColorMapping: "pointColorMapping", query: "query", radialGradient: "radialGradient", segmentAxis: "segmentAxis", segments: "segments", selectionStyle: "selectionStyle", showMean: "showMean", showNearestTooltip: "showNearestTooltip", showNormalDistribution: "showNormalDistribution", showOutliers: "showOutliers", size: "size", splineType: "splineType", stackingGroup: "stackingGroup", step: "step", sumIndexes: "sumIndexes", summaryFillColor: "summaryFillColor", tooltipFormat: "tooltipFormat", tooltipMappingName: "tooltipMappingName", trendlines: "trendlines", type: "type", unSelectedStyle: "unSelectedStyle", visible: "visible", volume: "volume", width: "width", xAxisName: "xAxisName", xName: "xName", yAxisName: "yAxisName", yName: "yName", zOrder: "zOrder" }, queries: [{ propertyName: "dataLabel_template", first: true, predicate: ["dataLabelTemplate"], descendants: true }, { propertyName: "childTrendlines", first: true, predicate: TrendlinesDirective, descendants: true }, { propertyName: "childSegments", first: true, predicate: SegmentsDirective, descendants: true }], usesInheritance: true, ngImport: i0 });
 __decorate([
     Template()
 ], SeriesDirective.prototype, "dataLabel_template", void 0);
@@ -145,8 +145,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'e-series-collection>e-series',
-                    inputs: input$w,
-                    outputs: outputs$F,
+                    inputs: input$y,
+                    outputs: outputs$I,
                     queries: {
                         childTrendlines: new ContentChild(TrendlinesDirective),
                         childSegments: new ContentChild(SegmentsDirective)
@@ -177,8 +177,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-let input$v = ['border', 'color', 'dashArray', 'end', 'horizontalAlignment', 'imageUrl', 'isRepeat', 'isSegmented', 'opacity', 'repeatEvery', 'repeatUntil', 'rotation', 'segmentAxisName', 'segmentEnd', 'segmentStart', 'size', 'sizeType', 'start', 'startFromAxis', 'text', 'textStyle', 'verticalAlignment', 'visible', 'zIndex'];
-let outputs$E = [];
+let input$x = ['border', 'color', 'dashArray', 'end', 'horizontalAlignment', 'imageUrl', 'isRepeat', 'isSegmented', 'opacity', 'repeatEvery', 'repeatUntil', 'rotation', 'segmentAxisName', 'segmentEnd', 'segmentStart', 'size', 'sizeType', 'start', 'startFromAxis', 'text', 'textStyle', 'verticalAlignment', 'visible', 'zIndex'];
+let outputs$H = [];
 /**
  * StripLine Directive
  * ```html
@@ -194,8 +194,8 @@ class StripLineDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$E);
-        this.directivePropList = input$v;
+        this.registerEvents(outputs$H);
+        this.directivePropList = input$x;
     }
 }
 StripLineDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StripLineDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -204,8 +204,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'e-axis>e-striplines>e-stripline',
-                    inputs: input$v,
-                    outputs: outputs$E,
+                    inputs: input$x,
+                    outputs: outputs$H,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
@@ -230,8 +230,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-let input$u = ['customAttributes', 'end', 'maximumTextWidth', 'start', 'text', 'type'];
-let outputs$D = [];
+let input$w = ['customAttributes', 'end', 'maximumTextWidth', 'start', 'text', 'type'];
+let outputs$G = [];
 /**
  * MultiLevelLabels Directive
  * ```html
@@ -250,8 +250,8 @@ class CategoryDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$D);
-        this.directivePropList = input$u;
+        this.registerEvents(outputs$G);
+        this.directivePropList = input$w;
     }
 }
 CategoryDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CategoryDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -260,8 +260,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'e-multilevellabel>e-categories>e-category',
-                    inputs: input$u,
-                    outputs: outputs$D,
+                    inputs: input$w,
+                    outputs: outputs$G,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
@@ -286,8 +286,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-let input$t = ['alignment', 'border', 'categories', 'overflow', 'textStyle'];
-let outputs$C = [];
+let input$v = ['alignment', 'border', 'categories', 'overflow', 'textStyle'];
+let outputs$F = [];
 /**
  * MultiLevelLabel Directive
  * ```html
@@ -304,8 +304,8 @@ class MultiLevelLabelDirective extends ComplexBase {
         this.viewContainerRef = viewContainerRef;
         this.tags = ['categories'];
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$C);
-        this.directivePropList = input$t;
+        this.registerEvents(outputs$F);
+        this.directivePropList = input$v;
     }
 }
 MultiLevelLabelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiLevelLabelDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -314,8 +314,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'e-axis>e-multilevellabels>e-multilevellabel',
-                    inputs: input$t,
-                    outputs: outputs$C,
+                    inputs: input$v,
+                    outputs: outputs$F,
                     queries: {
                         childCategories: new ContentChild(CategoriesDirective)
                     }
@@ -342,8 +342,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-let input$s = ['border', 'coefficient', 'columnIndex', 'crossesAt', 'crossesInAxis', 'crosshairTooltip', 'description', 'desiredIntervals', 'edgeLabelPlacement', 'enableAutoIntervalOnZooming', 'enableScrollbarOnZooming', 'enableTrim', 'enableWrap', 'interval', 'intervalType', 'isIndexed', 'isInversed', 'labelFormat', 'labelIntersectAction', 'labelPadding', 'labelPlacement', 'labelPosition', 'labelRotation', 'labelStyle', 'labelTemplate', 'lineBreakAlignment', 'lineStyle', 'logBase', 'majorGridLines', 'majorTickLines', 'maximum', 'maximumLabelWidth', 'maximumLabels', 'minimum', 'minorGridLines', 'minorTickLines', 'minorTicksPerInterval', 'multiLevelLabels', 'name', 'opposedPosition', 'placeNextToAxisLine', 'plotOffset', 'plotOffsetBottom', 'plotOffsetLeft', 'plotOffsetRight', 'plotOffsetTop', 'rangePadding', 'rowIndex', 'scrollbarSettings', 'skeleton', 'skeletonType', 'span', 'startAngle', 'startFromZero', 'stripLines', 'tabIndex', 'tickPosition', 'title', 'titlePadding', 'titleRotation', 'titleStyle', 'valueType', 'visible', 'zoomFactor', 'zoomPosition'];
-let outputs$B = [];
+let input$u = ['border', 'coefficient', 'columnIndex', 'crossesAt', 'crossesInAxis', 'crosshairTooltip', 'description', 'desiredIntervals', 'edgeLabelPlacement', 'enableAutoIntervalOnZooming', 'enableScrollbarOnZooming', 'enableTrim', 'enableWrap', 'interval', 'intervalType', 'isIndexed', 'isInversed', 'labelFormat', 'labelIntersectAction', 'labelPadding', 'labelPlacement', 'labelPosition', 'labelRotation', 'labelStyle', 'labelTemplate', 'lineBreakAlignment', 'lineStyle', 'logBase', 'majorGridLines', 'majorTickLines', 'maximum', 'maximumLabelWidth', 'maximumLabels', 'minimum', 'minorGridLines', 'minorTickLines', 'minorTicksPerInterval', 'multiLevelLabels', 'name', 'opposedPosition', 'placeNextToAxisLine', 'plotOffset', 'plotOffsetBottom', 'plotOffsetLeft', 'plotOffsetRight', 'plotOffsetTop', 'rangePadding', 'rowIndex', 'scrollbarSettings', 'skeleton', 'skeletonType', 'span', 'startAngle', 'startFromZero', 'stripLines', 'tabIndex', 'tickPosition', 'title', 'titlePadding', 'titleRotation', 'titleStyle', 'valueType', 'visible', 'zoomFactor', 'zoomPosition'];
+let outputs$E = [];
 /**
  * Axis Directive
  * ```html
@@ -356,8 +356,8 @@ class AxisDirective extends ComplexBase {
         this.viewContainerRef = viewContainerRef;
         this.tags = ['stripLines', 'multiLevelLabels'];
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$B);
-        this.directivePropList = input$s;
+        this.registerEvents(outputs$E);
+        this.directivePropList = input$u;
     }
 }
 AxisDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AxisDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -366,8 +366,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'e-axes>e-axis',
-                    inputs: input$s,
-                    outputs: outputs$B,
+                    inputs: input$u,
+                    outputs: outputs$E,
                     queries: {
                         childStripLines: new ContentChild(StripLinesDirective),
                         childMultiLevelLabels: new ContentChild(MultiLevelLabelsDirective)
@@ -395,8 +395,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-let input$r = ['border', 'height'];
-let outputs$A = [];
+let input$t = ['border', 'height'];
+let outputs$D = [];
 /**
  * Row Directive
  * ```html
@@ -408,8 +408,8 @@ class RowDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$A);
-        this.directivePropList = input$r;
+        this.registerEvents(outputs$D);
+        this.directivePropList = input$t;
     }
 }
 RowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RowDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -418,8 +418,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'e-rows>e-row',
-                    inputs: input$r,
-                    outputs: outputs$A,
+                    inputs: input$t,
+                    outputs: outputs$D,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
@@ -444,8 +444,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-let input$q = ['border', 'width'];
-let outputs$z = [];
+let input$s = ['border', 'width'];
+let outputs$C = [];
 /**
  * Column Directive
  * ```html
@@ -457,8 +457,8 @@ class ColumnDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$z);
-        this.directivePropList = input$q;
+        this.registerEvents(outputs$C);
+        this.directivePropList = input$s;
     }
 }
 ColumnDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ColumnDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -467,8 +467,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'e-columns>e-column',
-                    inputs: input$q,
-                    outputs: outputs$z,
+                    inputs: input$s,
+                    outputs: outputs$C,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
@@ -493,8 +493,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-let input$p = ['colors', 'end', 'label', 'start'];
-let outputs$y = [];
+let input$r = ['colors', 'end', 'label', 'start'];
+let outputs$B = [];
 /**
  * RangeColorSetting Directive
  * ```html
@@ -506,8 +506,8 @@ class RangeColorSettingDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$y);
-        this.directivePropList = input$p;
+        this.registerEvents(outputs$B);
+        this.directivePropList = input$r;
     }
 }
 RangeColorSettingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RangeColorSettingDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -516,8 +516,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'e-rangecolorsettings>e-rangecolorsetting',
-                    inputs: input$p,
-                    outputs: outputs$y,
+                    inputs: input$r,
+                    outputs: outputs$B,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
@@ -542,8 +542,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-let input$o = ['accessibility', 'content', 'coordinateUnits', 'description', 'horizontalAlignment', 'region', 'verticalAlignment', 'x', 'xAxisName', 'y', 'yAxisName'];
-let outputs$x = [];
+let input$q = ['accessibility', 'content', 'coordinateUnits', 'description', 'horizontalAlignment', 'region', 'verticalAlignment', 'x', 'xAxisName', 'y', 'yAxisName'];
+let outputs$A = [];
 /**
  * Annotation Directive
  * ```html
@@ -555,8 +555,8 @@ class AnnotationDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$x);
-        this.directivePropList = input$o;
+        this.registerEvents(outputs$A);
+        this.directivePropList = input$q;
     }
 }
 AnnotationDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AnnotationDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -568,8 +568,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'e-annotations>e-annotation',
-                    inputs: input$o,
-                    outputs: outputs$x,
+                    inputs: input$q,
+                    outputs: outputs$A,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { content: [{
@@ -597,8 +597,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-let input$n = ['point', 'series'];
-let outputs$w = [];
+let input$p = ['point', 'series'];
+let outputs$z = [];
 /**
  * Selected Data Directive
  * ```html
@@ -610,8 +610,8 @@ class SelectedDataIndexDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$w);
-        this.directivePropList = input$n;
+        this.registerEvents(outputs$z);
+        this.directivePropList = input$p;
     }
 }
 SelectedDataIndexDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SelectedDataIndexDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -620,8 +620,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'e-selecteddataindexes>e-selecteddataindex',
-                    inputs: input$n,
-                    outputs: outputs$w,
+                    inputs: input$p,
+                    outputs: outputs$z,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
@@ -646,8 +646,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-let input$m = ['accessibility', 'animation', 'bandColor', 'close', 'colorName', 'dPeriod', 'dashArray', 'dataSource', 'enableComplexProperty', 'fastPeriod', 'field', 'fill', 'high', 'kPeriod', 'low', 'lowerLine', 'macdLine', 'macdNegativeColor', 'macdPositiveColor', 'macdType', 'open', 'overBought', 'overSold', 'period', 'periodLine', 'pointColorMapping', 'query', 'segmentAxis', 'segments', 'seriesName', 'showZones', 'slowPeriod', 'standardDeviation', 'type', 'upperLine', 'visible', 'volume', 'width', 'xAxisName', 'xName', 'yAxisName'];
-let outputs$v = [];
+let input$o = ['accessibility', 'animation', 'bandColor', 'close', 'colorName', 'dPeriod', 'dashArray', 'dataSource', 'enableComplexProperty', 'fastPeriod', 'field', 'fill', 'high', 'kPeriod', 'linearGradient', 'low', 'lowerLine', 'macdLine', 'macdNegativeColor', 'macdPositiveColor', 'macdType', 'open', 'overBought', 'overSold', 'period', 'periodLine', 'pointColorMapping', 'query', 'radialGradient', 'segmentAxis', 'segments', 'seriesName', 'showZones', 'slowPeriod', 'standardDeviation', 'type', 'upperLine', 'visible', 'volume', 'width', 'xAxisName', 'xName', 'yAxisName'];
+let outputs$y = [];
 /**
  * Indicator Directive
  * ```html
@@ -661,18 +661,18 @@ class IndicatorDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$v);
-        this.directivePropList = input$m;
+        this.registerEvents(outputs$y);
+        this.directivePropList = input$o;
     }
 }
 IndicatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: IndicatorDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-IndicatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: IndicatorDirective, selector: "e-indicators>e-indicator", inputs: { accessibility: "accessibility", animation: "animation", bandColor: "bandColor", close: "close", colorName: "colorName", dPeriod: "dPeriod", dashArray: "dashArray", dataSource: "dataSource", enableComplexProperty: "enableComplexProperty", fastPeriod: "fastPeriod", field: "field", fill: "fill", high: "high", kPeriod: "kPeriod", low: "low", lowerLine: "lowerLine", macdLine: "macdLine", macdNegativeColor: "macdNegativeColor", macdPositiveColor: "macdPositiveColor", macdType: "macdType", open: "open", overBought: "overBought", overSold: "overSold", period: "period", periodLine: "periodLine", pointColorMapping: "pointColorMapping", query: "query", segmentAxis: "segmentAxis", segments: "segments", seriesName: "seriesName", showZones: "showZones", slowPeriod: "slowPeriod", standardDeviation: "standardDeviation", type: "type", upperLine: "upperLine", visible: "visible", volume: "volume", width: "width", xAxisName: "xAxisName", xName: "xName", yAxisName: "yAxisName" }, usesInheritance: true, ngImport: i0 });
+IndicatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: IndicatorDirective, selector: "e-indicators>e-indicator", inputs: { accessibility: "accessibility", animation: "animation", bandColor: "bandColor", close: "close", colorName: "colorName", dPeriod: "dPeriod", dashArray: "dashArray", dataSource: "dataSource", enableComplexProperty: "enableComplexProperty", fastPeriod: "fastPeriod", field: "field", fill: "fill", high: "high", kPeriod: "kPeriod", linearGradient: "linearGradient", low: "low", lowerLine: "lowerLine", macdLine: "macdLine", macdNegativeColor: "macdNegativeColor", macdPositiveColor: "macdPositiveColor", macdType: "macdType", open: "open", overBought: "overBought", overSold: "overSold", period: "period", periodLine: "periodLine", pointColorMapping: "pointColorMapping", query: "query", radialGradient: "radialGradient", segmentAxis: "segmentAxis", segments: "segments", seriesName: "seriesName", showZones: "showZones", slowPeriod: "slowPeriod", standardDeviation: "standardDeviation", type: "type", upperLine: "upperLine", visible: "visible", volume: "volume", width: "width", xAxisName: "xAxisName", xName: "xName", yAxisName: "yAxisName" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: IndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'e-indicators>e-indicator',
-                    inputs: input$m,
-                    outputs: outputs$v,
+                    inputs: input$o,
+                    outputs: outputs$y,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
@@ -697,9 +697,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-const inputs$8 = ['accessibility', 'allowExport', 'allowMultiSelection', 'annotations', 'axes', 'background', 'backgroundImage', 'border', 'chartArea', 'columns', 'crosshair', 'currencyCode', 'dataSource', 'description', 'enableAnimation', 'enableAutoIntervalOnBothAxis', 'enableCanvas', 'enableExport', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'enableSideBySidePlacement', 'focusBorderColor', 'focusBorderMargin', 'focusBorderWidth', 'height', 'highlightColor', 'highlightMode', 'highlightPattern', 'indicators', 'isMultiSelect', 'isTransposed', 'legendSettings', 'locale', 'margin', 'noDataTemplate', 'palettes', 'primaryXAxis', 'primaryYAxis', 'rangeColorSettings', 'rows', 'selectedDataIndexes', 'selectionMode', 'selectionPattern', 'series', 'stackLabels', 'subTitle', 'subTitleStyle', 'tabIndex', 'theme', 'title', 'titleStyle', 'tooltip', 'useGroupingSeparator', 'width', 'zoomSettings'];
-const outputs$u = ['afterExport', 'animationComplete', 'annotationRender', 'axisLabelClick', 'axisLabelRender', 'axisMultiLabelRender', 'axisRangeCalculated', 'beforeExport', 'beforePrint', 'beforeResize', 'chartDoubleClick', 'chartMouseClick', 'chartMouseDown', 'chartMouseLeave', 'chartMouseMove', 'chartMouseUp', 'drag', 'dragComplete', 'dragEnd', 'dragStart', 'legendClick', 'legendRender', 'load', 'loaded', 'multiLevelLabelClick', 'onZooming', 'pointClick', 'pointDoubleClick', 'pointMove', 'pointRender', 'resized', 'scrollChanged', 'scrollEnd', 'scrollStart', 'selectionComplete', 'seriesRender', 'sharedTooltipRender', 'textRender', 'tooltipRender', 'zoomComplete', 'dataSourceChange'];
-const twoWays$8 = ['dataSource'];
+const inputs$9 = ['accessibility', 'allowExport', 'allowMultiSelection', 'annotations', 'axes', 'background', 'backgroundImage', 'border', 'chartArea', 'columns', 'crosshair', 'currencyCode', 'dataSource', 'description', 'enableAnimation', 'enableAutoIntervalOnBothAxis', 'enableCanvas', 'enableExport', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'enableSideBySidePlacement', 'focusBorderColor', 'focusBorderMargin', 'focusBorderWidth', 'height', 'highlightColor', 'highlightMode', 'highlightPattern', 'indicators', 'isMultiSelect', 'isTransposed', 'legendSettings', 'locale', 'margin', 'noDataTemplate', 'palettes', 'primaryXAxis', 'primaryYAxis', 'rangeColorSettings', 'rows', 'selectedDataIndexes', 'selectionMode', 'selectionPattern', 'series', 'stackLabels', 'subTitle', 'subTitleStyle', 'tabIndex', 'theme', 'title', 'titleStyle', 'tooltip', 'useGroupingSeparator', 'width', 'zoomSettings'];
+const outputs$x = ['afterExport', 'animationComplete', 'annotationRender', 'axisLabelClick', 'axisLabelRender', 'axisMultiLabelRender', 'axisRangeCalculated', 'beforeExport', 'beforePrint', 'beforeResize', 'chartDoubleClick', 'chartMouseClick', 'chartMouseDown', 'chartMouseLeave', 'chartMouseMove', 'chartMouseUp', 'crosshairLabelRender', 'drag', 'dragComplete', 'dragEnd', 'dragStart', 'legendClick', 'legendRender', 'load', 'loaded', 'multiLevelLabelClick', 'onZooming', 'pointClick', 'pointDoubleClick', 'pointMove', 'pointRender', 'resized', 'scrollChanged', 'scrollEnd', 'scrollStart', 'selectionComplete', 'seriesRender', 'sharedTooltipRender', 'textRender', 'tooltipRender', 'zoomComplete', 'dataSourceChange'];
+const twoWays$9 = ['dataSource'];
 /**
  * Chart Component
  * ```html
@@ -1136,8 +1136,15 @@ let ChartComponent = class ChartComponent extends Chart {
             }
         }
         catch (_35) { }
-        this.registerEvents(outputs$u);
-        this.addTwoWay.call(this, twoWays$8);
+        try {
+            let mod = this.injector.get('ChartsSeriesLabel');
+            if (this.injectedModules.indexOf(mod) === -1) {
+                this.injectedModules.push(mod);
+            }
+        }
+        catch (_36) { }
+        this.registerEvents(outputs$x);
+        this.addTwoWay.call(this, twoWays$9);
         setValue('currentInstance', this, this.viewContainerRef);
         this.context = new ComponentBase();
     }
@@ -1177,10 +1184,13 @@ let ChartComponent = class ChartComponent extends Chart {
     }
 };
 ChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ChartComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ChartComponent, selector: "ejs-chart", inputs: { accessibility: "accessibility", allowExport: "allowExport", allowMultiSelection: "allowMultiSelection", annotations: "annotations", axes: "axes", background: "background", backgroundImage: "backgroundImage", border: "border", chartArea: "chartArea", columns: "columns", crosshair: "crosshair", currencyCode: "currencyCode", dataSource: "dataSource", description: "description", enableAnimation: "enableAnimation", enableAutoIntervalOnBothAxis: "enableAutoIntervalOnBothAxis", enableCanvas: "enableCanvas", enableExport: "enableExport", enableHtmlSanitizer: "enableHtmlSanitizer", enablePersistence: "enablePersistence", enableRtl: "enableRtl", enableSideBySidePlacement: "enableSideBySidePlacement", focusBorderColor: "focusBorderColor", focusBorderMargin: "focusBorderMargin", focusBorderWidth: "focusBorderWidth", height: "height", highlightColor: "highlightColor", highlightMode: "highlightMode", highlightPattern: "highlightPattern", indicators: "indicators", isMultiSelect: "isMultiSelect", isTransposed: "isTransposed", legendSettings: "legendSettings", locale: "locale", margin: "margin", noDataTemplate: "noDataTemplate", palettes: "palettes", primaryXAxis: "primaryXAxis", primaryYAxis: "primaryYAxis", rangeColorSettings: "rangeColorSettings", rows: "rows", selectedDataIndexes: "selectedDataIndexes", selectionMode: "selectionMode", selectionPattern: "selectionPattern", series: "series", stackLabels: "stackLabels", subTitle: "subTitle", subTitleStyle: "subTitleStyle", tabIndex: "tabIndex", theme: "theme", title: "title", titleStyle: "titleStyle", tooltip: "tooltip", useGroupingSeparator: "useGroupingSeparator", width: "width", zoomSettings: "zoomSettings" }, outputs: { afterExport: "afterExport", animationComplete: "animationComplete", annotationRender: "annotationRender", axisLabelClick: "axisLabelClick", axisLabelRender: "axisLabelRender", axisMultiLabelRender: "axisMultiLabelRender", axisRangeCalculated: "axisRangeCalculated", beforeExport: "beforeExport", beforePrint: "beforePrint", beforeResize: "beforeResize", chartDoubleClick: "chartDoubleClick", chartMouseClick: "chartMouseClick", chartMouseDown: "chartMouseDown", chartMouseLeave: "chartMouseLeave", chartMouseMove: "chartMouseMove", chartMouseUp: "chartMouseUp", drag: "drag", dragComplete: "dragComplete", dragEnd: "dragEnd", dragStart: "dragStart", legendClick: "legendClick", legendRender: "legendRender", load: "load", loaded: "loaded", multiLevelLabelClick: "multiLevelLabelClick", onZooming: "onZooming", pointClick: "pointClick", pointDoubleClick: "pointDoubleClick", pointMove: "pointMove", pointRender: "pointRender", resized: "resized", scrollChanged: "scrollChanged", scrollEnd: "scrollEnd", scrollStart: "scrollStart", selectionComplete: "selectionComplete", seriesRender: "seriesRender", sharedTooltipRender: "sharedTooltipRender", textRender: "textRender", tooltipRender: "tooltipRender", zoomComplete: "zoomComplete", dataSourceChange: "dataSourceChange" }, queries: [{ propertyName: "tooltip_template", first: true, predicate: ["tooltipTemplate"], descendants: true }, { propertyName: "childSeries", first: true, predicate: SeriesCollectionDirective, descendants: true }, { propertyName: "childAxes", first: true, predicate: AxesDirective, descendants: true }, { propertyName: "childRows", first: true, predicate: RowsDirective, descendants: true }, { propertyName: "childColumns", first: true, predicate: ColumnsDirective, descendants: true }, { propertyName: "childRangeColorSettings", first: true, predicate: RangeColorSettingsDirective, descendants: true }, { propertyName: "childAnnotations", first: true, predicate: AnnotationsDirective, descendants: true }, { propertyName: "childSelectedDataIndexes", first: true, predicate: SelectedDataIndexesDirective, descendants: true }, { propertyName: "childIndicators", first: true, predicate: IndicatorsDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
+ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: ChartComponent, selector: "ejs-chart", inputs: { accessibility: "accessibility", allowExport: "allowExport", allowMultiSelection: "allowMultiSelection", annotations: "annotations", axes: "axes", background: "background", backgroundImage: "backgroundImage", border: "border", chartArea: "chartArea", columns: "columns", crosshair: "crosshair", currencyCode: "currencyCode", dataSource: "dataSource", description: "description", enableAnimation: "enableAnimation", enableAutoIntervalOnBothAxis: "enableAutoIntervalOnBothAxis", enableCanvas: "enableCanvas", enableExport: "enableExport", enableHtmlSanitizer: "enableHtmlSanitizer", enablePersistence: "enablePersistence", enableRtl: "enableRtl", enableSideBySidePlacement: "enableSideBySidePlacement", focusBorderColor: "focusBorderColor", focusBorderMargin: "focusBorderMargin", focusBorderWidth: "focusBorderWidth", height: "height", highlightColor: "highlightColor", highlightMode: "highlightMode", highlightPattern: "highlightPattern", indicators: "indicators", isMultiSelect: "isMultiSelect", isTransposed: "isTransposed", legendSettings: "legendSettings", locale: "locale", margin: "margin", noDataTemplate: "noDataTemplate", palettes: "palettes", primaryXAxis: "primaryXAxis", primaryYAxis: "primaryYAxis", rangeColorSettings: "rangeColorSettings", rows: "rows", selectedDataIndexes: "selectedDataIndexes", selectionMode: "selectionMode", selectionPattern: "selectionPattern", series: "series", stackLabels: "stackLabels", subTitle: "subTitle", subTitleStyle: "subTitleStyle", tabIndex: "tabIndex", theme: "theme", title: "title", titleStyle: "titleStyle", tooltip: "tooltip", useGroupingSeparator: "useGroupingSeparator", width: "width", zoomSettings: "zoomSettings" }, outputs: { afterExport: "afterExport", animationComplete: "animationComplete", annotationRender: "annotationRender", axisLabelClick: "axisLabelClick", axisLabelRender: "axisLabelRender", axisMultiLabelRender: "axisMultiLabelRender", axisRangeCalculated: "axisRangeCalculated", beforeExport: "beforeExport", beforePrint: "beforePrint", beforeResize: "beforeResize", chartDoubleClick: "chartDoubleClick", chartMouseClick: "chartMouseClick", chartMouseDown: "chartMouseDown", chartMouseLeave: "chartMouseLeave", chartMouseMove: "chartMouseMove", chartMouseUp: "chartMouseUp", crosshairLabelRender: "crosshairLabelRender", drag: "drag", dragComplete: "dragComplete", dragEnd: "dragEnd", dragStart: "dragStart", legendClick: "legendClick", legendRender: "legendRender", load: "load", loaded: "loaded", multiLevelLabelClick: "multiLevelLabelClick", onZooming: "onZooming", pointClick: "pointClick", pointDoubleClick: "pointDoubleClick", pointMove: "pointMove", pointRender: "pointRender", resized: "resized", scrollChanged: "scrollChanged", scrollEnd: "scrollEnd", scrollStart: "scrollStart", selectionComplete: "selectionComplete", seriesRender: "seriesRender", sharedTooltipRender: "sharedTooltipRender", textRender: "textRender", tooltipRender: "tooltipRender", zoomComplete: "zoomComplete", dataSourceChange: "dataSourceChange" }, queries: [{ propertyName: "tooltip_template", first: true, predicate: ["tooltipTemplate"], descendants: true }, { propertyName: "legendSettings_template", first: true, predicate: ["legendSettingsTemplate"], descendants: true }, { propertyName: "childSeries", first: true, predicate: SeriesCollectionDirective, descendants: true }, { propertyName: "childAxes", first: true, predicate: AxesDirective, descendants: true }, { propertyName: "childRows", first: true, predicate: RowsDirective, descendants: true }, { propertyName: "childColumns", first: true, predicate: ColumnsDirective, descendants: true }, { propertyName: "childRangeColorSettings", first: true, predicate: RangeColorSettingsDirective, descendants: true }, { propertyName: "childAnnotations", first: true, predicate: AnnotationsDirective, descendants: true }, { propertyName: "childSelectedDataIndexes", first: true, predicate: SelectedDataIndexesDirective, descendants: true }, { propertyName: "childIndicators", first: true, predicate: IndicatorsDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
 __decorate([
     Template()
 ], ChartComponent.prototype, "tooltip_template", void 0);
+__decorate([
+    Template()
+], ChartComponent.prototype, "legendSettings_template", void 0);
 ChartComponent = __decorate([
     ComponentMixins([ComponentBase])
 ], ChartComponent);
@@ -1188,8 +1198,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Component,
             args: [{
                     selector: 'ejs-chart',
-                    inputs: inputs$8,
-                    outputs: outputs$u,
+                    inputs: inputs$9,
+                    outputs: outputs$x,
                     template: '',
                     queries: {
                         childSeries: new ContentChild(SeriesCollectionDirective),
@@ -1205,6 +1215,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.Injector }]; }, propDecorators: { tooltip_template: [{
                 type: ContentChild,
                 args: ['tooltipTemplate']
+            }], legendSettings_template: [{
+                type: ContentChild,
+                args: ['legendSettingsTemplate']
             }] } });
 
 /**
@@ -1392,6 +1405,7 @@ const ExportService = { provide: 'ChartsExport', useValue: Export };
 const DataEditingService = { provide: 'ChartsDataEditing', useValue: DataEditing };
 const HighlightService = { provide: 'ChartsHighlight', useValue: Highlight };
 const LastValueLabelService = { provide: 'ChartsLastValueLabel', useValue: LastValueLabel };
+const SeriesLabelService = { provide: 'ChartsSeriesLabel', useValue: SeriesLabel };
 /**
  * NgModule definition for the Chart component with providers.
  */
@@ -1459,7 +1473,8 @@ ChartAllModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
         ExportService,
         DataEditingService,
         HighlightService,
-        LastValueLabelService
+        LastValueLabelService,
+        SeriesLabelService
     ], imports: [[CommonModule, ChartModule], ChartModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ChartAllModule, decorators: [{
             type: NgModule,
@@ -1528,13 +1543,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                         ExportService,
                         DataEditingService,
                         HighlightService,
-                        LastValueLabelService
+                        LastValueLabelService,
+                        SeriesLabelService
                     ]
                 }]
         }] });
 
-let input$l = ['accessibility', 'animation', 'applyPattern', 'border', 'borderRadius', 'dashArray', 'dataLabel', 'dataSource', 'emptyPointSettings', 'enableTooltip', 'endAngle', 'explode', 'explodeAll', 'explodeIndex', 'explodeOffset', 'funnelMode', 'gapRatio', 'groupMode', 'groupTo', 'height', 'innerRadius', 'legendImageUrl', 'legendShape', 'name', 'neckHeight', 'neckWidth', 'opacity', 'palettes', 'pointColorMapping', 'pyramidMode', 'query', 'radius', 'selectionStyle', 'startAngle', 'tooltipMappingName', 'type', 'visible', 'width', 'xName', 'yName'];
-let outputs$t = [];
+let input$n = ['accessibility', 'animation', 'applyPattern', 'border', 'borderRadius', 'dashArray', 'dataLabel', 'dataSource', 'emptyPointSettings', 'enableTooltip', 'endAngle', 'explode', 'explodeAll', 'explodeIndex', 'explodeOffset', 'funnelMode', 'gapRatio', 'groupMode', 'groupTo', 'height', 'innerRadius', 'legendImageUrl', 'legendShape', 'linearGradient', 'name', 'neckHeight', 'neckWidth', 'opacity', 'palettes', 'pointColorMapping', 'pyramidMode', 'query', 'radialGradient', 'radius', 'selectionStyle', 'startAngle', 'tooltipMappingName', 'type', 'visible', 'width', 'xName', 'yName'];
+let outputs$w = [];
 /**
  * AccumulationSeries Directive
  * ```html
@@ -1548,12 +1564,12 @@ class AccumulationSeriesDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$t);
-        this.directivePropList = input$l;
+        this.registerEvents(outputs$w);
+        this.directivePropList = input$n;
     }
 }
 AccumulationSeriesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AccumulationSeriesDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-AccumulationSeriesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: AccumulationSeriesDirective, selector: "e-accumulation-series-collection>e-accumulation-series", inputs: { accessibility: "accessibility", animation: "animation", applyPattern: "applyPattern", border: "border", borderRadius: "borderRadius", dashArray: "dashArray", dataLabel: "dataLabel", dataSource: "dataSource", emptyPointSettings: "emptyPointSettings", enableTooltip: "enableTooltip", endAngle: "endAngle", explode: "explode", explodeAll: "explodeAll", explodeIndex: "explodeIndex", explodeOffset: "explodeOffset", funnelMode: "funnelMode", gapRatio: "gapRatio", groupMode: "groupMode", groupTo: "groupTo", height: "height", innerRadius: "innerRadius", legendImageUrl: "legendImageUrl", legendShape: "legendShape", name: "name", neckHeight: "neckHeight", neckWidth: "neckWidth", opacity: "opacity", palettes: "palettes", pointColorMapping: "pointColorMapping", pyramidMode: "pyramidMode", query: "query", radius: "radius", selectionStyle: "selectionStyle", startAngle: "startAngle", tooltipMappingName: "tooltipMappingName", type: "type", visible: "visible", width: "width", xName: "xName", yName: "yName" }, queries: [{ propertyName: "dataLabel_template", first: true, predicate: ["dataLabelTemplate"], descendants: true }], usesInheritance: true, ngImport: i0 });
+AccumulationSeriesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: AccumulationSeriesDirective, selector: "e-accumulation-series-collection>e-accumulation-series", inputs: { accessibility: "accessibility", animation: "animation", applyPattern: "applyPattern", border: "border", borderRadius: "borderRadius", dashArray: "dashArray", dataLabel: "dataLabel", dataSource: "dataSource", emptyPointSettings: "emptyPointSettings", enableTooltip: "enableTooltip", endAngle: "endAngle", explode: "explode", explodeAll: "explodeAll", explodeIndex: "explodeIndex", explodeOffset: "explodeOffset", funnelMode: "funnelMode", gapRatio: "gapRatio", groupMode: "groupMode", groupTo: "groupTo", height: "height", innerRadius: "innerRadius", legendImageUrl: "legendImageUrl", legendShape: "legendShape", linearGradient: "linearGradient", name: "name", neckHeight: "neckHeight", neckWidth: "neckWidth", opacity: "opacity", palettes: "palettes", pointColorMapping: "pointColorMapping", pyramidMode: "pyramidMode", query: "query", radialGradient: "radialGradient", radius: "radius", selectionStyle: "selectionStyle", startAngle: "startAngle", tooltipMappingName: "tooltipMappingName", type: "type", visible: "visible", width: "width", xName: "xName", yName: "yName" }, queries: [{ propertyName: "dataLabel_template", first: true, predicate: ["dataLabelTemplate"], descendants: true }], usesInheritance: true, ngImport: i0 });
 __decorate([
     Template()
 ], AccumulationSeriesDirective.prototype, "dataLabel_template", void 0);
@@ -1561,8 +1577,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'e-accumulation-series-collection>e-accumulation-series',
-                    inputs: input$l,
-                    outputs: outputs$t,
+                    inputs: input$n,
+                    outputs: outputs$w,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { dataLabel_template: [{
@@ -1590,8 +1606,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-let input$k = ['content', 'coordinateUnits', 'description', 'horizontalAlignment', 'region', 'verticalAlignment', 'x', 'y'];
-let outputs$s = [];
+let input$m = ['content', 'coordinateUnits', 'description', 'horizontalAlignment', 'region', 'verticalAlignment', 'x', 'y'];
+let outputs$v = [];
 /**
  * AccumulationAnnotations Directive
  * ```html
@@ -1605,8 +1621,8 @@ class AccumulationAnnotationDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$s);
-        this.directivePropList = input$k;
+        this.registerEvents(outputs$v);
+        this.directivePropList = input$m;
     }
 }
 AccumulationAnnotationDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AccumulationAnnotationDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -1618,8 +1634,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'e-accumulation-annotations>e-accumulation-annotation',
-                    inputs: input$k,
-                    outputs: outputs$s,
+                    inputs: input$m,
+                    outputs: outputs$v,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { content: [{
@@ -1647,9 +1663,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-const inputs$7 = ['accessibility', 'allowExport', 'annotations', 'background', 'backgroundImage', 'border', 'center', 'centerLabel', 'currencyCode', 'dataSource', 'enableAnimation', 'enableBorderOnMouseMove', 'enableExport', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'enableSmartLabels', 'focusBorderColor', 'focusBorderMargin', 'focusBorderWidth', 'height', 'highlightColor', 'highlightMode', 'highlightPattern', 'isMultiSelect', 'legendSettings', 'locale', 'margin', 'noDataTemplate', 'selectedDataIndexes', 'selectionMode', 'selectionPattern', 'series', 'subTitle', 'subTitleStyle', 'theme', 'title', 'titleStyle', 'tooltip', 'useGroupingSeparator', 'width'];
-const outputs$r = ['afterExport', 'animationComplete', 'annotationRender', 'beforeExport', 'beforePrint', 'beforeResize', 'chartDoubleClick', 'chartMouseClick', 'chartMouseDown', 'chartMouseLeave', 'chartMouseMove', 'chartMouseUp', 'legendClick', 'legendRender', 'load', 'loaded', 'pointClick', 'pointMove', 'pointRender', 'resized', 'selectionComplete', 'seriesRender', 'textRender', 'tooltipRender', 'dataSourceChange'];
-const twoWays$7 = ['dataSource'];
+const inputs$8 = ['accessibility', 'allowExport', 'annotations', 'background', 'backgroundImage', 'border', 'center', 'centerLabel', 'currencyCode', 'dataSource', 'enableAnimation', 'enableBorderOnMouseMove', 'enableExport', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'enableSmartLabels', 'focusBorderColor', 'focusBorderMargin', 'focusBorderWidth', 'height', 'highlightColor', 'highlightMode', 'highlightPattern', 'isMultiSelect', 'legendSettings', 'locale', 'margin', 'noDataTemplate', 'selectedDataIndexes', 'selectionMode', 'selectionPattern', 'series', 'subTitle', 'subTitleStyle', 'theme', 'title', 'titleStyle', 'tooltip', 'useGroupingSeparator', 'width'];
+const outputs$u = ['afterExport', 'animationComplete', 'annotationRender', 'beforeExport', 'beforePrint', 'beforeResize', 'chartDoubleClick', 'chartMouseClick', 'chartMouseDown', 'chartMouseLeave', 'chartMouseMove', 'chartMouseUp', 'legendClick', 'legendRender', 'load', 'loaded', 'pointClick', 'pointMove', 'pointRender', 'resized', 'selectionComplete', 'seriesRender', 'textRender', 'tooltipRender', 'dataSourceChange'];
+const twoWays$8 = ['dataSource'];
 /**
  * AccumulationChart Component
  * ```html
@@ -1736,8 +1752,8 @@ let AccumulationChartComponent = class AccumulationChartComponent extends Accumu
             }
         }
         catch (_k) { }
-        this.registerEvents(outputs$r);
-        this.addTwoWay.call(this, twoWays$7);
+        this.registerEvents(outputs$u);
+        this.addTwoWay.call(this, twoWays$8);
         setValue('currentInstance', this, this.viewContainerRef);
         this.context = new ComponentBase();
     }
@@ -1759,10 +1775,13 @@ let AccumulationChartComponent = class AccumulationChartComponent extends Accumu
     }
 };
 AccumulationChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: AccumulationChartComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-AccumulationChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: AccumulationChartComponent, selector: "ejs-accumulationchart", inputs: { accessibility: "accessibility", allowExport: "allowExport", annotations: "annotations", background: "background", backgroundImage: "backgroundImage", border: "border", center: "center", centerLabel: "centerLabel", currencyCode: "currencyCode", dataSource: "dataSource", enableAnimation: "enableAnimation", enableBorderOnMouseMove: "enableBorderOnMouseMove", enableExport: "enableExport", enableHtmlSanitizer: "enableHtmlSanitizer", enablePersistence: "enablePersistence", enableRtl: "enableRtl", enableSmartLabels: "enableSmartLabels", focusBorderColor: "focusBorderColor", focusBorderMargin: "focusBorderMargin", focusBorderWidth: "focusBorderWidth", height: "height", highlightColor: "highlightColor", highlightMode: "highlightMode", highlightPattern: "highlightPattern", isMultiSelect: "isMultiSelect", legendSettings: "legendSettings", locale: "locale", margin: "margin", noDataTemplate: "noDataTemplate", selectedDataIndexes: "selectedDataIndexes", selectionMode: "selectionMode", selectionPattern: "selectionPattern", series: "series", subTitle: "subTitle", subTitleStyle: "subTitleStyle", theme: "theme", title: "title", titleStyle: "titleStyle", tooltip: "tooltip", useGroupingSeparator: "useGroupingSeparator", width: "width" }, outputs: { afterExport: "afterExport", animationComplete: "animationComplete", annotationRender: "annotationRender", beforeExport: "beforeExport", beforePrint: "beforePrint", beforeResize: "beforeResize", chartDoubleClick: "chartDoubleClick", chartMouseClick: "chartMouseClick", chartMouseDown: "chartMouseDown", chartMouseLeave: "chartMouseLeave", chartMouseMove: "chartMouseMove", chartMouseUp: "chartMouseUp", legendClick: "legendClick", legendRender: "legendRender", load: "load", loaded: "loaded", pointClick: "pointClick", pointMove: "pointMove", pointRender: "pointRender", resized: "resized", selectionComplete: "selectionComplete", seriesRender: "seriesRender", textRender: "textRender", tooltipRender: "tooltipRender", dataSourceChange: "dataSourceChange" }, queries: [{ propertyName: "tooltip_template", first: true, predicate: ["tooltipTemplate"], descendants: true }, { propertyName: "childSeries", first: true, predicate: AccumulationSeriesCollectionDirective, descendants: true }, { propertyName: "childAnnotations", first: true, predicate: AccumulationAnnotationsDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AccumulationChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: AccumulationChartComponent, selector: "ejs-accumulationchart", inputs: { accessibility: "accessibility", allowExport: "allowExport", annotations: "annotations", background: "background", backgroundImage: "backgroundImage", border: "border", center: "center", centerLabel: "centerLabel", currencyCode: "currencyCode", dataSource: "dataSource", enableAnimation: "enableAnimation", enableBorderOnMouseMove: "enableBorderOnMouseMove", enableExport: "enableExport", enableHtmlSanitizer: "enableHtmlSanitizer", enablePersistence: "enablePersistence", enableRtl: "enableRtl", enableSmartLabels: "enableSmartLabels", focusBorderColor: "focusBorderColor", focusBorderMargin: "focusBorderMargin", focusBorderWidth: "focusBorderWidth", height: "height", highlightColor: "highlightColor", highlightMode: "highlightMode", highlightPattern: "highlightPattern", isMultiSelect: "isMultiSelect", legendSettings: "legendSettings", locale: "locale", margin: "margin", noDataTemplate: "noDataTemplate", selectedDataIndexes: "selectedDataIndexes", selectionMode: "selectionMode", selectionPattern: "selectionPattern", series: "series", subTitle: "subTitle", subTitleStyle: "subTitleStyle", theme: "theme", title: "title", titleStyle: "titleStyle", tooltip: "tooltip", useGroupingSeparator: "useGroupingSeparator", width: "width" }, outputs: { afterExport: "afterExport", animationComplete: "animationComplete", annotationRender: "annotationRender", beforeExport: "beforeExport", beforePrint: "beforePrint", beforeResize: "beforeResize", chartDoubleClick: "chartDoubleClick", chartMouseClick: "chartMouseClick", chartMouseDown: "chartMouseDown", chartMouseLeave: "chartMouseLeave", chartMouseMove: "chartMouseMove", chartMouseUp: "chartMouseUp", legendClick: "legendClick", legendRender: "legendRender", load: "load", loaded: "loaded", pointClick: "pointClick", pointMove: "pointMove", pointRender: "pointRender", resized: "resized", selectionComplete: "selectionComplete", seriesRender: "seriesRender", textRender: "textRender", tooltipRender: "tooltipRender", dataSourceChange: "dataSourceChange" }, queries: [{ propertyName: "tooltip_template", first: true, predicate: ["tooltipTemplate"], descendants: true }, { propertyName: "legendSettings_template", first: true, predicate: ["legendSettingsTemplate"], descendants: true }, { propertyName: "childSeries", first: true, predicate: AccumulationSeriesCollectionDirective, descendants: true }, { propertyName: "childAnnotations", first: true, predicate: AccumulationAnnotationsDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
     Template()
 ], AccumulationChartComponent.prototype, "tooltip_template", void 0);
+__decorate([
+    Template()
+], AccumulationChartComponent.prototype, "legendSettings_template", void 0);
 AccumulationChartComponent = __decorate([
     ComponentMixins([ComponentBase])
 ], AccumulationChartComponent);
@@ -1770,8 +1789,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Component,
             args: [{
                     selector: 'ejs-accumulationchart',
-                    inputs: inputs$7,
-                    outputs: outputs$r,
+                    inputs: inputs$8,
+                    outputs: outputs$u,
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     queries: {
@@ -1782,6 +1801,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.Injector }]; }, propDecorators: { tooltip_template: [{
                 type: ContentChild,
                 args: ['tooltipTemplate']
+            }], legendSettings_template: [{
+                type: ContentChild,
+                args: ['legendSettingsTemplate']
             }] } });
 
 /**
@@ -1869,8 +1891,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }] });
 
-let input$j = ['animation', 'border', 'dashArray', 'dataSource', 'fill', 'opacity', 'query', 'type', 'width', 'xName', 'yName'];
-let outputs$q = [];
+let input$l = ['animation', 'border', 'dashArray', 'dataSource', 'fill', 'opacity', 'query', 'type', 'width', 'xName', 'yName'];
+let outputs$t = [];
 /**
  * RangenavigatorSeries Directive
  * ```html
@@ -1884,8 +1906,8 @@ class RangenavigatorSeriesDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$q);
-        this.directivePropList = input$j;
+        this.registerEvents(outputs$t);
+        this.directivePropList = input$l;
     }
 }
 RangenavigatorSeriesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RangenavigatorSeriesDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -1894,8 +1916,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'e-rangenavigator-series-collection>e-rangenavigator-series',
-                    inputs: input$j,
-                    outputs: outputs$q,
+                    inputs: input$l,
+                    outputs: outputs$t,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
@@ -1920,9 +1942,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-const inputs$6 = ['allowIntervalData', 'allowSnapping', 'animationDuration', 'background', 'dataSource', 'disableRangeSelector', 'enableDeferredUpdate', 'enableGrouping', 'enablePersistence', 'enableRtl', 'groupBy', 'height', 'interval', 'intervalType', 'labelFormat', 'labelIntersectAction', 'labelPlacement', 'labelPosition', 'labelStyle', 'locale', 'logBase', 'majorGridLines', 'majorTickLines', 'margin', 'maximum', 'minimum', 'navigatorBorder', 'navigatorStyleSettings', 'periodSelectorSettings', 'query', 'secondaryLabelAlignment', 'series', 'skeleton', 'skeletonType', 'theme', 'tickPosition', 'tooltip', 'useGroupingSeparator', 'value', 'valueType', 'width', 'xName', 'yName'];
-const outputs$p = ['beforePrint', 'beforeResize', 'changed', 'labelRender', 'load', 'loaded', 'resized', 'selectorRender', 'tooltipRender', 'dataSourceChange'];
-const twoWays$6 = ['dataSource'];
+const inputs$7 = ['allowIntervalData', 'allowSnapping', 'animationDuration', 'background', 'dataSource', 'disableRangeSelector', 'enableDeferredUpdate', 'enableGrouping', 'enablePersistence', 'enableRtl', 'groupBy', 'height', 'interval', 'intervalType', 'labelFormat', 'labelIntersectAction', 'labelPlacement', 'labelPosition', 'labelStyle', 'locale', 'logBase', 'majorGridLines', 'majorTickLines', 'margin', 'maximum', 'minimum', 'navigatorBorder', 'navigatorStyleSettings', 'periodSelectorSettings', 'query', 'secondaryLabelAlignment', 'series', 'skeleton', 'skeletonType', 'theme', 'tickPosition', 'tooltip', 'useGroupingSeparator', 'value', 'valueType', 'width', 'xName', 'yName'];
+const outputs$s = ['beforePrint', 'beforeResize', 'changed', 'labelRender', 'load', 'loaded', 'resized', 'selectorRender', 'tooltipRender', 'dataSourceChange'];
+const twoWays$7 = ['dataSource'];
 /**
  * RangeNavigator Component
  * ```html
@@ -1995,8 +2017,8 @@ let RangeNavigatorComponent = class RangeNavigatorComponent extends RangeNavigat
             }
         }
         catch (_h) { }
-        this.registerEvents(outputs$p);
-        this.addTwoWay.call(this, twoWays$6);
+        this.registerEvents(outputs$s);
+        this.addTwoWay.call(this, twoWays$7);
         setValue('currentInstance', this, this.viewContainerRef);
         this.context = new ComponentBase();
     }
@@ -2026,8 +2048,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Component,
             args: [{
                     selector: 'ejs-rangenavigator',
-                    inputs: inputs$6,
-                    outputs: outputs$p,
+                    inputs: inputs$7,
+                    outputs: outputs$s,
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     queries: {
@@ -2095,15 +2117,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }] });
 
-let input$i = ['color', 'endRange', 'opacity', 'startRange'];
-let outputs$o = [];
+let input$k = ['color', 'endRange', 'opacity', 'startRange'];
+let outputs$r = [];
 class RangeBandSettingDirective extends ComplexBase {
     constructor(viewContainerRef) {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$o);
-        this.directivePropList = input$i;
+        this.registerEvents(outputs$r);
+        this.directivePropList = input$k;
     }
 }
 RangeBandSettingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RangeBandSettingDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -2112,8 +2134,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'e-rangeBandSettings>e-rangeBandSetting',
-                    inputs: input$i,
-                    outputs: outputs$o,
+                    inputs: input$k,
+                    outputs: outputs$r,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
@@ -2138,9 +2160,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-const inputs$5 = ['axisSettings', 'border', 'containerArea', 'dataLabelSettings', 'dataSource', 'enablePersistence', 'enableRtl', 'endPointColor', 'fill', 'format', 'height', 'highPointColor', 'lineWidth', 'locale', 'lowPointColor', 'markerSettings', 'negativePointColor', 'opacity', 'padding', 'palette', 'query', 'rangeBandSettings', 'rangePadding', 'startPointColor', 'theme', 'tiePointColor', 'tooltipSettings', 'type', 'useGroupingSeparator', 'valueType', 'width', 'xName', 'yName'];
-const outputs$n = ['axisRendering', 'dataLabelRendering', 'load', 'loaded', 'markerRendering', 'pointRegionMouseClick', 'pointRegionMouseMove', 'pointRendering', 'resize', 'seriesRendering', 'sparklineMouseClick', 'sparklineMouseMove', 'tooltipInitialize'];
-const twoWays$5 = [''];
+const inputs$6 = ['axisSettings', 'border', 'containerArea', 'dataLabelSettings', 'dataSource', 'enablePersistence', 'enableRtl', 'endPointColor', 'fill', 'format', 'height', 'highPointColor', 'lineWidth', 'locale', 'lowPointColor', 'markerSettings', 'negativePointColor', 'opacity', 'padding', 'palette', 'query', 'rangeBandSettings', 'rangePadding', 'startPointColor', 'theme', 'tiePointColor', 'tooltipSettings', 'type', 'useGroupingSeparator', 'valueType', 'width', 'xName', 'yName'];
+const outputs$q = ['axisRendering', 'dataLabelRendering', 'load', 'loaded', 'markerRendering', 'pointRegionMouseClick', 'pointRegionMouseMove', 'pointRendering', 'resize', 'seriesRendering', 'sparklineMouseClick', 'sparklineMouseMove', 'tooltipInitialize'];
+const twoWays$6 = [''];
 /**
  * Sparkline Component
  * ```html
@@ -2164,8 +2186,8 @@ let SparklineComponent = class SparklineComponent extends Sparkline {
             }
         }
         catch (_a) { }
-        this.registerEvents(outputs$n);
-        this.addTwoWay.call(this, twoWays$5);
+        this.registerEvents(outputs$q);
+        this.addTwoWay.call(this, twoWays$6);
         setValue('currentInstance', this, this.viewContainerRef);
         this.context = new ComponentBase();
     }
@@ -2192,8 +2214,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Component,
             args: [{
                     selector: 'ejs-sparkline',
-                    inputs: inputs$5,
-                    outputs: outputs$n,
+                    inputs: inputs$6,
+                    outputs: outputs$q,
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     queries: {
@@ -2255,15 +2277,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }] });
 
-let input$h = ['animationDuration', 'dataSource', 'enableAnimation', 'enableSmartLabels', 'fill', 'marker', 'name', 'opacity', 'points', 'reactance', 'resistance', 'tooltip', 'tooltipMappingName', 'visibility', 'width'];
-let outputs$m = [];
+let input$j = ['animationDuration', 'dataSource', 'enableAnimation', 'enableSmartLabels', 'fill', 'marker', 'name', 'opacity', 'points', 'reactance', 'resistance', 'tooltip', 'tooltipMappingName', 'visibility', 'width'];
+let outputs$p = [];
 class SmithchartSeriesDirective extends ComplexBase {
     constructor(viewContainerRef) {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$m);
-        this.directivePropList = input$h;
+        this.registerEvents(outputs$p);
+        this.directivePropList = input$j;
     }
 }
 SmithchartSeriesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SmithchartSeriesDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -2272,8 +2294,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'e-seriesCollection>e-series',
-                    inputs: input$h,
-                    outputs: outputs$m,
+                    inputs: input$j,
+                    outputs: outputs$p,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
@@ -2298,9 +2320,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-const inputs$4 = ['background', 'border', 'elementSpacing', 'enablePersistence', 'enableRtl', 'font', 'height', 'horizontalAxis', 'legendSettings', 'locale', 'margin', 'radialAxis', 'radius', 'renderType', 'series', 'theme', 'title', 'width'];
-const outputs$l = ['animationComplete', 'axisLabelRender', 'beforePrint', 'legendRender', 'load', 'loaded', 'seriesRender', 'subtitleRender', 'textRender', 'titleRender', 'tooltipRender'];
-const twoWays$4 = [''];
+const inputs$5 = ['background', 'border', 'elementSpacing', 'enablePersistence', 'enableRtl', 'font', 'height', 'horizontalAxis', 'legendSettings', 'locale', 'margin', 'radialAxis', 'radius', 'renderType', 'series', 'theme', 'title', 'width'];
+const outputs$o = ['animationComplete', 'axisLabelRender', 'beforePrint', 'legendRender', 'load', 'loaded', 'seriesRender', 'subtitleRender', 'textRender', 'titleRender', 'tooltipRender'];
+const twoWays$5 = [''];
 /**
  * Smithchart Component
  * ```html
@@ -2331,8 +2353,8 @@ let SmithchartComponent = class SmithchartComponent extends Smithchart {
             }
         }
         catch (_b) { }
-        this.registerEvents(outputs$l);
-        this.addTwoWay.call(this, twoWays$4);
+        this.registerEvents(outputs$o);
+        this.addTwoWay.call(this, twoWays$5);
         setValue('currentInstance', this, this.viewContainerRef);
         this.context = new ComponentBase();
     }
@@ -2359,8 +2381,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Component,
             args: [{
                     selector: 'ejs-smithchart',
-                    inputs: inputs$4,
-                    outputs: outputs$l,
+                    inputs: inputs$5,
+                    outputs: outputs$o,
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     queries: {
@@ -2425,8 +2447,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }] });
 
-let input$g = ['accessibility', 'animation', 'backwardForecast', 'dashArray', 'enableTooltip', 'fill', 'forwardForecast', 'intercept', 'legendShape', 'marker', 'name', 'period', 'polynomialOrder', 'type', 'visible', 'width'];
-let outputs$k = [];
+let input$i = ['accessibility', 'animation', 'backwardForecast', 'dashArray', 'enableTooltip', 'fill', 'forwardForecast', 'intercept', 'legendShape', 'linearGradient', 'marker', 'name', 'period', 'polynomialOrder', 'radialGradient', 'type', 'visible', 'width'];
+let outputs$n = [];
 /**
  * Series Directive
  * ```html
@@ -2445,18 +2467,18 @@ class StockChartTrendlineDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$k);
-        this.directivePropList = input$g;
+        this.registerEvents(outputs$n);
+        this.directivePropList = input$i;
     }
 }
 StockChartTrendlineDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StockChartTrendlineDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-StockChartTrendlineDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: StockChartTrendlineDirective, selector: "e-stockchart-series>e-trendlines>e-trendline", inputs: { accessibility: "accessibility", animation: "animation", backwardForecast: "backwardForecast", dashArray: "dashArray", enableTooltip: "enableTooltip", fill: "fill", forwardForecast: "forwardForecast", intercept: "intercept", legendShape: "legendShape", marker: "marker", name: "name", period: "period", polynomialOrder: "polynomialOrder", type: "type", visible: "visible", width: "width" }, usesInheritance: true, ngImport: i0 });
+StockChartTrendlineDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: StockChartTrendlineDirective, selector: "e-stockchart-series>e-trendlines>e-trendline", inputs: { accessibility: "accessibility", animation: "animation", backwardForecast: "backwardForecast", dashArray: "dashArray", enableTooltip: "enableTooltip", fill: "fill", forwardForecast: "forwardForecast", intercept: "intercept", legendShape: "legendShape", linearGradient: "linearGradient", marker: "marker", name: "name", period: "period", polynomialOrder: "polynomialOrder", radialGradient: "radialGradient", type: "type", visible: "visible", width: "width" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StockChartTrendlineDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'e-stockchart-series>e-trendlines>e-trendline',
-                    inputs: input$g,
-                    outputs: outputs$k,
+                    inputs: input$i,
+                    outputs: outputs$n,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
@@ -2481,8 +2503,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-let input$f = ['animation', 'bearFillColor', 'border', 'bullFillColor', 'cardinalSplineTension', 'close', 'columnSpacing', 'columnWidth', 'cornerRadius', 'dashArray', 'dataSource', 'emptyPointSettings', 'enableSolidCandles', 'enableTooltip', 'fill', 'high', 'lastValueLabel', 'legendImageUrl', 'legendShape', 'low', 'marker', 'name', 'opacity', 'open', 'pointColorMapping', 'query', 'selectionStyle', 'showNearestTooltip', 'tooltipMappingName', 'trendlines', 'type', 'visible', 'volume', 'width', 'xAxisName', 'xName', 'yAxisName', 'yName'];
-let outputs$j = [];
+let input$h = ['animation', 'bearFillColor', 'border', 'bullFillColor', 'cardinalSplineTension', 'close', 'columnSpacing', 'columnWidth', 'cornerRadius', 'dashArray', 'dataSource', 'emptyPointSettings', 'enableSolidCandles', 'enableTooltip', 'fill', 'high', 'labelSettings', 'lastValueLabel', 'legendImageUrl', 'legendShape', 'linearGradient', 'low', 'marker', 'name', 'opacity', 'open', 'pointColorMapping', 'query', 'radialGradient', 'selectionStyle', 'showNearestTooltip', 'tooltipMappingName', 'trendlines', 'type', 'visible', 'volume', 'width', 'xAxisName', 'xName', 'yAxisName', 'yName'];
+let outputs$m = [];
 /**
  * Series Directive
  * ```html
@@ -2497,18 +2519,18 @@ class StockChartSeriesDirective extends ComplexBase {
         this.viewContainerRef = viewContainerRef;
         this.tags = ['trendlines'];
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$j);
-        this.directivePropList = input$f;
+        this.registerEvents(outputs$m);
+        this.directivePropList = input$h;
     }
 }
 StockChartSeriesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StockChartSeriesDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-StockChartSeriesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: StockChartSeriesDirective, selector: "e-stockchart-series-collection>e-stockchart-series", inputs: { animation: "animation", bearFillColor: "bearFillColor", border: "border", bullFillColor: "bullFillColor", cardinalSplineTension: "cardinalSplineTension", close: "close", columnSpacing: "columnSpacing", columnWidth: "columnWidth", cornerRadius: "cornerRadius", dashArray: "dashArray", dataSource: "dataSource", emptyPointSettings: "emptyPointSettings", enableSolidCandles: "enableSolidCandles", enableTooltip: "enableTooltip", fill: "fill", high: "high", lastValueLabel: "lastValueLabel", legendImageUrl: "legendImageUrl", legendShape: "legendShape", low: "low", marker: "marker", name: "name", opacity: "opacity", open: "open", pointColorMapping: "pointColorMapping", query: "query", selectionStyle: "selectionStyle", showNearestTooltip: "showNearestTooltip", tooltipMappingName: "tooltipMappingName", trendlines: "trendlines", type: "type", visible: "visible", volume: "volume", width: "width", xAxisName: "xAxisName", xName: "xName", yAxisName: "yAxisName", yName: "yName" }, queries: [{ propertyName: "childTrendlines", first: true, predicate: StockChartTrendlinesDirective, descendants: true }], usesInheritance: true, ngImport: i0 });
+StockChartSeriesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: StockChartSeriesDirective, selector: "e-stockchart-series-collection>e-stockchart-series", inputs: { animation: "animation", bearFillColor: "bearFillColor", border: "border", bullFillColor: "bullFillColor", cardinalSplineTension: "cardinalSplineTension", close: "close", columnSpacing: "columnSpacing", columnWidth: "columnWidth", cornerRadius: "cornerRadius", dashArray: "dashArray", dataSource: "dataSource", emptyPointSettings: "emptyPointSettings", enableSolidCandles: "enableSolidCandles", enableTooltip: "enableTooltip", fill: "fill", high: "high", labelSettings: "labelSettings", lastValueLabel: "lastValueLabel", legendImageUrl: "legendImageUrl", legendShape: "legendShape", linearGradient: "linearGradient", low: "low", marker: "marker", name: "name", opacity: "opacity", open: "open", pointColorMapping: "pointColorMapping", query: "query", radialGradient: "radialGradient", selectionStyle: "selectionStyle", showNearestTooltip: "showNearestTooltip", tooltipMappingName: "tooltipMappingName", trendlines: "trendlines", type: "type", visible: "visible", volume: "volume", width: "width", xAxisName: "xAxisName", xName: "xName", yAxisName: "yAxisName", yName: "yName" }, queries: [{ propertyName: "childTrendlines", first: true, predicate: StockChartTrendlinesDirective, descendants: true }], usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StockChartSeriesDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'e-stockchart-series-collection>e-stockchart-series',
-                    inputs: input$f,
-                    outputs: outputs$j,
+                    inputs: input$h,
+                    outputs: outputs$m,
                     queries: {
                         childTrendlines: new ContentChild(StockChartTrendlinesDirective)
                     }
@@ -2535,8 +2557,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-let input$e = ['coefficient', 'crossesAt', 'crossesInAxis', 'crosshairTooltip', 'description', 'desiredIntervals', 'edgeLabelPlacement', 'enableAutoIntervalOnZooming', 'enableTrim', 'interval', 'intervalType', 'isInversed', 'labelFormat', 'labelIntersectAction', 'labelPlacement', 'labelPosition', 'labelRotation', 'labelStyle', 'lineStyle', 'logBase', 'majorGridLines', 'majorTickLines', 'maximum', 'maximumLabelWidth', 'maximumLabels', 'minimum', 'minorGridLines', 'minorTickLines', 'minorTicksPerInterval', 'name', 'opposedPosition', 'placeNextToAxisLine', 'plotOffset', 'rangePadding', 'rowIndex', 'skeleton', 'skeletonType', 'span', 'startAngle', 'stripLines', 'tabIndex', 'tickPosition', 'title', 'titleStyle', 'valueType', 'visible', 'zoomFactor', 'zoomPosition'];
-let outputs$i = [];
+let input$g = ['coefficient', 'crossesAt', 'crossesInAxis', 'crosshairTooltip', 'description', 'desiredIntervals', 'edgeLabelPlacement', 'enableAutoIntervalOnZooming', 'enableTrim', 'interval', 'intervalType', 'isInversed', 'labelFormat', 'labelIntersectAction', 'labelPlacement', 'labelPosition', 'labelRotation', 'labelStyle', 'lineStyle', 'logBase', 'majorGridLines', 'majorTickLines', 'maximum', 'maximumLabelWidth', 'maximumLabels', 'minimum', 'minorGridLines', 'minorTickLines', 'minorTicksPerInterval', 'name', 'opposedPosition', 'placeNextToAxisLine', 'plotOffset', 'rangePadding', 'rowIndex', 'skeleton', 'skeletonType', 'span', 'startAngle', 'stripLines', 'tabIndex', 'tickPosition', 'title', 'titleStyle', 'valueType', 'visible', 'zoomFactor', 'zoomPosition'];
+let outputs$l = [];
 /**
  * Axis Directive
  * ```html
@@ -2548,8 +2570,8 @@ class StockChartAxisDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$i);
-        this.directivePropList = input$e;
+        this.registerEvents(outputs$l);
+        this.directivePropList = input$g;
     }
 }
 StockChartAxisDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StockChartAxisDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -2558,8 +2580,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'e-stockchart-axes>e-stockchart-axis',
-                    inputs: input$e,
-                    outputs: outputs$i,
+                    inputs: input$g,
+                    outputs: outputs$l,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
@@ -2584,8 +2606,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-let input$d = ['border', 'height'];
-let outputs$h = [];
+let input$f = ['border', 'height'];
+let outputs$k = [];
 /**
  * Row Directive
  * ```html
@@ -2597,8 +2619,8 @@ class StockChartRowDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$h);
-        this.directivePropList = input$d;
+        this.registerEvents(outputs$k);
+        this.directivePropList = input$f;
     }
 }
 StockChartRowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StockChartRowDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -2607,8 +2629,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'e-stockchart-rows>e-striplines>e-stockchart-row',
-                    inputs: input$d,
-                    outputs: outputs$h,
+                    inputs: input$f,
+                    outputs: outputs$k,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
@@ -2633,8 +2655,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-let input$c = ['content', 'coordinateUnits', 'description', 'horizontalAlignment', 'region', 'verticalAlignment', 'x', 'xAxisName', 'y', 'yAxisName'];
-let outputs$g = [];
+let input$e = ['content', 'coordinateUnits', 'description', 'horizontalAlignment', 'region', 'verticalAlignment', 'x', 'xAxisName', 'y', 'yAxisName'];
+let outputs$j = [];
 /**
  * Annotation Directive
  * ```html
@@ -2646,8 +2668,8 @@ class StockChartAnnotationDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$g);
-        this.directivePropList = input$c;
+        this.registerEvents(outputs$j);
+        this.directivePropList = input$e;
     }
 }
 StockChartAnnotationDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StockChartAnnotationDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -2659,8 +2681,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'ejs-stockchart-annotations>e-stockchart-annotation',
-                    inputs: input$c,
-                    outputs: outputs$g,
+                    inputs: input$e,
+                    outputs: outputs$j,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { content: [{
@@ -2688,8 +2710,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-let input$b = ['point', 'series'];
-let outputs$f = [];
+let input$d = ['point', 'series'];
+let outputs$i = [];
 /**
  * Selected Data Directive
  * ```html
@@ -2701,8 +2723,8 @@ class StockChartSelectedDataIndexDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$f);
-        this.directivePropList = input$b;
+        this.registerEvents(outputs$i);
+        this.directivePropList = input$d;
     }
 }
 StockChartSelectedDataIndexDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StockChartSelectedDataIndexDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -2711,8 +2733,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'ejs-stockchart-selectedDataIndexes>e-stockchart-selectedDataIndex',
-                    inputs: input$b,
-                    outputs: outputs$f,
+                    inputs: input$d,
+                    outputs: outputs$i,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
@@ -2737,8 +2759,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-let input$a = ['interval', 'intervalType', 'selected', 'text'];
-let outputs$e = [];
+let input$c = ['interval', 'intervalType', 'selected', 'text'];
+let outputs$h = [];
 /**
  * Indicator Directive
  * ```html
@@ -2752,8 +2774,8 @@ class StockChartPeriodDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$e);
-        this.directivePropList = input$a;
+        this.registerEvents(outputs$h);
+        this.directivePropList = input$c;
     }
 }
 StockChartPeriodDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StockChartPeriodDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -2762,8 +2784,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'e-stockchart-indicators>e-stockchart-period',
-                    inputs: input$a,
-                    outputs: outputs$e,
+                    inputs: input$c,
+                    outputs: outputs$h,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
@@ -2788,8 +2810,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-let input$9 = ['background', 'border', 'date', 'description', 'placeAt', 'seriesIndexes', 'showOnSeries', 'text', 'textStyle', 'type'];
-let outputs$d = [];
+let input$b = ['background', 'border', 'date', 'description', 'placeAt', 'seriesIndexes', 'showOnSeries', 'text', 'textStyle', 'type'];
+let outputs$g = [];
 /**
  * StockEvents
  * ```html
@@ -2803,8 +2825,8 @@ class StockEventDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$d);
-        this.directivePropList = input$9;
+        this.registerEvents(outputs$g);
+        this.directivePropList = input$b;
     }
 }
 StockEventDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StockEventDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -2813,8 +2835,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'e-stockchart-indicators>e-stockchart-stockevent',
-                    inputs: input$9,
-                    outputs: outputs$d,
+                    inputs: input$b,
+                    outputs: outputs$g,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
@@ -2839,8 +2861,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-let input$8 = ['animation', 'bandColor', 'close', 'dPeriod', 'dashArray', 'dataSource', 'fastPeriod', 'field', 'fill', 'high', 'kPeriod', 'low', 'lowerLine', 'macdLine', 'macdNegativeColor', 'macdPositiveColor', 'macdType', 'open', 'overBought', 'overSold', 'period', 'periodLine', 'pointColorMapping', 'query', 'seriesName', 'showZones', 'slowPeriod', 'standardDeviation', 'type', 'upperLine', 'volume', 'width', 'xAxisName', 'xName', 'yAxisName'];
-let outputs$c = [];
+let input$a = ['animation', 'bandColor', 'close', 'dPeriod', 'dashArray', 'dataSource', 'fastPeriod', 'field', 'fill', 'high', 'kPeriod', 'linearGradient', 'low', 'lowerLine', 'macdLine', 'macdNegativeColor', 'macdPositiveColor', 'macdType', 'open', 'overBought', 'overSold', 'period', 'periodLine', 'pointColorMapping', 'query', 'radialGradient', 'seriesName', 'showZones', 'slowPeriod', 'standardDeviation', 'type', 'upperLine', 'volume', 'width', 'xAxisName', 'xName', 'yAxisName'];
+let outputs$f = [];
 /**
  * Indicator Directive
  * ```html
@@ -2854,18 +2876,18 @@ class StockChartIndicatorDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$c);
-        this.directivePropList = input$8;
+        this.registerEvents(outputs$f);
+        this.directivePropList = input$a;
     }
 }
 StockChartIndicatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StockChartIndicatorDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-StockChartIndicatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: StockChartIndicatorDirective, selector: "e-stockchart-indicators>e-stockchart-indicator", inputs: { animation: "animation", bandColor: "bandColor", close: "close", dPeriod: "dPeriod", dashArray: "dashArray", dataSource: "dataSource", fastPeriod: "fastPeriod", field: "field", fill: "fill", high: "high", kPeriod: "kPeriod", low: "low", lowerLine: "lowerLine", macdLine: "macdLine", macdNegativeColor: "macdNegativeColor", macdPositiveColor: "macdPositiveColor", macdType: "macdType", open: "open", overBought: "overBought", overSold: "overSold", period: "period", periodLine: "periodLine", pointColorMapping: "pointColorMapping", query: "query", seriesName: "seriesName", showZones: "showZones", slowPeriod: "slowPeriod", standardDeviation: "standardDeviation", type: "type", upperLine: "upperLine", volume: "volume", width: "width", xAxisName: "xAxisName", xName: "xName", yAxisName: "yAxisName" }, usesInheritance: true, ngImport: i0 });
+StockChartIndicatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: StockChartIndicatorDirective, selector: "e-stockchart-indicators>e-stockchart-indicator", inputs: { animation: "animation", bandColor: "bandColor", close: "close", dPeriod: "dPeriod", dashArray: "dashArray", dataSource: "dataSource", fastPeriod: "fastPeriod", field: "field", fill: "fill", high: "high", kPeriod: "kPeriod", linearGradient: "linearGradient", low: "low", lowerLine: "lowerLine", macdLine: "macdLine", macdNegativeColor: "macdNegativeColor", macdPositiveColor: "macdPositiveColor", macdType: "macdType", open: "open", overBought: "overBought", overSold: "overSold", period: "period", periodLine: "periodLine", pointColorMapping: "pointColorMapping", query: "query", radialGradient: "radialGradient", seriesName: "seriesName", showZones: "showZones", slowPeriod: "slowPeriod", standardDeviation: "standardDeviation", type: "type", upperLine: "upperLine", volume: "volume", width: "width", xAxisName: "xAxisName", xName: "xName", yAxisName: "yAxisName" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StockChartIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'e-stockchart-indicators>e-stockchart-indicator',
-                    inputs: input$8,
-                    outputs: outputs$c,
+                    inputs: input$a,
+                    outputs: outputs$f,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
@@ -2890,9 +2912,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-const inputs$3 = ['annotations', 'axes', 'background', 'border', 'chartArea', 'crosshair', 'dataSource', 'enableCustomRange', 'enablePeriodSelector', 'enablePersistence', 'enableRtl', 'enableSelector', 'exportType', 'height', 'indicatorType', 'indicators', 'isMultiSelect', 'isSelect', 'isTransposed', 'legendSettings', 'locale', 'margin', 'noDataTemplate', 'periods', 'primaryXAxis', 'primaryYAxis', 'rows', 'selectedDataIndexes', 'selectionMode', 'series', 'seriesType', 'stockEvents', 'theme', 'title', 'titleStyle', 'tooltip', 'trendlineType', 'width', 'zoomSettings'];
-const outputs$b = ['axisLabelRender', 'beforeExport', 'legendClick', 'legendRender', 'load', 'loaded', 'onZooming', 'pointClick', 'pointMove', 'rangeChange', 'selectorRender', 'seriesRender', 'stockChartMouseClick', 'stockChartMouseDown', 'stockChartMouseLeave', 'stockChartMouseMove', 'stockChartMouseUp', 'stockEventRender', 'tooltipRender', 'dataSourceChange'];
-const twoWays$3 = ['dataSource'];
+const inputs$4 = ['annotations', 'axes', 'background', 'border', 'chartArea', 'crosshair', 'dataSource', 'enableCustomRange', 'enablePeriodSelector', 'enablePersistence', 'enableRtl', 'enableSelector', 'exportType', 'height', 'indicatorType', 'indicators', 'isMultiSelect', 'isSelect', 'isTransposed', 'legendSettings', 'locale', 'margin', 'noDataTemplate', 'periods', 'primaryXAxis', 'primaryYAxis', 'rows', 'selectedDataIndexes', 'selectionMode', 'series', 'seriesType', 'stockEvents', 'theme', 'title', 'titleStyle', 'tooltip', 'trendlineType', 'width', 'zoomSettings'];
+const outputs$e = ['axisLabelRender', 'beforeExport', 'crosshairLabelRender', 'legendClick', 'legendRender', 'load', 'loaded', 'onZooming', 'pointClick', 'pointMove', 'rangeChange', 'selectorRender', 'seriesRender', 'stockChartMouseClick', 'stockChartMouseDown', 'stockChartMouseLeave', 'stockChartMouseMove', 'stockChartMouseUp', 'stockEventRender', 'tooltipRender', 'dataSourceChange'];
+const twoWays$4 = ['dataSource'];
 /**
  * Stock Chart Component
  * ```html
@@ -3140,8 +3162,15 @@ let StockChartComponent = class StockChartComponent extends StockChart {
             }
         }
         catch (_8) { }
-        this.registerEvents(outputs$b);
-        this.addTwoWay.call(this, twoWays$3);
+        try {
+            let mod = this.injector.get('ChartsSeriesLabel');
+            if (this.injectedModules.indexOf(mod) === -1) {
+                this.injectedModules.push(mod);
+            }
+        }
+        catch (_9) { }
+        this.registerEvents(outputs$e);
+        this.addTwoWay.call(this, twoWays$4);
         setValue('currentInstance', this, this.viewContainerRef);
         this.context = new ComponentBase();
     }
@@ -3181,10 +3210,13 @@ let StockChartComponent = class StockChartComponent extends StockChart {
     }
 };
 StockChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: StockChartComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-StockChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: StockChartComponent, selector: "ejs-stockchart", inputs: { annotations: "annotations", axes: "axes", background: "background", border: "border", chartArea: "chartArea", crosshair: "crosshair", dataSource: "dataSource", enableCustomRange: "enableCustomRange", enablePeriodSelector: "enablePeriodSelector", enablePersistence: "enablePersistence", enableRtl: "enableRtl", enableSelector: "enableSelector", exportType: "exportType", height: "height", indicatorType: "indicatorType", indicators: "indicators", isMultiSelect: "isMultiSelect", isSelect: "isSelect", isTransposed: "isTransposed", legendSettings: "legendSettings", locale: "locale", margin: "margin", noDataTemplate: "noDataTemplate", periods: "periods", primaryXAxis: "primaryXAxis", primaryYAxis: "primaryYAxis", rows: "rows", selectedDataIndexes: "selectedDataIndexes", selectionMode: "selectionMode", series: "series", seriesType: "seriesType", stockEvents: "stockEvents", theme: "theme", title: "title", titleStyle: "titleStyle", tooltip: "tooltip", trendlineType: "trendlineType", width: "width", zoomSettings: "zoomSettings" }, outputs: { axisLabelRender: "axisLabelRender", beforeExport: "beforeExport", legendClick: "legendClick", legendRender: "legendRender", load: "load", loaded: "loaded", onZooming: "onZooming", pointClick: "pointClick", pointMove: "pointMove", rangeChange: "rangeChange", selectorRender: "selectorRender", seriesRender: "seriesRender", stockChartMouseClick: "stockChartMouseClick", stockChartMouseDown: "stockChartMouseDown", stockChartMouseLeave: "stockChartMouseLeave", stockChartMouseMove: "stockChartMouseMove", stockChartMouseUp: "stockChartMouseUp", stockEventRender: "stockEventRender", tooltipRender: "tooltipRender", dataSourceChange: "dataSourceChange" }, queries: [{ propertyName: "tooltip_template", first: true, predicate: ["tooltipTemplate"], descendants: true }, { propertyName: "childSeries", first: true, predicate: StockChartSeriesCollectionDirective, descendants: true }, { propertyName: "childAxes", first: true, predicate: StockChartAxesDirective, descendants: true }, { propertyName: "childRows", first: true, predicate: StockChartRowsDirective, descendants: true }, { propertyName: "childAnnotations", first: true, predicate: StockChartAnnotationsDirective, descendants: true }, { propertyName: "childSelectedDataIndexes", first: true, predicate: StockChartSelectedDataIndexesDirective, descendants: true }, { propertyName: "childPeriods", first: true, predicate: StockChartPeriodsDirective, descendants: true }, { propertyName: "childStockEvents", first: true, predicate: StockEventsDirective, descendants: true }, { propertyName: "childIndicators", first: true, predicate: StockChartIndicatorsDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+StockChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: StockChartComponent, selector: "ejs-stockchart", inputs: { annotations: "annotations", axes: "axes", background: "background", border: "border", chartArea: "chartArea", crosshair: "crosshair", dataSource: "dataSource", enableCustomRange: "enableCustomRange", enablePeriodSelector: "enablePeriodSelector", enablePersistence: "enablePersistence", enableRtl: "enableRtl", enableSelector: "enableSelector", exportType: "exportType", height: "height", indicatorType: "indicatorType", indicators: "indicators", isMultiSelect: "isMultiSelect", isSelect: "isSelect", isTransposed: "isTransposed", legendSettings: "legendSettings", locale: "locale", margin: "margin", noDataTemplate: "noDataTemplate", periods: "periods", primaryXAxis: "primaryXAxis", primaryYAxis: "primaryYAxis", rows: "rows", selectedDataIndexes: "selectedDataIndexes", selectionMode: "selectionMode", series: "series", seriesType: "seriesType", stockEvents: "stockEvents", theme: "theme", title: "title", titleStyle: "titleStyle", tooltip: "tooltip", trendlineType: "trendlineType", width: "width", zoomSettings: "zoomSettings" }, outputs: { axisLabelRender: "axisLabelRender", beforeExport: "beforeExport", crosshairLabelRender: "crosshairLabelRender", legendClick: "legendClick", legendRender: "legendRender", load: "load", loaded: "loaded", onZooming: "onZooming", pointClick: "pointClick", pointMove: "pointMove", rangeChange: "rangeChange", selectorRender: "selectorRender", seriesRender: "seriesRender", stockChartMouseClick: "stockChartMouseClick", stockChartMouseDown: "stockChartMouseDown", stockChartMouseLeave: "stockChartMouseLeave", stockChartMouseMove: "stockChartMouseMove", stockChartMouseUp: "stockChartMouseUp", stockEventRender: "stockEventRender", tooltipRender: "tooltipRender", dataSourceChange: "dataSourceChange" }, queries: [{ propertyName: "tooltip_template", first: true, predicate: ["tooltipTemplate"], descendants: true }, { propertyName: "legendSettings_template", first: true, predicate: ["legendSettingsTemplate"], descendants: true }, { propertyName: "childSeries", first: true, predicate: StockChartSeriesCollectionDirective, descendants: true }, { propertyName: "childAxes", first: true, predicate: StockChartAxesDirective, descendants: true }, { propertyName: "childRows", first: true, predicate: StockChartRowsDirective, descendants: true }, { propertyName: "childAnnotations", first: true, predicate: StockChartAnnotationsDirective, descendants: true }, { propertyName: "childSelectedDataIndexes", first: true, predicate: StockChartSelectedDataIndexesDirective, descendants: true }, { propertyName: "childPeriods", first: true, predicate: StockChartPeriodsDirective, descendants: true }, { propertyName: "childStockEvents", first: true, predicate: StockEventsDirective, descendants: true }, { propertyName: "childIndicators", first: true, predicate: StockChartIndicatorsDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
     Template()
 ], StockChartComponent.prototype, "tooltip_template", void 0);
+__decorate([
+    Template()
+], StockChartComponent.prototype, "legendSettings_template", void 0);
 StockChartComponent = __decorate([
     ComponentMixins([ComponentBase])
 ], StockChartComponent);
@@ -3192,8 +3224,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Component,
             args: [{
                     selector: 'ejs-stockchart',
-                    inputs: inputs$3,
-                    outputs: outputs$b,
+                    inputs: inputs$4,
+                    outputs: outputs$e,
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     queries: {
@@ -3210,6 +3242,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.Injector }]; }, propDecorators: { tooltip_template: [{
                 type: ContentChild,
                 args: ['tooltipTemplate']
+            }], legendSettings_template: [{
+                type: ContentChild,
+                args: ['legendSettingsTemplate']
             }] } });
 
 /**
@@ -3329,8 +3364,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }] });
 
-let input$7 = ['color', 'end', 'index', 'legendImageUrl', 'name', 'opacity', 'shape'];
-let outputs$a = [];
+let input$9 = ['color', 'end', 'index', 'legendImageUrl', 'name', 'opacity', 'shape'];
+let outputs$d = [];
 /**
  * BulletRange Directive
  * ```html
@@ -3344,8 +3379,8 @@ class BulletRangeDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$a);
-        this.directivePropList = input$7;
+        this.registerEvents(outputs$d);
+        this.directivePropList = input$9;
     }
 }
 BulletRangeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: BulletRangeDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -3354,8 +3389,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'e-bullet-range-collection>e-bullet-range',
-                    inputs: input$7,
-                    outputs: outputs$a,
+                    inputs: input$9,
+                    outputs: outputs$d,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
@@ -3380,9 +3415,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-const inputs$2 = ['animation', 'border', 'categoryField', 'categoryLabelStyle', 'dataLabel', 'dataSource', 'enableGroupSeparator', 'enablePersistence', 'enableRtl', 'height', 'interval', 'labelFormat', 'labelPosition', 'labelStyle', 'legendSettings', 'locale', 'majorTickLines', 'margin', 'maximum', 'minimum', 'minorTickLines', 'minorTicksPerInterval', 'opposedPosition', 'orientation', 'query', 'ranges', 'subtitle', 'subtitleStyle', 'tabIndex', 'targetColor', 'targetField', 'targetTypes', 'targetWidth', 'theme', 'tickPosition', 'title', 'titlePosition', 'titleStyle', 'tooltip', 'type', 'valueBorder', 'valueField', 'valueFill', 'valueHeight', 'width'];
-const outputs$9 = ['beforePrint', 'bulletChartMouseClick', 'legendRender', 'load', 'loaded', 'tooltipRender', 'dataSourceChange'];
-const twoWays$2 = ['dataSource'];
+const inputs$3 = ['animation', 'border', 'categoryField', 'categoryLabelStyle', 'dataLabel', 'dataSource', 'enableGroupSeparator', 'enablePersistence', 'enableRtl', 'height', 'interval', 'labelFormat', 'labelPosition', 'labelStyle', 'legendSettings', 'locale', 'majorTickLines', 'margin', 'maximum', 'minimum', 'minorTickLines', 'minorTicksPerInterval', 'opposedPosition', 'orientation', 'query', 'ranges', 'subtitle', 'subtitleStyle', 'tabIndex', 'targetColor', 'targetField', 'targetTypes', 'targetWidth', 'theme', 'tickPosition', 'title', 'titlePosition', 'titleStyle', 'tooltip', 'type', 'valueBorder', 'valueField', 'valueFill', 'valueHeight', 'width'];
+const outputs$c = ['beforePrint', 'bulletChartMouseClick', 'legendRender', 'load', 'loaded', 'tooltipRender', 'dataSourceChange'];
+const twoWays$3 = ['dataSource'];
 /**
  * BulletChart Component
  * ```html
@@ -3413,8 +3448,8 @@ let BulletChartComponent = class BulletChartComponent extends BulletChart {
             }
         }
         catch (_b) { }
-        this.registerEvents(outputs$9);
-        this.addTwoWay.call(this, twoWays$2);
+        this.registerEvents(outputs$c);
+        this.addTwoWay.call(this, twoWays$3);
         setValue('currentInstance', this, this.viewContainerRef);
         this.context = new ComponentBase();
     }
@@ -3444,8 +3479,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Component,
             args: [{
                     selector: 'ejs-bulletchart',
-                    inputs: inputs$2,
-                    outputs: outputs$9,
+                    inputs: inputs$3,
+                    outputs: outputs$c,
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     queries: {
@@ -3513,8 +3548,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }] });
 
-let input$6 = ['animation', 'columnFacet', 'columnSpacing', 'columnWidth', 'dataLabel', 'dataSource', 'emptyPointSettings', 'enableTooltip', 'fill', 'groupName', 'legendImageUrl', 'legendShape', 'name', 'opacity', 'pointColorMapping', 'query', 'size', 'stackingGroup', 'tooltipFormat', 'tooltipMappingName', 'type', 'visible', 'xAxisName', 'xName', 'yAxisName', 'yName'];
-let outputs$8 = [];
+let input$8 = ['animation', 'columnFacet', 'columnSpacing', 'columnWidth', 'dataLabel', 'dataSource', 'emptyPointSettings', 'enableTooltip', 'fill', 'groupName', 'legendImageUrl', 'legendShape', 'name', 'opacity', 'pointColorMapping', 'query', 'size', 'stackingGroup', 'tooltipFormat', 'tooltipMappingName', 'type', 'visible', 'xAxisName', 'xName', 'yAxisName', 'yName'];
+let outputs$b = [];
 /**
  * Series3D Directive
  * ```html
@@ -3528,8 +3563,8 @@ class Chart3DSeriesDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$8);
-        this.directivePropList = input$6;
+        this.registerEvents(outputs$b);
+        this.directivePropList = input$8;
     }
 }
 Chart3DSeriesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: Chart3DSeriesDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -3541,8 +3576,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'e-chart3d-series-collection>e-chart3d-series',
-                    inputs: input$6,
-                    outputs: outputs$8,
+                    inputs: input$8,
+                    outputs: outputs$b,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { dataLabel_template: [{
@@ -3570,8 +3605,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-let input$5 = ['columnIndex', 'desiredIntervals', 'edgeLabelPlacement', 'enableTrim', 'interval', 'intervalType', 'isIndexed', 'isInversed', 'labelFormat', 'labelIntersectAction', 'labelPadding', 'labelPlacement', 'labelRotation', 'labelStyle', 'logBase', 'majorGridLines', 'majorTickLines', 'maximum', 'maximumLabelWidth', 'maximumLabels', 'minimum', 'minorGridLines', 'minorTickLines', 'minorTicksPerInterval', 'name', 'opposedPosition', 'plotOffset', 'plotOffsetBottom', 'plotOffsetLeft', 'plotOffsetRight', 'plotOffsetTop', 'rangePadding', 'rowIndex', 'skeleton', 'skeletonType', 'span', 'startFromZero', 'title', 'titlePadding', 'titleRotation', 'titleStyle', 'valueType', 'visible'];
-let outputs$7 = [];
+let input$7 = ['columnIndex', 'desiredIntervals', 'edgeLabelPlacement', 'enableTrim', 'interval', 'intervalType', 'isIndexed', 'isInversed', 'labelFormat', 'labelIntersectAction', 'labelPadding', 'labelPlacement', 'labelRotation', 'labelStyle', 'logBase', 'majorGridLines', 'majorTickLines', 'maximum', 'maximumLabelWidth', 'maximumLabels', 'minimum', 'minorGridLines', 'minorTickLines', 'minorTicksPerInterval', 'name', 'opposedPosition', 'plotOffset', 'plotOffsetBottom', 'plotOffsetLeft', 'plotOffsetRight', 'plotOffsetTop', 'rangePadding', 'rowIndex', 'skeleton', 'skeletonType', 'span', 'startFromZero', 'title', 'titlePadding', 'titleRotation', 'titleStyle', 'valueType', 'visible'];
+let outputs$a = [];
 /**
  * Axis3D Directive
  * ```html
@@ -3583,8 +3618,8 @@ class Chart3DAxisDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$7);
-        this.directivePropList = input$5;
+        this.registerEvents(outputs$a);
+        this.directivePropList = input$7;
     }
 }
 Chart3DAxisDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: Chart3DAxisDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -3593,8 +3628,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'e-chart3daxes>e-chart3daxis',
-                    inputs: input$5,
-                    outputs: outputs$7,
+                    inputs: input$7,
+                    outputs: outputs$a,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
@@ -3619,8 +3654,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-let input$4 = ['height'];
-let outputs$6 = [];
+let input$6 = ['height'];
+let outputs$9 = [];
 /**
  * Row3D Directive
  * ```html
@@ -3632,8 +3667,8 @@ class Chart3DRowDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$6);
-        this.directivePropList = input$4;
+        this.registerEvents(outputs$9);
+        this.directivePropList = input$6;
     }
 }
 Chart3DRowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: Chart3DRowDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -3642,8 +3677,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'e-chart3d-rows>e-chart3d-row',
-                    inputs: input$4,
-                    outputs: outputs$6,
+                    inputs: input$6,
+                    outputs: outputs$9,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
@@ -3668,8 +3703,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-let input$3 = ['width'];
-let outputs$5 = [];
+let input$5 = ['width'];
+let outputs$8 = [];
 /**
  * Column3D Directive
  * ```html
@@ -3681,8 +3716,8 @@ class Chart3DColumnDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$5);
-        this.directivePropList = input$3;
+        this.registerEvents(outputs$8);
+        this.directivePropList = input$5;
     }
 }
 Chart3DColumnDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: Chart3DColumnDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -3691,8 +3726,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'e-chart3d-columns>e-chart3d-columns',
-                    inputs: input$3,
-                    outputs: outputs$5,
+                    inputs: input$5,
+                    outputs: outputs$8,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
@@ -3717,8 +3752,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-let input$2 = ['point', 'series'];
-let outputs$4 = [];
+let input$4 = ['point', 'series'];
+let outputs$7 = [];
 /**
  * Selected Data Directive
  * ```html
@@ -3730,8 +3765,8 @@ class Chart3DSelectedDataIndexDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$4);
-        this.directivePropList = input$2;
+        this.registerEvents(outputs$7);
+        this.directivePropList = input$4;
     }
 }
 Chart3DSelectedDataIndexDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: Chart3DSelectedDataIndexDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -3740,8 +3775,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'e-chart3d-selecteddataindexes>e-chart3d-selecteddataindex',
-                    inputs: input$2,
-                    outputs: outputs$4,
+                    inputs: input$4,
+                    outputs: outputs$7,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
@@ -3766,9 +3801,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-const inputs$1 = ['axes', 'background', 'backgroundImage', 'border', 'columns', 'currencyCode', 'dataSource', 'depth', 'description', 'enableExport', 'enablePersistence', 'enableRotation', 'enableRtl', 'enableSideBySidePlacement', 'height', 'highlightColor', 'highlightMode', 'highlightPattern', 'isMultiSelect', 'isTransposed', 'legendSettings', 'locale', 'margin', 'palettes', 'perspectiveAngle', 'primaryXAxis', 'primaryYAxis', 'rotation', 'rows', 'selectedDataIndexes', 'selectionMode', 'selectionPattern', 'series', 'subTitle', 'subTitleStyle', 'theme', 'tilt', 'title', 'titleStyle', 'tooltip', 'useGroupingSeparator', 'wallColor', 'wallSize', 'width'];
-const outputs$3 = ['afterExport', 'axisLabelRender', 'beforeExport', 'beforePrint', 'beforeResize', 'chart3DMouseClick', 'chart3DMouseDown', 'chart3DMouseLeave', 'chart3DMouseMove', 'chart3DMouseUp', 'legendClick', 'legendRender', 'load', 'loaded', 'pointClick', 'pointMove', 'pointRender', 'resized', 'selectionComplete', 'seriesRender', 'textRender', 'tooltipRender', 'dataSourceChange'];
-const twoWays$1 = ['dataSource'];
+const inputs$2 = ['axes', 'background', 'backgroundImage', 'border', 'columns', 'currencyCode', 'dataSource', 'depth', 'description', 'enableExport', 'enablePersistence', 'enableRotation', 'enableRtl', 'enableSideBySidePlacement', 'height', 'highlightColor', 'highlightMode', 'highlightPattern', 'isMultiSelect', 'isTransposed', 'legendSettings', 'locale', 'margin', 'palettes', 'perspectiveAngle', 'primaryXAxis', 'primaryYAxis', 'rotation', 'rows', 'selectedDataIndexes', 'selectionMode', 'selectionPattern', 'series', 'subTitle', 'subTitleStyle', 'theme', 'tilt', 'title', 'titleStyle', 'tooltip', 'useGroupingSeparator', 'wallColor', 'wallSize', 'width'];
+const outputs$6 = ['afterExport', 'axisLabelRender', 'beforeExport', 'beforePrint', 'beforeResize', 'chart3DMouseClick', 'chart3DMouseDown', 'chart3DMouseLeave', 'chart3DMouseMove', 'chart3DMouseUp', 'legendClick', 'legendRender', 'load', 'loaded', 'pointClick', 'pointMove', 'pointRender', 'resized', 'selectionComplete', 'seriesRender', 'textRender', 'tooltipRender', 'dataSourceChange'];
+const twoWays$2 = ['dataSource'];
 /**
  * 3D Chart Component
  * ```html
@@ -3883,8 +3918,8 @@ let Chart3DComponent = class Chart3DComponent extends Chart3D {
             }
         }
         catch (_p) { }
-        this.registerEvents(outputs$3);
-        this.addTwoWay.call(this, twoWays$1);
+        this.registerEvents(outputs$6);
+        this.addTwoWay.call(this, twoWays$2);
         setValue('currentInstance', this, this.viewContainerRef);
         this.context = new ComponentBase();
     }
@@ -3926,8 +3961,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Component,
             args: [{
                     selector: 'ejs-chart3d',
-                    inputs: inputs$1,
-                    outputs: outputs$3,
+                    inputs: inputs$2,
+                    outputs: outputs$6,
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     queries: {
@@ -4067,8 +4102,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }] });
 
-let input$1 = ['animation', 'dataLabel', 'dataSource', 'emptyPointSettings', 'enableTooltip', 'explode', 'explodeAll', 'explodeIndex', 'explodeOffset', 'innerRadius', 'legendImageUrl', 'legendShape', 'name', 'opacity', 'palettes', 'pointColorMapping', 'query', 'radius', 'tooltipMappingName', 'visible', 'xName', 'yName'];
-let outputs$2 = [];
+let input$3 = ['animation', 'dataLabel', 'dataSource', 'emptyPointSettings', 'enableTooltip', 'explode', 'explodeAll', 'explodeIndex', 'explodeOffset', 'innerRadius', 'legendImageUrl', 'legendShape', 'name', 'opacity', 'palettes', 'pointColorMapping', 'query', 'radius', 'tooltipMappingName', 'visible', 'xName', 'yName'];
+let outputs$5 = [];
 /**
  * Circular3D Series Directive
  * ```html
@@ -4082,8 +4117,8 @@ class CircularChart3DSeriesDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$2);
-        this.directivePropList = input$1;
+        this.registerEvents(outputs$5);
+        this.directivePropList = input$3;
     }
 }
 CircularChart3DSeriesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CircularChart3DSeriesDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -4095,8 +4130,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'e-circularchart3d-series-collection>e-circularchart3d-series',
-                    inputs: input$1,
-                    outputs: outputs$2,
+                    inputs: input$3,
+                    outputs: outputs$5,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { dataLabel_template: [{
@@ -4124,8 +4159,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-let input = ['point', 'series'];
-let outputs$1 = [];
+let input$2 = ['point', 'series'];
+let outputs$4 = [];
 /**
  * Selected Data Directive
  * ```html
@@ -4137,8 +4172,8 @@ class CircularChart3DSelectedDataIndexDirective extends ComplexBase {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$1);
-        this.directivePropList = input;
+        this.registerEvents(outputs$4);
+        this.directivePropList = input$2;
     }
 }
 CircularChart3DSelectedDataIndexDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: CircularChart3DSelectedDataIndexDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -4147,8 +4182,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'e-circularchart3d-selecteddataindexes>e-circularchart3d-selecteddataindex',
-                    inputs: input,
-                    outputs: outputs$1,
+                    inputs: input$2,
+                    outputs: outputs$4,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
@@ -4173,9 +4208,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-const inputs = ['background', 'backgroundImage', 'border', 'dataSource', 'depth', 'enableAnimation', 'enableExport', 'enablePersistence', 'enableRotation', 'enableRtl', 'height', 'highlightColor', 'highlightMode', 'highlightPattern', 'isMultiSelect', 'legendSettings', 'locale', 'margin', 'rotation', 'selectedDataIndexes', 'selectionMode', 'selectionPattern', 'series', 'subTitle', 'subTitleStyle', 'theme', 'tilt', 'title', 'titleStyle', 'tooltip', 'useGroupingSeparator', 'width'];
-const outputs = ['afterExport', 'beforeExport', 'beforePrint', 'beforeResize', 'circularChart3DMouseClick', 'circularChart3DMouseDown', 'circularChart3DMouseLeave', 'circularChart3DMouseMove', 'circularChart3DMouseUp', 'legendClick', 'legendRender', 'load', 'loaded', 'pointClick', 'pointMove', 'pointRender', 'resized', 'selectionComplete', 'seriesRender', 'textRender', 'tooltipRender', 'dataSourceChange'];
-const twoWays = ['dataSource'];
+const inputs$1 = ['background', 'backgroundImage', 'border', 'dataSource', 'depth', 'enableAnimation', 'enableExport', 'enablePersistence', 'enableRotation', 'enableRtl', 'height', 'highlightColor', 'highlightMode', 'highlightPattern', 'isMultiSelect', 'legendSettings', 'locale', 'margin', 'rotation', 'selectedDataIndexes', 'selectionMode', 'selectionPattern', 'series', 'subTitle', 'subTitleStyle', 'theme', 'tilt', 'title', 'titleStyle', 'tooltip', 'useGroupingSeparator', 'width'];
+const outputs$3 = ['afterExport', 'beforeExport', 'beforePrint', 'beforeResize', 'circularChart3DMouseClick', 'circularChart3DMouseDown', 'circularChart3DMouseLeave', 'circularChart3DMouseMove', 'circularChart3DMouseUp', 'legendClick', 'legendRender', 'load', 'loaded', 'pointClick', 'pointMove', 'pointRender', 'resized', 'selectionComplete', 'seriesRender', 'textRender', 'tooltipRender', 'dataSourceChange'];
+const twoWays$1 = ['dataSource'];
 /**
  * CircularChart3D Component
  * ```html
@@ -4241,8 +4276,8 @@ let CircularChart3DComponent = class CircularChart3DComponent extends CircularCh
             }
         }
         catch (_g) { }
-        this.registerEvents(outputs);
-        this.addTwoWay.call(this, twoWays);
+        this.registerEvents(outputs$3);
+        this.addTwoWay.call(this, twoWays$1);
         setValue('currentInstance', this, this.viewContainerRef);
         this.context = new ComponentBase();
     }
@@ -4275,8 +4310,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Component,
             args: [{
                     selector: 'ejs-circularchart3d',
-                    inputs: inputs,
-                    outputs: outputs,
+                    inputs: inputs$1,
+                    outputs: outputs$3,
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     queries: {
@@ -4368,9 +4403,282 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }] });
 
+let input$1 = ['color', 'id', 'label', 'offset'];
+let outputs$2 = [];
+/**
+ * Sankey Nodes Directive
+ * ```html
+ * <e-sankey-nodes>
+ * <e-sankey-node></e-sankey-node>
+ * </e-sankey-nodes>
+ * ```
+ */
+class SankeyNodeDirective extends ComplexBase {
+    constructor(viewContainerRef) {
+        super();
+        this.viewContainerRef = viewContainerRef;
+        setValue('currentInstance', this, this.viewContainerRef);
+        this.registerEvents(outputs$2);
+        this.directivePropList = input$1;
+    }
+}
+SankeyNodeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SankeyNodeDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+SankeyNodeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: SankeyNodeDirective, selector: "e-sankey-nodes>e-sankey-node", inputs: { color: "color", id: "id", label: "label", offset: "offset" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SankeyNodeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'e-sankey-nodes>e-sankey-node',
+                    inputs: input$1,
+                    outputs: outputs$2,
+                    queries: {}
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
+/**
+ * SankeyNode Array Directive
+ * @private
+ */
+class SankeyNodesCollectionDirective extends ArrayBase {
+    constructor() {
+        super('nodes');
+    }
+}
+SankeyNodesCollectionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SankeyNodesCollectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+SankeyNodesCollectionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: SankeyNodesCollectionDirective, selector: "ejs-sankey>e-sankey-nodes", queries: [{ propertyName: "children", predicate: SankeyNodeDirective }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SankeyNodesCollectionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ejs-sankey>e-sankey-nodes',
+                    queries: {
+                        children: new ContentChildren(SankeyNodeDirective)
+                    },
+                }]
+        }], ctorParameters: function () { return []; } });
+
+let input = ['sourceId', 'targetId', 'value'];
+let outputs$1 = [];
+/**
+ * Sankey Links Directive
+ * ```html
+ * <e-sankey-links>
+ * <e-sankey-link></e-sankey-link>
+ * </e-sankey-links>
+ * ```
+ */
+class SankeyLinkDirective extends ComplexBase {
+    constructor(viewContainerRef) {
+        super();
+        this.viewContainerRef = viewContainerRef;
+        setValue('currentInstance', this, this.viewContainerRef);
+        this.registerEvents(outputs$1);
+        this.directivePropList = input;
+    }
+}
+SankeyLinkDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SankeyLinkDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+SankeyLinkDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: SankeyLinkDirective, selector: "e-sankey-links>e-sankey-link", inputs: { sourceId: "sourceId", targetId: "targetId", value: "value" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SankeyLinkDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'e-sankey-links>e-sankey-link',
+                    inputs: input,
+                    outputs: outputs$1,
+                    queries: {}
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
+/**
+ * SankeyLink Array Directive
+ * @private
+ */
+class SankeyLinksCollectionDirective extends ArrayBase {
+    constructor() {
+        super('links');
+    }
+}
+SankeyLinksCollectionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SankeyLinksCollectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+SankeyLinksCollectionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: SankeyLinksCollectionDirective, selector: "ejs-sankey>e-sankey-links", queries: [{ propertyName: "children", predicate: SankeyLinkDirective }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SankeyLinksCollectionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ejs-sankey>e-sankey-links',
+                    queries: {
+                        children: new ContentChildren(SankeyLinkDirective)
+                    },
+                }]
+        }], ctorParameters: function () { return []; } });
+
+const inputs = ['accessibility', 'allowExport', 'animation', 'background', 'backgroundImage', 'border', 'enableExport', 'enablePersistence', 'enableRtl', 'focusBorderColor', 'focusBorderMargin', 'focusBorderWidth', 'height', 'labelSettings', 'legendSettings', 'linkStyle', 'links', 'locale', 'margin', 'nodeStyle', 'nodes', 'orientation', 'subTitle', 'subTitleStyle', 'theme', 'title', 'titleStyle', 'tooltip', 'width'];
+const outputs = ['afterExport', 'beforeExport', 'beforePrint', 'exportCompleted', 'labelRendering', 'legendItemHover', 'legendItemRendering', 'linkClick', 'linkEnter', 'linkLeave', 'linkRendering', 'load', 'loaded', 'nodeClick', 'nodeEnter', 'nodeLeave', 'nodeRendering', 'sizeChanged', 'tooltipRendering'];
+const twoWays = [''];
+/**
+ * Sankey Component
+ * ```html
+ * <ejs-sankey></ejs-sankey>
+ * ```
+ */
+let SankeyComponent = class SankeyComponent extends Sankey {
+    constructor(ngEle, srenderer, viewContainerRef, injector) {
+        super();
+        this.ngEle = ngEle;
+        this.srenderer = srenderer;
+        this.viewContainerRef = viewContainerRef;
+        this.injector = injector;
+        this.tags = ['nodes', 'links'];
+        this.element = this.ngEle.nativeElement;
+        this.injectedModules = this.injectedModules || [];
+        try {
+            let mod = this.injector.get('ChartsSankeyLegend');
+            if (this.injectedModules.indexOf(mod) === -1) {
+                this.injectedModules.push(mod);
+            }
+        }
+        catch (_a) { }
+        try {
+            let mod = this.injector.get('ChartsSankeyTooltip');
+            if (this.injectedModules.indexOf(mod) === -1) {
+                this.injectedModules.push(mod);
+            }
+        }
+        catch (_b) { }
+        try {
+            let mod = this.injector.get('ChartsSankeyHighlight');
+            if (this.injectedModules.indexOf(mod) === -1) {
+                this.injectedModules.push(mod);
+            }
+        }
+        catch (_c) { }
+        try {
+            let mod = this.injector.get('ChartsSankeyExport');
+            if (this.injectedModules.indexOf(mod) === -1) {
+                this.injectedModules.push(mod);
+            }
+        }
+        catch (_d) { }
+        this.registerEvents(outputs);
+        this.addTwoWay.call(this, twoWays);
+        setValue('currentInstance', this, this.viewContainerRef);
+        this.context = new ComponentBase();
+    }
+    ngOnInit() {
+        this.context.ngOnInit(this);
+    }
+    ngAfterViewInit() {
+        this.context.ngAfterViewInit(this);
+    }
+    ngOnDestroy() {
+        this.context.ngOnDestroy(this);
+    }
+    ngAfterContentChecked() {
+        this.tagObjects[0].instance = this.childNodes;
+        if (this.childLinks) {
+            this.tagObjects[1].instance = this.childLinks;
+        }
+        this.context.ngAfterContentChecked(this);
+    }
+};
+SankeyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SankeyComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+SankeyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: SankeyComponent, selector: "ejs-sankey", inputs: { accessibility: "accessibility", allowExport: "allowExport", animation: "animation", background: "background", backgroundImage: "backgroundImage", border: "border", enableExport: "enableExport", enablePersistence: "enablePersistence", enableRtl: "enableRtl", focusBorderColor: "focusBorderColor", focusBorderMargin: "focusBorderMargin", focusBorderWidth: "focusBorderWidth", height: "height", labelSettings: "labelSettings", legendSettings: "legendSettings", linkStyle: "linkStyle", links: "links", locale: "locale", margin: "margin", nodeStyle: "nodeStyle", nodes: "nodes", orientation: "orientation", subTitle: "subTitle", subTitleStyle: "subTitleStyle", theme: "theme", title: "title", titleStyle: "titleStyle", tooltip: "tooltip", width: "width" }, outputs: { afterExport: "afterExport", beforeExport: "beforeExport", beforePrint: "beforePrint", exportCompleted: "exportCompleted", labelRendering: "labelRendering", legendItemHover: "legendItemHover", legendItemRendering: "legendItemRendering", linkClick: "linkClick", linkEnter: "linkEnter", linkLeave: "linkLeave", linkRendering: "linkRendering", load: "load", loaded: "loaded", nodeClick: "nodeClick", nodeEnter: "nodeEnter", nodeLeave: "nodeLeave", nodeRendering: "nodeRendering", sizeChanged: "sizeChanged", tooltipRendering: "tooltipRendering" }, queries: [{ propertyName: "tooltip_sankeyNodeTemplate", first: true, predicate: ["tooltipSankeyNodeTemplate"], descendants: true }, { propertyName: "tooltip_sankeyLinkTemplate", first: true, predicate: ["tooltipSankeyLinkTemplate"], descendants: true }, { propertyName: "childNodes", first: true, predicate: SankeyNodesCollectionDirective, descendants: true }, { propertyName: "childLinks", first: true, predicate: SankeyLinksCollectionDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+__decorate([
+    Template()
+], SankeyComponent.prototype, "tooltip_sankeyNodeTemplate", void 0);
+__decorate([
+    Template()
+], SankeyComponent.prototype, "tooltip_sankeyLinkTemplate", void 0);
+SankeyComponent = __decorate([
+    ComponentMixins([ComponentBase])
+], SankeyComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SankeyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ejs-sankey',
+                    inputs: inputs,
+                    outputs: outputs,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    queries: {
+                        childNodes: new ContentChild(SankeyNodesCollectionDirective),
+                        childLinks: new ContentChild(SankeyLinksCollectionDirective)
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.Injector }]; }, propDecorators: { tooltip_sankeyNodeTemplate: [{
+                type: ContentChild,
+                args: ['tooltipSankeyNodeTemplate']
+            }], tooltip_sankeyLinkTemplate: [{
+                type: ContentChild,
+                args: ['tooltipSankeyLinkTemplate']
+            }] } });
+
+/**
+ * NgModule definition for the Sankey component.
+ */
+class SankeyModule {
+}
+SankeyModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SankeyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SankeyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SankeyModule, declarations: [SankeyComponent,
+        SankeyNodeDirective,
+        SankeyNodesCollectionDirective,
+        SankeyLinkDirective,
+        SankeyLinksCollectionDirective], imports: [CommonModule], exports: [SankeyComponent,
+        SankeyNodeDirective,
+        SankeyNodesCollectionDirective,
+        SankeyLinkDirective,
+        SankeyLinksCollectionDirective] });
+SankeyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SankeyModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SankeyModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [
+                        SankeyComponent,
+                        SankeyNodeDirective,
+                        SankeyNodesCollectionDirective,
+                        SankeyLinkDirective,
+                        SankeyLinksCollectionDirective
+                    ],
+                    exports: [
+                        SankeyComponent,
+                        SankeyNodeDirective,
+                        SankeyNodesCollectionDirective,
+                        SankeyLinkDirective,
+                        SankeyLinksCollectionDirective
+                    ]
+                }]
+        }] });
+
+const SankeyLegendService = { provide: 'ChartsSankeyLegend', useValue: SankeyLegend };
+const SankeyTooltipService = { provide: 'ChartsSankeyTooltip', useValue: SankeyTooltip };
+const SankeyHighlightService = { provide: 'ChartsSankeyHighlight', useValue: SankeyHighlight };
+const SankeyExportService = { provide: 'ChartsSankeyExport', useValue: SankeyExport };
+/**
+ * NgModule definition for the Sankey component with providers.
+ */
+class SankeyAllModule {
+}
+SankeyAllModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SankeyAllModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SankeyAllModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SankeyAllModule, imports: [CommonModule, SankeyModule], exports: [SankeyModule] });
+SankeyAllModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SankeyAllModule, providers: [
+        SankeyLegendService,
+        SankeyTooltipService,
+        SankeyHighlightService,
+        SankeyExportService
+    ], imports: [[CommonModule, SankeyModule], SankeyModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SankeyAllModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, SankeyModule],
+                    exports: [
+                        SankeyModule
+                    ],
+                    providers: [
+                        SankeyLegendService,
+                        SankeyTooltipService,
+                        SankeyHighlightService,
+                        SankeyExportService
+                    ]
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AccumulationAnnotationDirective, AccumulationAnnotationService, AccumulationAnnotationsDirective, AccumulationChartAllModule, AccumulationChartComponent, AccumulationChartModule, AccumulationDataLabelService, AccumulationDistributionIndicatorService, AccumulationHighlightService, AccumulationLegendService, AccumulationSelectionService, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, AccumulationTooltipService, AnnotationDirective, AnnotationsDirective, AreaSeriesService, AtrIndicatorService, AxesDirective, AxisDirective, BarSeries3DService, BarSeriesService, BollingerBandsService, BoxAndWhiskerSeriesService, BubbleSeriesService, BulletChartAllModule, BulletChartComponent, BulletChartLegendService, BulletChartModule, BulletRangeCollectionDirective, BulletRangeDirective, BulletTooltipService, CandleSeriesService, CategoriesDirective, Category3DService, CategoryDirective, CategoryService, Chart3DAllModule, Chart3DAxesDirective, Chart3DAxisDirective, Chart3DColumnDirective, Chart3DColumnsDirective, Chart3DComponent, Chart3DModule, Chart3DRowDirective, Chart3DRowsDirective, Chart3DSelectedDataIndexDirective, Chart3DSelectedDataIndexesDirective, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective, ChartAllModule, ChartAnnotationService, ChartComponent, ChartModule, CircularChart3DAllModule, CircularChart3DComponent, CircularChart3DModule, CircularChart3DSelectedDataIndexDirective, CircularChart3DSelectedDataIndexesDirective, CircularChart3DSeriesCollectionDirective, CircularChart3DSeriesDirective, CircularChartDataLabel3DService, CircularChartExport3DService, CircularChartHighlight3DService, CircularChartLegend3DService, CircularChartSelection3DService, CircularChartTooltip3DService, ColumnDirective, ColumnSeries3DService, ColumnSeriesService, ColumnsDirective, CrosshairService, DataEditingService, DataLabel3DService, DataLabelService, DateTime3DService, DateTimeCategory3DService, DateTimeCategoryService, DateTimeService, EmaIndicatorService, ErrorBarService, Export3DService, ExportService, FunnelSeriesService, Highlight3DService, HighlightService, HiloOpenCloseSeriesService, HiloSeriesService, HistogramSeriesService, IndicatorDirective, IndicatorsDirective, LastValueLabelService, Legend3DService, LegendService, LineSeriesService, Logarithmic3DService, LogarithmicService, MacdIndicatorService, MomentumIndicatorService, MultiColoredAreaSeriesService, MultiColoredLineSeriesService, MultiLevelLabelDirective, MultiLevelLabelService, MultiLevelLabelsDirective, ParetoSeriesService, PeriodSelectorService, PieSeries3DService, PieSeriesService, PolarSeriesService, PyramidSeriesService, RadarSeriesService, RangeAreaSeriesService, RangeBandSettingDirective, RangeBandSettingsDirective, RangeColorSettingDirective, RangeColorSettingsDirective, RangeColumnSeriesService, RangeNavigatorAllModule, RangeNavigatorComponent, RangeNavigatorModule, RangeStepAreaSeriesService, RangeTooltipService, RangenavigatorSeriesCollectionDirective, RangenavigatorSeriesDirective, RowDirective, RowsDirective, RsiIndicatorService, ScatterSeriesService, ScrollBarService, SegmentDirective, SegmentsDirective, SelectedDataIndexDirective, SelectedDataIndexesDirective, Selection3DService, SelectionService, SeriesCollectionDirective, SeriesDirective, SmaIndicatorService, SmithchartAllModule, SmithchartComponent, SmithchartLegendService, SmithchartModule, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective, SparklineAllModule, SparklineComponent, SparklineModule, SparklineTooltipService, SplineAreaSeriesService, SplineRangeAreaSeriesService, SplineSeriesService, StackingAreaSeriesService, StackingBarSeries3DService, StackingBarSeriesService, StackingColumnSeries3DService, StackingColumnSeriesService, StackingLineSeriesService, StackingStepAreaSeriesService, StepAreaSeriesService, StepLineSeriesService, StochasticIndicatorService, StockChartAllModule, StockChartAnnotationDirective, StockChartAnnotationsDirective, StockChartAxesDirective, StockChartAxisDirective, StockChartComponent, StockChartIndicatorDirective, StockChartIndicatorsDirective, StockChartModule, StockChartPeriodDirective, StockChartPeriodsDirective, StockChartRowDirective, StockChartRowsDirective, StockChartSelectedDataIndexDirective, StockChartSelectedDataIndexesDirective, StockChartSeriesCollectionDirective, StockChartSeriesDirective, StockChartTrendlineDirective, StockChartTrendlinesDirective, StockEventDirective, StockEventsDirective, StockLegendService, StripLineDirective, StripLineService, StripLinesDirective, TmaIndicatorService, Tooltip3DService, TooltipRenderService, TooltipService, TrendlineDirective, TrendlinesDirective, TrendlinesService, WaterfallSeriesService, ZoomService };
+export { AccumulationAnnotationDirective, AccumulationAnnotationService, AccumulationAnnotationsDirective, AccumulationChartAllModule, AccumulationChartComponent, AccumulationChartModule, AccumulationDataLabelService, AccumulationDistributionIndicatorService, AccumulationHighlightService, AccumulationLegendService, AccumulationSelectionService, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, AccumulationTooltipService, AnnotationDirective, AnnotationsDirective, AreaSeriesService, AtrIndicatorService, AxesDirective, AxisDirective, BarSeries3DService, BarSeriesService, BollingerBandsService, BoxAndWhiskerSeriesService, BubbleSeriesService, BulletChartAllModule, BulletChartComponent, BulletChartLegendService, BulletChartModule, BulletRangeCollectionDirective, BulletRangeDirective, BulletTooltipService, CandleSeriesService, CategoriesDirective, Category3DService, CategoryDirective, CategoryService, Chart3DAllModule, Chart3DAxesDirective, Chart3DAxisDirective, Chart3DColumnDirective, Chart3DColumnsDirective, Chart3DComponent, Chart3DModule, Chart3DRowDirective, Chart3DRowsDirective, Chart3DSelectedDataIndexDirective, Chart3DSelectedDataIndexesDirective, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective, ChartAllModule, ChartAnnotationService, ChartComponent, ChartModule, CircularChart3DAllModule, CircularChart3DComponent, CircularChart3DModule, CircularChart3DSelectedDataIndexDirective, CircularChart3DSelectedDataIndexesDirective, CircularChart3DSeriesCollectionDirective, CircularChart3DSeriesDirective, CircularChartDataLabel3DService, CircularChartExport3DService, CircularChartHighlight3DService, CircularChartLegend3DService, CircularChartSelection3DService, CircularChartTooltip3DService, ColumnDirective, ColumnSeries3DService, ColumnSeriesService, ColumnsDirective, CrosshairService, DataEditingService, DataLabel3DService, DataLabelService, DateTime3DService, DateTimeCategory3DService, DateTimeCategoryService, DateTimeService, EmaIndicatorService, ErrorBarService, Export3DService, ExportService, FunnelSeriesService, Highlight3DService, HighlightService, HiloOpenCloseSeriesService, HiloSeriesService, HistogramSeriesService, IndicatorDirective, IndicatorsDirective, LastValueLabelService, Legend3DService, LegendService, LineSeriesService, Logarithmic3DService, LogarithmicService, MacdIndicatorService, MomentumIndicatorService, MultiColoredAreaSeriesService, MultiColoredLineSeriesService, MultiLevelLabelDirective, MultiLevelLabelService, MultiLevelLabelsDirective, ParetoSeriesService, PeriodSelectorService, PieSeries3DService, PieSeriesService, PolarSeriesService, PyramidSeriesService, RadarSeriesService, RangeAreaSeriesService, RangeBandSettingDirective, RangeBandSettingsDirective, RangeColorSettingDirective, RangeColorSettingsDirective, RangeColumnSeriesService, RangeNavigatorAllModule, RangeNavigatorComponent, RangeNavigatorModule, RangeStepAreaSeriesService, RangeTooltipService, RangenavigatorSeriesCollectionDirective, RangenavigatorSeriesDirective, RowDirective, RowsDirective, RsiIndicatorService, SankeyAllModule, SankeyComponent, SankeyExportService, SankeyHighlightService, SankeyLegendService, SankeyLinkDirective, SankeyLinksCollectionDirective, SankeyModule, SankeyNodeDirective, SankeyNodesCollectionDirective, SankeyTooltipService, ScatterSeriesService, ScrollBarService, SegmentDirective, SegmentsDirective, SelectedDataIndexDirective, SelectedDataIndexesDirective, Selection3DService, SelectionService, SeriesCollectionDirective, SeriesDirective, SeriesLabelService, SmaIndicatorService, SmithchartAllModule, SmithchartComponent, SmithchartLegendService, SmithchartModule, SmithchartSeriesCollectionDirective, SmithchartSeriesDirective, SparklineAllModule, SparklineComponent, SparklineModule, SparklineTooltipService, SplineAreaSeriesService, SplineRangeAreaSeriesService, SplineSeriesService, StackingAreaSeriesService, StackingBarSeries3DService, StackingBarSeriesService, StackingColumnSeries3DService, StackingColumnSeriesService, StackingLineSeriesService, StackingStepAreaSeriesService, StepAreaSeriesService, StepLineSeriesService, StochasticIndicatorService, StockChartAllModule, StockChartAnnotationDirective, StockChartAnnotationsDirective, StockChartAxesDirective, StockChartAxisDirective, StockChartComponent, StockChartIndicatorDirective, StockChartIndicatorsDirective, StockChartModule, StockChartPeriodDirective, StockChartPeriodsDirective, StockChartRowDirective, StockChartRowsDirective, StockChartSelectedDataIndexDirective, StockChartSelectedDataIndexesDirective, StockChartSeriesCollectionDirective, StockChartSeriesDirective, StockChartTrendlineDirective, StockChartTrendlinesDirective, StockEventDirective, StockEventsDirective, StockLegendService, StripLineDirective, StripLineService, StripLinesDirective, TmaIndicatorService, Tooltip3DService, TooltipRenderService, TooltipService, TrendlineDirective, TrendlinesDirective, TrendlinesService, WaterfallSeriesService, ZoomService };
 //# sourceMappingURL=syncfusion-ej2-angular-charts.mjs.map