devextreme-angular/fesm2022/devextreme-angular-ui-pie-chart.mjs.map

Angular UI and visualization components based on DevExtreme widgets

{"version":3,"file":"devextreme-angular-ui-pie-chart.mjs","sources":["../../../dist/ui/pie-chart/index.ts","../../../dist/ui/pie-chart/devextreme-angular-ui-pie-chart.ts"],"sourcesContent":["/*!\n * devextreme-angular\n * Version: 24.2.6\n * Build date: Mon Mar 17 2025\n *\n * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED\n *\n * This software may be modified and distributed under the terms\n * of the MIT license. See the LICENSE file in the root of the project for details.\n *\n * https://github.com/DevExpress/devextreme-angular\n */\n\n/* tslint:disable:max-line-length */\r\n\r\n\r\nimport {\r\n    TransferState,\r\n    Component,\r\n    NgModule,\r\n    ElementRef,\r\n    NgZone,\r\n    PLATFORM_ID,\r\n    Inject,\r\n\r\n    Input,\r\n    Output,\r\n    OnDestroy,\r\n    EventEmitter,\r\n    OnChanges,\r\n    DoCheck,\r\n    SimpleChanges,\r\n    ContentChildren,\r\n    QueryList\r\n} from '@angular/core';\r\n\r\n\r\nimport DataSource from 'devextreme/data/data_source';\r\nimport { AnimationEaseMode, ChartsDataType, DashStyle, ChartsColor, HatchDirection, Font, LabelPosition, TextOverflow, WordWrap, SeriesLabel, SeriesPoint, Palette, PaletteExtensionMode, ShiftLabelOverlap, Theme } from 'devextreme/common/charts';\r\nimport { dxPieChartAnnotationConfig, dxPieChartCommonAnnotationConfig, PieChartSeriesInteractionMode, SmallValuesGroupingMode, PieChartLegendItem, PieChartLegendHoverMode, DisposingEvent, DoneEvent, DrawnEvent, ExportedEvent, ExportingEvent, FileSavingEvent, IncidentOccurredEvent, InitializedEvent, LegendClickEvent, OptionChangedEvent, PointClickEvent, PointHoverChangedEvent, PointSelectionChangedEvent, TooltipHiddenEvent, TooltipShownEvent, PieChartSegmentDirection, PieChartSeries, PieChartType } from 'devextreme/viz/pie_chart';\r\nimport { Format } from 'devextreme/common/core/localization';\r\nimport { DataSourceOptions } from 'devextreme/data/data_source';\r\nimport { Store } from 'devextreme/data/store';\r\nimport { ExportFormat, HorizontalAlignment, Position, Orientation, VerticalEdge, SingleOrMultiple } from 'devextreme/common';\r\n\r\nimport DxPieChart from 'devextreme/viz/pie_chart';\r\n\r\n\r\nimport {\r\n    DxComponent,\r\n    DxTemplateHost,\r\n    DxIntegrationModule,\r\n    DxTemplateModule,\r\n    NestedOptionHost,\r\n    IterableDifferHelper,\r\n    WatcherHelper\r\n} from 'devextreme-angular/core';\r\n\r\nimport { DxoAdaptiveLayoutModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoAnimationModule } from 'devextreme-angular/ui/nested';\r\nimport { DxiAnnotationModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoBorderModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoFontModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoImageModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoShadowModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoCommonAnnotationSettingsModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoCommonSeriesSettingsModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoColorModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoHoverStyleModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoHatchingModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoLabelModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoArgumentFormatModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoConnectorModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoFormatModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoSelectionStyleModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoSmallValuesGroupingModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoExportModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoLegendModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoMarginModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoTitleModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoSubtitleModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoLoadingIndicatorModule } from 'devextreme-angular/ui/nested';\r\nimport { DxiSeriesModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoSeriesTemplateModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoSizeModule } from 'devextreme-angular/ui/nested';\r\nimport { DxoTooltipModule } from 'devextreme-angular/ui/nested';\r\n\r\nimport { DxoPieChartAdaptiveLayoutModule } from 'devextreme-angular/ui/pie-chart/nested';\r\nimport { DxoPieChartAnimationModule } from 'devextreme-angular/ui/pie-chart/nested';\r\nimport { DxiPieChartAnnotationModule } from 'devextreme-angular/ui/pie-chart/nested';\r\nimport { DxoPieChartAnnotationBorderModule } from 'devextreme-angular/ui/pie-chart/nested';\r\nimport { DxoPieChartArgumentFormatModule } from 'devextreme-angular/ui/pie-chart/nested';\r\nimport { DxoPieChartBorderModule } from 'devextreme-angular/ui/pie-chart/nested';\r\nimport { DxoPieChartColorModule } from 'devextreme-angular/ui/pie-chart/nested';\r\nimport { DxoPieChartCommonAnnotationSettingsModule } from 'devextreme-angular/ui/pie-chart/nested';\r\nimport { DxoPieChartCommonSeriesSettingsModule } from 'devextreme-angular/ui/pie-chart/nested';\r\nimport { DxoPieChartConnectorModule } from 'devextreme-angular/ui/pie-chart/nested';\r\nimport { DxoPieChartExportModule } from 'devextreme-angular/ui/pie-chart/nested';\r\nimport { DxoPieChartFontModule } from 'devextreme-angular/ui/pie-chart/nested';\r\nimport { DxoPieChartFormatModule } from 'devextreme-angular/ui/pie-chart/nested';\r\nimport { DxoPieChartHatchingModule } from 'devextreme-angular/ui/pie-chart/nested';\r\nimport { DxoPieChartHoverStyleModule } from 'devextreme-angular/ui/pie-chart/nested';\r\nimport { DxoPieChartImageModule } from 'devextreme-angular/ui/pie-chart/nested';\r\nimport { DxoPieChartLabelModule } from 'devextreme-angular/ui/pie-chart/nested';\r\nimport { DxoPieChartLegendModule } from 'devextreme-angular/ui/pie-chart/nested';\r\nimport { DxoPieChartLegendTitleModule } from 'devextreme-angular/ui/pie-chart/nested';\r\nimport { DxoPieChartLegendTitleSubtitleModule } from 'devextreme-angular/ui/pie-chart/nested';\r\nimport { DxoPieChartLoadingIndicatorModule } from 'devextreme-angular/ui/pie-chart/nested';\r\nimport { DxoPieChartMarginModule } from 'devextreme-angular/ui/pie-chart/nested';\r\nimport { DxoPieChartPieChartTitleModule } from 'devextreme-angular/ui/pie-chart/nested';\r\nimport { DxoPieChartPieChartTitleSubtitleModule } from 'devextreme-angular/ui/pie-chart/nested';\r\nimport { DxoPieChartSelectionStyleModule } from 'devextreme-angular/ui/pie-chart/nested';\r\nimport { DxiPieChartSeriesModule } from 'devextreme-angular/ui/pie-chart/nested';\r\nimport { DxoPieChartSeriesBorderModule } from 'devextreme-angular/ui/pie-chart/nested';\r\nimport { DxoPieChartSeriesTemplateModule } from 'devextreme-angular/ui/pie-chart/nested';\r\nimport { DxoPieChartShadowModule } from 'devextreme-angular/ui/pie-chart/nested';\r\nimport { DxoPieChartSizeModule } from 'devextreme-angular/ui/pie-chart/nested';\r\nimport { DxoPieChartSmallValuesGroupingModule } from 'devextreme-angular/ui/pie-chart/nested';\r\nimport { DxoPieChartSubtitleModule } from 'devextreme-angular/ui/pie-chart/nested';\r\nimport { DxoPieChartTitleModule } from 'devextreme-angular/ui/pie-chart/nested';\r\nimport { DxoPieChartTooltipModule } from 'devextreme-angular/ui/pie-chart/nested';\r\nimport { DxoPieChartTooltipBorderModule } from 'devextreme-angular/ui/pie-chart/nested';\r\n\r\nimport { DxiAnnotationComponent } from 'devextreme-angular/ui/nested';\r\nimport { DxiSeriesComponent } from 'devextreme-angular/ui/nested';\r\n\r\nimport { DxiPieChartAnnotationComponent } from 'devextreme-angular/ui/pie-chart/nested';\r\nimport { DxiPieChartSeriesComponent } from 'devextreme-angular/ui/pie-chart/nested';\r\n\r\n\r\n/**\r\n * The PieChart is a UI component that visualizes data as a circle divided into sectors that each represents a portion of the whole.\r\n\r\n */\r\n@Component({\r\n    selector: 'dx-pie-chart',\r\n    template: '',\r\n    styles: [ ' :host {  display: block; }'],\r\n    host: { ngSkipHydration: 'true' },\r\n    providers: [\r\n        DxTemplateHost,\r\n        WatcherHelper,\r\n        NestedOptionHost,\r\n        IterableDifferHelper\r\n    ]\r\n})\r\nexport class DxPieChartComponent extends DxComponent implements OnDestroy, OnChanges, DoCheck {\r\n    instance: DxPieChart = null;\r\n\r\n    /**\r\n     * Specifies adaptive layout properties.\r\n    \r\n     */\r\n    @Input()\r\n    get adaptiveLayout(): { height?: number, keepLabels?: boolean, width?: number } {\r\n        return this._getOption('adaptiveLayout');\r\n    }\r\n    set adaptiveLayout(value: { height?: number, keepLabels?: boolean, width?: number }) {\r\n        this._setOption('adaptiveLayout', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies animation properties.\r\n    \r\n     */\r\n    @Input()\r\n    get animation(): boolean | { duration?: number, easing?: AnimationEaseMode, enabled?: boolean, maxPointCountSupported?: number } {\r\n        return this._getOption('animation');\r\n    }\r\n    set animation(value: boolean | { duration?: number, easing?: AnimationEaseMode, enabled?: boolean, maxPointCountSupported?: number }) {\r\n        this._setOption('animation', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the annotation collection.\r\n    \r\n     */\r\n    @Input()\r\n    get annotations(): Array<any | dxPieChartAnnotationConfig> {\r\n        return this._getOption('annotations');\r\n    }\r\n    set annotations(value: Array<any | dxPieChartAnnotationConfig>) {\r\n        this._setOption('annotations', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies a custom template for content in the pie&apos;s center.\r\n    \r\n     */\r\n    @Input()\r\n    get centerTemplate(): any {\r\n        return this._getOption('centerTemplate');\r\n    }\r\n    set centerTemplate(value: any) {\r\n        this._setOption('centerTemplate', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies settings common for all annotations in the PieChart.\r\n    \r\n     */\r\n    @Input()\r\n    get commonAnnotationSettings(): dxPieChartCommonAnnotationConfig {\r\n        return this._getOption('commonAnnotationSettings');\r\n    }\r\n    set commonAnnotationSettings(value: dxPieChartCommonAnnotationConfig) {\r\n        this._setOption('commonAnnotationSettings', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * An object defining the configuration properties that are common for all series of the PieChart UI component.\r\n    \r\n     */\r\n    @Input()\r\n    get commonSeriesSettings(): any | { argumentField?: string, argumentType?: ChartsDataType | undefined, border?: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PieChartSeriesInteractionMode, hoverStyle?: { border?: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean }, label?: { argumentFormat?: Format | undefined, backgroundColor?: string | undefined, border?: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: ((pointInfo: any) => string), displayFormat?: string | undefined, font?: Font, format?: Format | undefined, position?: LabelPosition, radialOffset?: number, rotationAngle?: number, textOverflow?: TextOverflow, visible?: boolean, wordWrap?: WordWrap }, maxLabelCount?: number | undefined, minSegmentSize?: number | undefined, selectionMode?: PieChartSeriesInteractionMode, selectionStyle?: { border?: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean }, smallValuesGrouping?: { groupName?: string, mode?: SmallValuesGroupingMode, threshold?: number | undefined, topCount?: number | undefined }, tagField?: string, valueField?: string } {\r\n        return this._getOption('commonSeriesSettings');\r\n    }\r\n    set commonSeriesSettings(value: any | { argumentField?: string, argumentType?: ChartsDataType | undefined, border?: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PieChartSeriesInteractionMode, hoverStyle?: { border?: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean }, label?: { argumentFormat?: Format | undefined, backgroundColor?: string | undefined, border?: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: ((pointInfo: any) => string), displayFormat?: string | undefined, font?: Font, format?: Format | undefined, position?: LabelPosition, radialOffset?: number, rotationAngle?: number, textOverflow?: TextOverflow, visible?: boolean, wordWrap?: WordWrap }, maxLabelCount?: number | undefined, minSegmentSize?: number | undefined, selectionMode?: PieChartSeriesInteractionMode, selectionStyle?: { border?: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean }, smallValuesGrouping?: { groupName?: string, mode?: SmallValuesGroupingMode, threshold?: number | undefined, topCount?: number | undefined }, tagField?: string, valueField?: string }) {\r\n        this._setOption('commonSeriesSettings', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Customizes an individual annotation.\r\n    \r\n     */\r\n    @Input()\r\n    get customizeAnnotation(): ((annotation: dxPieChartAnnotationConfig | any) => dxPieChartAnnotationConfig) | undefined {\r\n        return this._getOption('customizeAnnotation');\r\n    }\r\n    set customizeAnnotation(value: ((annotation: dxPieChartAnnotationConfig | any) => dxPieChartAnnotationConfig) | undefined) {\r\n        this._setOption('customizeAnnotation', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Customizes the appearance of an individual point label.\r\n    \r\n     */\r\n    @Input()\r\n    get customizeLabel(): ((pointInfo: any) => SeriesLabel) {\r\n        return this._getOption('customizeLabel');\r\n    }\r\n    set customizeLabel(value: ((pointInfo: any) => SeriesLabel)) {\r\n        this._setOption('customizeLabel', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Customizes the appearance of an individual series point.\r\n    \r\n     */\r\n    @Input()\r\n    get customizePoint(): ((pointInfo: any) => SeriesPoint) {\r\n        return this._getOption('customizePoint');\r\n    }\r\n    set customizePoint(value: ((pointInfo: any) => SeriesPoint)) {\r\n        this._setOption('customizePoint', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Binds the UI component to data.\r\n    \r\n     */\r\n    @Input()\r\n    get dataSource(): Array<any> | DataSource | DataSourceOptions | null | Store | string {\r\n        return this._getOption('dataSource');\r\n    }\r\n    set dataSource(value: Array<any> | DataSource | DataSourceOptions | null | Store | string) {\r\n        this._setOption('dataSource', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the diameter of the pie.\r\n    \r\n     */\r\n    @Input()\r\n    get diameter(): number | undefined {\r\n        return this._getOption('diameter');\r\n    }\r\n    set diameter(value: number | undefined) {\r\n        this._setOption('diameter', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies whether the UI component responds to user interaction.\r\n    \r\n     */\r\n    @Input()\r\n    get disabled(): boolean {\r\n        return this._getOption('disabled');\r\n    }\r\n    set disabled(value: boolean) {\r\n        this._setOption('disabled', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the global attributes to be attached to the UI component&apos;s container element.\r\n    \r\n     */\r\n    @Input()\r\n    get elementAttr(): Record<string, any> {\r\n        return this._getOption('elementAttr');\r\n    }\r\n    set elementAttr(value: Record<string, any>) {\r\n        this._setOption('elementAttr', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Configures the exporting and printing features.\r\n    \r\n     */\r\n    @Input()\r\n    get export(): { backgroundColor?: string, enabled?: boolean, fileName?: string, formats?: Array<ExportFormat>, margin?: number, printingEnabled?: boolean, svgToCanvas?: ((svg: any, canvas: any) => any) | undefined } {\r\n        return this._getOption('export');\r\n    }\r\n    set export(value: { backgroundColor?: string, enabled?: boolean, fileName?: string, formats?: Array<ExportFormat>, margin?: number, printingEnabled?: boolean, svgToCanvas?: ((svg: any, canvas: any) => any) | undefined }) {\r\n        this._setOption('export', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the fraction of the inner radius relative to the total radius in the series of the &apos;doughnut&apos; type. The value should be between 0 and 1.\r\n    \r\n     */\r\n    @Input()\r\n    get innerRadius(): number {\r\n        return this._getOption('innerRadius');\r\n    }\r\n    set innerRadius(value: number) {\r\n        this._setOption('innerRadius', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies PieChart legend properties.\r\n    \r\n     */\r\n    @Input()\r\n    get legend(): { backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((pointInfo: { pointColor: string, pointIndex: number, pointName: any }) => string), customizeItems?: ((items: Array<PieChartLegendItem>) => Array<PieChartLegendItem>), customizeText?: ((pointInfo: { pointColor: string, pointIndex: number, pointName: any }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, hoverMode?: PieChartLegendHoverMode, itemsAlignment?: HorizontalAlignment | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, rowCount?: number, rowItemSpacing?: number, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean } {\r\n        return this._getOption('legend');\r\n    }\r\n    set legend(value: { backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((pointInfo: { pointColor: string, pointIndex: number, pointName: any }) => string), customizeItems?: ((items: Array<PieChartLegendItem>) => Array<PieChartLegendItem>), customizeText?: ((pointInfo: { pointColor: string, pointIndex: number, pointName: any }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, hoverMode?: PieChartLegendHoverMode, itemsAlignment?: HorizontalAlignment | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, rowCount?: number, rowItemSpacing?: number, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean }) {\r\n        this._setOption('legend', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Configures the loading indicator.\r\n    \r\n     */\r\n    @Input()\r\n    get loadingIndicator(): { backgroundColor?: string, enabled?: boolean, font?: Font, show?: boolean, text?: string } {\r\n        return this._getOption('loadingIndicator');\r\n    }\r\n    set loadingIndicator(value: { backgroundColor?: string, enabled?: boolean, font?: Font, show?: boolean, text?: string }) {\r\n        this._setOption('loadingIndicator', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Generates space around the UI component.\r\n    \r\n     */\r\n    @Input()\r\n    get margin(): { bottom?: number, left?: number, right?: number, top?: number } {\r\n        return this._getOption('margin');\r\n    }\r\n    set margin(value: { bottom?: number, left?: number, right?: number, top?: number }) {\r\n        this._setOption('margin', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the minimum diameter of the pie.\r\n    \r\n     */\r\n    @Input()\r\n    get minDiameter(): number {\r\n        return this._getOption('minDiameter');\r\n    }\r\n    set minDiameter(value: number) {\r\n        this._setOption('minDiameter', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Sets the palette to be used to colorize series and their elements.\r\n    \r\n     */\r\n    @Input()\r\n    get palette(): Array<string> | Palette {\r\n        return this._getOption('palette');\r\n    }\r\n    set palette(value: Array<string> | Palette) {\r\n        this._setOption('palette', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies what to do with colors in the palette when their number is less than the number of series (in the Chart UI component) or points in a series (in the PieChart UI component).\r\n    \r\n     */\r\n    @Input()\r\n    get paletteExtensionMode(): PaletteExtensionMode {\r\n        return this._getOption('paletteExtensionMode');\r\n    }\r\n    set paletteExtensionMode(value: PaletteExtensionMode) {\r\n        this._setOption('paletteExtensionMode', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Notifies the UI component that it is embedded into an HTML page that uses a tag modifying the path.\r\n    \r\n     */\r\n    @Input()\r\n    get pathModified(): boolean {\r\n        return this._getOption('pathModified');\r\n    }\r\n    set pathModified(value: boolean) {\r\n        this._setOption('pathModified', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies whether a single point or multiple points can be selected in the chart.\r\n    \r\n     */\r\n    @Input()\r\n    get pointSelectionMode(): SingleOrMultiple {\r\n        return this._getOption('pointSelectionMode');\r\n    }\r\n    set pointSelectionMode(value: SingleOrMultiple) {\r\n        this._setOption('pointSelectionMode', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies whether to redraw the UI component when the size of the container changes or a mobile device rotates.\r\n    \r\n     */\r\n    @Input()\r\n    get redrawOnResize(): boolean {\r\n        return this._getOption('redrawOnResize');\r\n    }\r\n    set redrawOnResize(value: boolean) {\r\n        this._setOption('redrawOnResize', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies how a chart must behave when point labels overlap.\r\n    \r\n     */\r\n    @Input()\r\n    get resolveLabelOverlapping(): ShiftLabelOverlap {\r\n        return this._getOption('resolveLabelOverlapping');\r\n    }\r\n    set resolveLabelOverlapping(value: ShiftLabelOverlap) {\r\n        this._setOption('resolveLabelOverlapping', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Switches the UI component to a right-to-left representation.\r\n    \r\n     */\r\n    @Input()\r\n    get rtlEnabled(): boolean {\r\n        return this._getOption('rtlEnabled');\r\n    }\r\n    set rtlEnabled(value: boolean) {\r\n        this._setOption('rtlEnabled', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the direction that the pie chart segments will occupy.\r\n    \r\n     */\r\n    @Input()\r\n    get segmentsDirection(): PieChartSegmentDirection {\r\n        return this._getOption('segmentsDirection');\r\n    }\r\n    set segmentsDirection(value: PieChartSegmentDirection) {\r\n        this._setOption('segmentsDirection', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies properties for the series of the PieChart UI component.\r\n    \r\n     */\r\n    @Input()\r\n    get series(): Array<PieChartSeries> | PieChartSeries | undefined {\r\n        return this._getOption('series');\r\n    }\r\n    set series(value: Array<PieChartSeries> | PieChartSeries | undefined) {\r\n        this._setOption('series', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Defines properties for the series template.\r\n    \r\n     */\r\n    @Input()\r\n    get seriesTemplate(): any {\r\n        return this._getOption('seriesTemplate');\r\n    }\r\n    set seriesTemplate(value: any) {\r\n        this._setOption('seriesTemplate', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the UI component&apos;s size in pixels.\r\n    \r\n     */\r\n    @Input()\r\n    get size(): { height?: number | undefined, width?: number | undefined } {\r\n        return this._getOption('size');\r\n    }\r\n    set size(value: { height?: number | undefined, width?: number | undefined }) {\r\n        this._setOption('size', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Allows you to display several adjoining pies in the same size.\r\n    \r\n     */\r\n    @Input()\r\n    get sizeGroup(): string | undefined {\r\n        return this._getOption('sizeGroup');\r\n    }\r\n    set sizeGroup(value: string | undefined) {\r\n        this._setOption('sizeGroup', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the angle in arc degrees from which the first segment of a pie chart should start.\r\n    \r\n     */\r\n    @Input()\r\n    get startAngle(): number {\r\n        return this._getOption('startAngle');\r\n    }\r\n    set startAngle(value: number) {\r\n        this._setOption('startAngle', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Sets the name of the theme the UI component uses.\r\n    \r\n     */\r\n    @Input()\r\n    get theme(): Theme {\r\n        return this._getOption('theme');\r\n    }\r\n    set theme(value: Theme) {\r\n        this._setOption('theme', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Configures the UI component&apos;s title.\r\n    \r\n     */\r\n    @Input()\r\n    get title(): string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap } {\r\n        return this._getOption('title');\r\n    }\r\n    set title(value: string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }) {\r\n        this._setOption('title', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Configures tooltips.\r\n    \r\n     */\r\n    @Input()\r\n    get tooltip(): { argumentFormat?: Format | undefined, arrowLength?: number, border?: { color?: string, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, color?: string, container?: any | string | undefined, contentTemplate?: any, cornerRadius?: number, customizeTooltip?: ((pointInfo: any) => Record<string, any>) | undefined, enabled?: boolean, font?: Font, format?: Format | undefined, interactive?: boolean, opacity?: number | undefined, paddingLeftRight?: number, paddingTopBottom?: number, shadow?: { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number }, shared?: boolean, zIndex?: number | undefined } {\r\n        return this._getOption('tooltip');\r\n    }\r\n    set tooltip(value: { argumentFormat?: Format | undefined, arrowLength?: number, border?: { color?: string, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, color?: string, container?: any | string | undefined, contentTemplate?: any, cornerRadius?: number, customizeTooltip?: ((pointInfo: any) => Record<string, any>) | undefined, enabled?: boolean, font?: Font, format?: Format | undefined, interactive?: boolean, opacity?: number | undefined, paddingLeftRight?: number, paddingTopBottom?: number, shadow?: { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number }, shared?: boolean, zIndex?: number | undefined }) {\r\n        this._setOption('tooltip', value);\r\n    }\r\n\r\n\r\n    /**\r\n     * Specifies the type of the pie chart series.\r\n    \r\n     */\r\n    @Input()\r\n    get type(): PieChartType {\r\n        return this._getOption('type');\r\n    }\r\n    set type(value: PieChartType) {\r\n        this._setOption('type', value);\r\n    }\r\n\r\n    /**\r\n    \r\n     * A function that is executed before the UI component is disposed of.\r\n    \r\n    \r\n     */\r\n    @Output() onDisposing: EventEmitter<DisposingEvent>;\r\n\r\n    /**\r\n    \r\n     * A function that is executed when all series are ready.\r\n    \r\n    \r\n     */\r\n    @Output() onDone: EventEmitter<DoneEvent>;\r\n\r\n    /**\r\n    \r\n     * A function that is executed when the UI component&apos;s rendering has finished.\r\n    \r\n    \r\n     */\r\n    @Output() onDrawn: EventEmitter<DrawnEvent>;\r\n\r\n    /**\r\n    \r\n     * A function that is executed after the UI component is exported.\r\n    \r\n    \r\n     */\r\n    @Output() onExported: EventEmitter<ExportedEvent>;\r\n\r\n    /**\r\n    \r\n     * A function that is executed before the UI component is exported.\r\n    \r\n    \r\n     */\r\n    @Output() onExporting: EventEmitter<ExportingEvent>;\r\n\r\n    /**\r\n    \r\n     * A function that is executed before a file with exported UI component is saved to the user&apos;s local storage.\r\n    \r\n    \r\n     */\r\n    @Output() onFileSaving: EventEmitter<FileSavingEvent>;\r\n\r\n    /**\r\n    \r\n     * A function that is executed when an error or warning occurs.\r\n    \r\n    \r\n     */\r\n    @Output() onIncidentOccurred: EventEmitter<IncidentOccurredEvent>;\r\n\r\n    /**\r\n    \r\n     * A function used in JavaScript frameworks to save the UI component instance.\r\n    \r\n    \r\n     */\r\n    @Output() onInitialized: EventEmitter<InitializedEvent>;\r\n\r\n    /**\r\n    \r\n     * A function that is executed when a legend item is clicked or tapped.\r\n    \r\n    \r\n     */\r\n    @Output() onLegendClick: EventEmitter<LegendClickEvent>;\r\n\r\n    /**\r\n    \r\n     * A function that is executed after a UI component property is changed.\r\n    \r\n    \r\n     */\r\n    @Output() onOptionChanged: EventEmitter<OptionChangedEvent>;\r\n\r\n    /**\r\n    \r\n     * A function that is executed when a series point is clicked or tapped.\r\n    \r\n    \r\n     */\r\n    @Output() onPointClick: EventEmitter<PointClickEvent>;\r\n\r\n    /**\r\n    \r\n     * A function that is executed after the pointer enters or leaves a series point.\r\n    \r\n    \r\n     */\r\n    @Output() onPointHoverChanged: EventEmitter<PointHoverChangedEvent>;\r\n\r\n    /**\r\n    \r\n     * A function that is executed when a series point is selected or selection is canceled.\r\n    \r\n    \r\n     */\r\n    @Output() onPointSelectionChanged: EventEmitter<PointSelectionChangedEvent>;\r\n\r\n    /**\r\n    \r\n     * A function that is executed when a tooltip becomes hidden.\r\n    \r\n    \r\n     */\r\n    @Output() onTooltipHidden: EventEmitter<TooltipHiddenEvent>;\r\n\r\n    /**\r\n    \r\n     * A function that is executed when a tooltip appears.\r\n    \r\n    \r\n     */\r\n    @Output() onTooltipShown: EventEmitter<TooltipShownEvent>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() adaptiveLayoutChange: EventEmitter<{ height?: number, keepLabels?: boolean, width?: number }>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() animationChange: EventEmitter<boolean | { duration?: number, easing?: AnimationEaseMode, enabled?: boolean, maxPointCountSupported?: number }>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() annotationsChange: EventEmitter<Array<any | dxPieChartAnnotationConfig>>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() centerTemplateChange: EventEmitter<any>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() commonAnnotationSettingsChange: EventEmitter<dxPieChartCommonAnnotationConfig>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() commonSeriesSettingsChange: EventEmitter<any | { argumentField?: string, argumentType?: ChartsDataType | undefined, border?: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hoverMode?: PieChartSeriesInteractionMode, hoverStyle?: { border?: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean }, label?: { argumentFormat?: Format | undefined, backgroundColor?: string | undefined, border?: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }, connector?: { color?: string | undefined, visible?: boolean, width?: number }, customizeText?: ((pointInfo: any) => string), displayFormat?: string | undefined, font?: Font, format?: Format | undefined, position?: LabelPosition, radialOffset?: number, rotationAngle?: number, textOverflow?: TextOverflow, visible?: boolean, wordWrap?: WordWrap }, maxLabelCount?: number | undefined, minSegmentSize?: number | undefined, selectionMode?: PieChartSeriesInteractionMode, selectionStyle?: { border?: { color?: string | undefined, dashStyle?: DashStyle | undefined, visible?: boolean, width?: number }, color?: ChartsColor | string | undefined, hatching?: { direction?: HatchDirection, opacity?: number, step?: number, width?: number }, highlight?: boolean }, smallValuesGrouping?: { groupName?: string, mode?: SmallValuesGroupingMode, threshold?: number | undefined, topCount?: number | undefined }, tagField?: string, valueField?: string }>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() customizeAnnotationChange: EventEmitter<((annotation: dxPieChartAnnotationConfig | any) => dxPieChartAnnotationConfig) | undefined>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() customizeLabelChange: EventEmitter<((pointInfo: any) => SeriesLabel)>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() customizePointChange: EventEmitter<((pointInfo: any) => SeriesPoint)>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() dataSourceChange: EventEmitter<Array<any> | DataSource | DataSourceOptions | null | Store | string>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() diameterChange: EventEmitter<number | undefined>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() disabledChange: EventEmitter<boolean>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() elementAttrChange: EventEmitter<Record<string, any>>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() exportChange: EventEmitter<{ backgroundColor?: string, enabled?: boolean, fileName?: string, formats?: Array<ExportFormat>, margin?: number, printingEnabled?: boolean, svgToCanvas?: ((svg: any, canvas: any) => any) | undefined }>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() innerRadiusChange: EventEmitter<number>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() legendChange: EventEmitter<{ backgroundColor?: string | undefined, border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, columnCount?: number, columnItemSpacing?: number, customizeHint?: ((pointInfo: { pointColor: string, pointIndex: number, pointName: any }) => string), customizeItems?: ((items: Array<PieChartLegendItem>) => Array<PieChartLegendItem>), customizeText?: ((pointInfo: { pointColor: string, pointIndex: number, pointName: any }) => string), font?: Font, horizontalAlignment?: HorizontalAlignment, hoverMode?: PieChartLegendHoverMode, itemsAlignment?: HorizontalAlignment | undefined, itemTextPosition?: Position | undefined, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, markerSize?: number, markerTemplate?: any, orientation?: Orientation | undefined, paddingLeftRight?: number, paddingTopBottom?: number, rowCount?: number, rowItemSpacing?: number, title?: string | { font?: Font, horizontalAlignment?: HorizontalAlignment | undefined, margin?: { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string }, text?: string, verticalAlignment?: VerticalEdge }, verticalAlignment?: VerticalEdge, visible?: boolean }>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() loadingIndicatorChange: EventEmitter<{ backgroundColor?: string, enabled?: boolean, font?: Font, show?: boolean, text?: string }>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() marginChange: EventEmitter<{ bottom?: number, left?: number, right?: number, top?: number }>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() minDiameterChange: EventEmitter<number>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() paletteChange: EventEmitter<Array<string> | Palette>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() paletteExtensionModeChange: EventEmitter<PaletteExtensionMode>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() pathModifiedChange: EventEmitter<boolean>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() pointSelectionModeChange: EventEmitter<SingleOrMultiple>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() redrawOnResizeChange: EventEmitter<boolean>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() resolveLabelOverlappingChange: EventEmitter<ShiftLabelOverlap>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() rtlEnabledChange: EventEmitter<boolean>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() segmentsDirectionChange: EventEmitter<PieChartSegmentDirection>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() seriesChange: EventEmitter<Array<PieChartSeries> | PieChartSeries | undefined>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() seriesTemplateChange: EventEmitter<any>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() sizeChange: EventEmitter<{ height?: number | undefined, width?: number | undefined }>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() sizeGroupChange: EventEmitter<string | undefined>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() startAngleChange: EventEmitter<number>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() themeChange: EventEmitter<Theme>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() titleChange: EventEmitter<string | { font?: Font, horizontalAlignment?: HorizontalAlignment, margin?: number | { bottom?: number, left?: number, right?: number, top?: number }, placeholderSize?: number | undefined, subtitle?: string | { font?: Font, offset?: number, text?: string, textOverflow?: TextOverflow, wordWrap?: WordWrap }, text?: string, textOverflow?: TextOverflow, verticalAlignment?: VerticalEdge, wordWrap?: WordWrap }>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() tooltipChange: EventEmitter<{ argumentFormat?: Format | undefined, arrowLength?: number, border?: { color?: string, dashStyle?: DashStyle, opacity?: number | undefined, visible?: boolean, width?: number }, color?: string, container?: any | string | undefined, contentTemplate?: any, cornerRadius?: number, customizeTooltip?: ((pointInfo: any) => Record<string, any>) | undefined, enabled?: boolean, font?: Font, format?: Format | undefined, interactive?: boolean, opacity?: number | undefined, paddingLeftRight?: number, paddingTopBottom?: number, shadow?: { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number }, shared?: boolean, zIndex?: number | undefined }>;\r\n\r\n    /**\r\n    \r\n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\r\n    \r\n     */\r\n    @Output() typeChange: EventEmitter<PieChartType>;\r\n\r\n\r\n\r\n\r\n    @ContentChildren(DxiPieChartAnnotationComponent)\r\n    get annotationsChildren(): QueryList<DxiPieChartAnnotationComponent> {\r\n        return this._getOption('annotations');\r\n    }\r\n    set annotationsChildren(value) {\r\n        this._setChildren('annotations', value, 'DxiPieChartAnnotationComponent');\r\n    }\r\n\r\n    @ContentChildren(DxiPieChartSeriesComponent)\r\n    get seriesChildren(): QueryList<DxiPieChartSeriesComponent> {\r\n        return this._getOption('series');\r\n    }\r\n    set seriesChildren(value) {\r\n        this._setChildren('series', value, 'DxiPieChartSeriesComponent');\r\n    }\r\n\r\n\r\n    @ContentChildren(DxiAnnotationComponent)\r\n    get annotationsLegacyChildren(): QueryList<DxiAnnotationComponent> {\r\n        return this._getOption('annotations');\r\n    }\r\n    set annotationsLegacyChildren(value) {\r\n        this._setChildren('annotations', value, 'DxiAnnotationComponent');\r\n    }\r\n\r\n    @ContentChildren(DxiSeriesComponent)\r\n    get seriesLegacyChildren(): QueryList<DxiSeriesComponent> {\r\n        return this._getOption('series');\r\n    }\r\n    set seriesLegacyChildren(value) {\r\n        this._setChildren('series', value, 'DxiSeriesComponent');\r\n    }\r\n\r\n\r\n\r\n\r\n    constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost,\r\n            private _watcherHelper: WatcherHelper,\r\n            private _idh: IterableDifferHelper,\r\n            optionHost: NestedOptionHost,\r\n            transferState: TransferState,\r\n            @Inject(PLATFORM_ID) platformId: any) {\r\n\r\n        super(elementRef, ngZone, templateHost, _watcherHelper, transferState, platformId);\r\n\r\n        this._createEventEmitters([\r\n            { subscribe: 'disposing', emit: 'onDisposing' },\r\n            { subscribe: 'done', emit: 'onDone' },\r\n            { subscribe: 'drawn', emit: 'onDrawn' },\r\n            { subscribe: 'exported', emit: 'onExported' },\r\n            { subscribe: 'exporting', emit: 'onExporting' },\r\n            { subscribe: 'fileSaving', emit: 'onFileSaving' },\r\n            { subscribe: 'incidentOccurred', emit: 'onIncidentOccurred' },\r\n            { subscribe: 'initialized', emit: 'onInitialized' },\r\n            { subscribe: 'legendClick', emit: 'onLegendClick' },\r\n            { subscribe: 'optionChanged', emit: 'onOptionChanged' },\r\n            { subscribe: 'pointClick', emit: 'onPointClick' },\r\n            { subscribe: 'pointHoverChanged', emit: 'onPointHoverChanged' },\r\n            { subscribe: 'pointSelectionChanged', emit: 'onPointSelectionChanged' },\r\n            { subscribe: 'tooltipHidden', emit: 'onTooltipHidden' },\r\n            { subscribe: 'tooltipShown', emit: 'onTooltipShown' },\r\n            { emit: 'adaptiveLayoutChange' },\r\n            { emit: 'animationChange' },\r\n            { emit: 'annotationsChange' },\r\n            { emit: 'centerTemplateChange' },\r\n            { emit: 'commonAnnotationSettingsChange' },\r\n            { emit: 'commonSeriesSettingsChange' },\r\n            { emit: 'customizeAnnotationChange' },\r\n            { emit: 'customizeLabelChange' },\r\n            { emit: 'customizePointChange' },\r\n            { emit: 'dataSourceChange' },\r\n            { emit: 'diameterChange' },\r\n            { emit: 'disabledChange' },\r\n            { emit: 'elementAttrChange' },\r\n            { emit: 'exportChange' },\r\n            { emit: 'innerRadiusChange' },\r\n            { emit: 'legendChange' },\r\n            { emit: 'loadingIndicatorChange' },\r\n            { emit: 'marginChange' },\r\n            { emit: 'minDiameterChange' },\r\n            { emit: 'paletteChange' },\r\n            { emit: 'paletteExtensionModeChange' },\r\n            { emit: 'pathModifiedChange' },\r\n            { emit: 'pointSelectionModeChange' },\r\n            { emit: 'redrawOnResizeChange' },\r\n            { emit: 'resolveLabelOverlappingChange' },\r\n            { emit: 'rtlEnabledChange' },\r\n            { emit: 'segmentsDirectionChange' },\r\n            { emit: 'seriesChange' },\r\n            { emit: 'ser