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

DevExtreme UI and Visualization Components for Angular

{"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: 26.1.3\n * Build date: Wed Jun 10 2026\n *\n * Copyright (c) 2012 - 2026 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\n */\n\n/* tslint:disable:max-line-length */\n\n\nimport {\n    TransferState,\n    Component,\n    NgModule,\n    ElementRef,\n    NgZone,\n    PLATFORM_ID,\n    Inject,\n\n    Input,\n    Output,\n    OnDestroy,\n    EventEmitter,\n    OnChanges,\n    DoCheck,\n    SimpleChanges,\n    ContentChildren,\n    QueryList\n} from '@angular/core';\n\n\nimport type { AnimationEaseMode, ChartsDataType, DashStyle, ChartsColor, HatchDirection, Font, LabelPosition, TextOverflow, WordWrap, SeriesLabel, SeriesPoint, Palette, PaletteExtensionMode, ShiftLabelOverlap, Theme } from 'devextreme/common/charts';\nimport type { dxPieChartAnnotationConfig, dxPieChartCommonAnnotationConfig, PieChartSeriesInteractionMode, SmallValuesGroupingMode, PieChartLegendItem, PieChartLegendHoverMode, DisposingEvent, DoneEvent, DrawnEvent, ExportedEvent, ExportingEvent, FileSavingEvent, IncidentOccurredEvent, InitializedEvent, LegendClickEvent, OptionChangedEvent, PointClickEvent, PointHoverChangedEvent, PointSelectionChangedEvent, TooltipHiddenEvent, TooltipShownEvent, PieChartSegmentDirection, PieChartSeries, dxPieChartPointInfo, PieChartType } from 'devextreme/viz/pie_chart';\nimport type { Format } from 'devextreme/common/core/localization';\nimport type { default as DataSource, DataSourceOptions } from 'devextreme/data/data_source';\nimport type { Store } from 'devextreme/data/store';\nimport type { ExportFormat, HorizontalAlignment, Position, Orientation, VerticalEdge, SingleOrMultiple } from 'devextreme/common';\n\nimport DxPieChart from 'devextreme/viz/pie_chart';\n\n\nimport {\n    DxComponent,\n    DxTemplateHost,\n    DxIntegrationModule,\n    DxTemplateModule,\n    NestedOptionHost,\n    IterableDifferHelper,\n    WatcherHelper,\n    CollectionNestedOption,\n} from 'devextreme-angular/core';\n\nimport { DxoAdaptiveLayoutModule } from 'devextreme-angular/ui/nested';\nimport { DxoAnimationModule } from 'devextreme-angular/ui/nested';\nimport { DxiAnnotationModule } from 'devextreme-angular/ui/nested';\nimport { DxoBorderModule } from 'devextreme-angular/ui/nested';\nimport { DxoFontModule } from 'devextreme-angular/ui/nested';\nimport { DxoImageModule } from 'devextreme-angular/ui/nested';\nimport { DxoShadowModule } from 'devextreme-angular/ui/nested';\nimport { DxoCommonAnnotationSettingsModule } from 'devextreme-angular/ui/nested';\nimport { DxoCommonSeriesSettingsModule } from 'devextreme-angular/ui/nested';\nimport { DxoColorModule } from 'devextreme-angular/ui/nested';\nimport { DxoHoverStyleModule } from 'devextreme-angular/ui/nested';\nimport { DxoHatchingModule } from 'devextreme-angular/ui/nested';\nimport { DxoLabelModule } from 'devextreme-angular/ui/nested';\nimport { DxoArgumentFormatModule } from 'devextreme-angular/ui/nested';\nimport { DxoConnectorModule } from 'devextreme-angular/ui/nested';\nimport { DxoFormatModule } from 'devextreme-angular/ui/nested';\nimport { DxoSelectionStyleModule } from 'devextreme-angular/ui/nested';\nimport { DxoSmallValuesGroupingModule } from 'devextreme-angular/ui/nested';\nimport { DxoExportModule } from 'devextreme-angular/ui/nested';\nimport { DxoLegendModule } from 'devextreme-angular/ui/nested';\nimport { DxoMarginModule } from 'devextreme-angular/ui/nested';\nimport { DxoTitleModule } from 'devextreme-angular/ui/nested';\nimport { DxoSubtitleModule } from 'devextreme-angular/ui/nested';\nimport { DxoLoadingIndicatorModule } from 'devextreme-angular/ui/nested';\nimport { DxiSeriesModule } from 'devextreme-angular/ui/nested';\nimport { DxoSeriesTemplateModule } from 'devextreme-angular/ui/nested';\nimport { DxoSizeModule } from 'devextreme-angular/ui/nested';\nimport { DxoTooltipModule } from 'devextreme-angular/ui/nested';\n\nimport { DxoPieChartAdaptiveLayoutModule } from 'devextreme-angular/ui/pie-chart/nested';\nimport { DxoPieChartAnimationModule } from 'devextreme-angular/ui/pie-chart/nested';\nimport { DxiPieChartAnnotationModule } from 'devextreme-angular/ui/pie-chart/nested';\nimport { DxoPieChartAnnotationBorderModule } from 'devextreme-angular/ui/pie-chart/nested';\nimport { DxoPieChartArgumentFormatModule } from 'devextreme-angular/ui/pie-chart/nested';\nimport { DxoPieChartBorderModule } from 'devextreme-angular/ui/pie-chart/nested';\nimport { DxoPieChartColorModule } from 'devextreme-angular/ui/pie-chart/nested';\nimport { DxoPieChartCommonAnnotationSettingsModule } from 'devextreme-angular/ui/pie-chart/nested';\nimport { DxoPieChartCommonSeriesSettingsModule } from 'devextreme-angular/ui/pie-chart/nested';\nimport { DxoPieChartConnectorModule } from 'devextreme-angular/ui/pie-chart/nested';\nimport { DxoPieChartExportModule } from 'devextreme-angular/ui/pie-chart/nested';\nimport { DxoPieChartFontModule } from 'devextreme-angular/ui/pie-chart/nested';\nimport { DxoPieChartFormatModule } from 'devextreme-angular/ui/pie-chart/nested';\nimport { DxoPieChartHatchingModule } from 'devextreme-angular/ui/pie-chart/nested';\nimport { DxoPieChartHoverStyleModule } from 'devextreme-angular/ui/pie-chart/nested';\nimport { DxoPieChartImageModule } from 'devextreme-angular/ui/pie-chart/nested';\nimport { DxoPieChartLabelModule } from 'devextreme-angular/ui/pie-chart/nested';\nimport { DxoPieChartLegendModule } from 'devextreme-angular/ui/pie-chart/nested';\nimport { DxoPieChartLegendTitleModule } from 'devextreme-angular/ui/pie-chart/nested';\nimport { DxoPieChartLegendTitleSubtitleModule } from 'devextreme-angular/ui/pie-chart/nested';\nimport { DxoPieChartLoadingIndicatorModule } from 'devextreme-angular/ui/pie-chart/nested';\nimport { DxoPieChartMarginModule } from 'devextreme-angular/ui/pie-chart/nested';\nimport { DxoPieChartPieChartTitleModule } from 'devextreme-angular/ui/pie-chart/nested';\nimport { DxoPieChartPieChartTitleSubtitleModule } from 'devextreme-angular/ui/pie-chart/nested';\nimport { DxoPieChartSelectionStyleModule } from 'devextreme-angular/ui/pie-chart/nested';\nimport { DxiPieChartSeriesModule } from 'devextreme-angular/ui/pie-chart/nested';\nimport { DxoPieChartSeriesBorderModule } from 'devextreme-angular/ui/pie-chart/nested';\nimport { DxoPieChartSeriesTemplateModule } from 'devextreme-angular/ui/pie-chart/nested';\nimport { DxoPieChartShadowModule } from 'devextreme-angular/ui/pie-chart/nested';\nimport { DxoPieChartSizeModule } from 'devextreme-angular/ui/pie-chart/nested';\nimport { DxoPieChartSmallValuesGroupingModule } from 'devextreme-angular/ui/pie-chart/nested';\nimport { DxoPieChartSubtitleModule } from 'devextreme-angular/ui/pie-chart/nested';\nimport { DxoPieChartTitleModule } from 'devextreme-angular/ui/pie-chart/nested';\nimport { DxoPieChartTooltipModule } from 'devextreme-angular/ui/pie-chart/nested';\nimport { DxoPieChartTooltipBorderModule } from 'devextreme-angular/ui/pie-chart/nested';\nimport { \n           PROPERTY_TOKEN_annotations,\n           PROPERTY_TOKEN_series,\n     } from 'devextreme-angular/core/tokens';\n\n\n/**\n * The PieChart is a UI component that visualizes data as a circle divided into sectors that each represents a portion of the whole.\n\n */\n@Component({\n    selector: 'dx-pie-chart',\n    template: '',\n    styles: [ ' :host {  display: block; }'],\n    host: { ngSkipHydration: 'true' },\n    imports: [ DxIntegrationModule ],\n    providers: [\n        DxTemplateHost,\n        WatcherHelper,\n        NestedOptionHost,\n        IterableDifferHelper\n    ]\n})\nexport class DxPieChartComponent extends DxComponent implements OnDestroy, OnChanges, DoCheck {\n\n    @ContentChildren(PROPERTY_TOKEN_annotations)\n    set _annotationsContentChildren(value: QueryList<CollectionNestedOption>) {\n        this.setChildren('annotations', value);\n    }\n\n    @ContentChildren(PROPERTY_TOKEN_series)\n    set _seriesContentChildren(value: QueryList<CollectionNestedOption>) {\n        this.setChildren('series', value);\n    }\n\n    instance: DxPieChart = null;\n\n    /**\n     * Specifies adaptive layout properties.\n    \n     */\n    @Input()\n    get adaptiveLayout(): { height?: number, keepLabels?: boolean, width?: number } {\n        return this._getOption('adaptiveLayout');\n    }\n    set adaptiveLayout(value: { height?: number, keepLabels?: boolean, width?: number }) {\n        this._setOption('adaptiveLayout', value);\n    }\n\n\n    /**\n     * Specifies animation properties.\n    \n     */\n    @Input()\n    get animation(): boolean | { duration?: number, easing?: AnimationEaseMode, enabled?: boolean, maxPointCountSupported?: number } {\n        return this._getOption('animation');\n    }\n    set animation(value: boolean | { duration?: number, easing?: AnimationEaseMode, enabled?: boolean, maxPointCountSupported?: number }) {\n        this._setOption('animation', value);\n    }\n\n\n    /**\n     * Specifies the annotation collection.\n    \n     */\n    @Input()\n    get annotations(): Array<any | dxPieChartAnnotationConfig> {\n        return this._getOption('annotations');\n    }\n    set annotations(value: Array<any | dxPieChartAnnotationConfig>) {\n        this._setOption('annotations', value);\n    }\n\n\n    /**\n     * Specifies a custom template for content in the pie&apos;s center.\n    \n     */\n    @Input()\n    get centerTemplate(): any {\n        return this._getOption('centerTemplate');\n    }\n    set centerTemplate(value: any) {\n        this._setOption('centerTemplate', value);\n    }\n\n\n    /**\n     * Specifies settings common for all annotations in the PieChart.\n    \n     */\n    @Input()\n    get commonAnnotationSettings(): dxPieChartCommonAnnotationConfig {\n        return this._getOption('commonAnnotationSettings');\n    }\n    set commonAnnotationSettings(value: dxPieChartCommonAnnotationConfig) {\n        this._setOption('commonAnnotationSettings', value);\n    }\n\n\n    /**\n     * An object defining the configuration properties that are common for all series of the PieChart UI component.\n    \n     */\n    @Input()\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 } {\n        return this._getOption('commonSeriesSettings');\n    }\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 }) {\n        this._setOption('commonSeriesSettings', value);\n    }\n\n\n    /**\n     * Customizes an individual annotation.\n    \n     */\n    @Input()\n    get customizeAnnotation(): ((annotation: dxPieChartAnnotationConfig | any) => dxPieChartAnnotationConfig) | undefined {\n        return this._getOption('customizeAnnotation');\n    }\n    set customizeAnnotation(value: ((annotation: dxPieChartAnnotationConfig | any) => dxPieChartAnnotationConfig) | undefined) {\n        this._setOption('customizeAnnotation', value);\n    }\n\n\n    /**\n     * Customizes the appearance of an individual point label.\n    \n     */\n    @Input()\n    get customizeLabel(): ((pointInfo: any) => SeriesLabel) {\n        return this._getOption('customizeLabel');\n    }\n    set customizeLabel(value: ((pointInfo: any) => SeriesLabel)) {\n        this._setOption('customizeLabel', value);\n    }\n\n\n    /**\n     * Customizes the appearance of an individual series point.\n    \n     */\n    @Input()\n    get customizePoint(): ((pointInfo: any) => SeriesPoint) {\n        return this._getOption('customizePoint');\n    }\n    set customizePoint(value: ((pointInfo: any) => SeriesPoint)) {\n        this._setOption('customizePoint', value);\n    }\n\n\n    /**\n     * Binds the UI component to data.\n    \n     */\n    @Input()\n    get dataSource(): Array<any> | DataSource | DataSourceOptions | null | Store | string {\n        return this._getOption('dataSource');\n    }\n    set dataSource(value: Array<any> | DataSource | DataSourceOptions | null | Store | string) {\n        this._setOption('dataSource', value);\n    }\n\n\n    /**\n     * Specifies the diameter of the pie.\n    \n     */\n    @Input()\n    get diameter(): number | undefined {\n        return this._getOption('diameter');\n    }\n    set diameter(value: number | undefined) {\n        this._setOption('diameter', value);\n    }\n\n\n    /**\n     * Specifies whether the UI component responds to user interaction.\n    \n     */\n    @Input()\n    get disabled(): boolean {\n        return this._getOption('disabled');\n    }\n    set disabled(value: boolean) {\n        this._setOption('disabled', value);\n    }\n\n\n    /**\n     * Specifies the global attributes to be attached to the UI component&apos;s container element.\n    \n     */\n    @Input()\n    get elementAttr(): Record<string, any> {\n        return this._getOption('elementAttr');\n    }\n    set elementAttr(value: Record<string, any>) {\n        this._setOption('elementAttr', value);\n    }\n\n\n    /**\n     * Configures the exporting and printing features.\n    \n     */\n    @Input()\n    get export(): { backgroundColor?: string, enabled?: boolean, fileName?: string, formats?: Array<ExportFormat>, margin?: number, printingEnabled?: boolean, svgToCanvas?: ((svg: any, canvas: any) => any) | undefined } {\n        return this._getOption('export');\n    }\n    set export(value: { backgroundColor?: string, enabled?: boolean, fileName?: string, formats?: Array<ExportFormat>, margin?: number, printingEnabled?: boolean, svgToCanvas?: ((svg: any, canvas: any) => any) | undefined }) {\n        this._setOption('export', value);\n    }\n\n\n    /**\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.\n    \n     */\n    @Input()\n    get innerRadius(): number {\n        return this._getOption('innerRadius');\n    }\n    set innerRadius(value: number) {\n        this._setOption('innerRadius', value);\n    }\n\n\n    /**\n     * Specifies PieChart legend properties.\n    \n     */\n    @Input()\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 } {\n        return this._getOption('legend');\n    }\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 }) {\n        this._setOption('legend', value);\n    }\n\n\n    /**\n     * Configures the loading indicator.\n    \n     */\n    @Input()\n    get loadingIndicator(): { backgroundColor?: string, enabled?: boolean, font?: Font, show?: boolean, text?: string } {\n        return this._getOption('loadingIndicator');\n    }\n    set loadingIndicator(value: { backgroundColor?: string, enabled?: boolean, font?: Font, show?: boolean, text?: string }) {\n        this._setOption('loadingIndicator', value);\n    }\n\n\n    /**\n     * Generates space around the UI component.\n    \n     */\n    @Input()\n    get margin(): { bottom?: number, left?: number, right?: number, top?: number } {\n        return this._getOption('margin');\n    }\n    set margin(value: { bottom?: number, left?: number, right?: number, top?: number }) {\n        this._setOption('margin', value);\n    }\n\n\n    /**\n     * Specifies the minimum diameter of the pie.\n    \n     */\n    @Input()\n    get minDiameter(): number {\n        return this._getOption('minDiameter');\n    }\n    set minDiameter(value: number) {\n        this._setOption('minDiameter', value);\n    }\n\n\n    /**\n     * Sets the palette to be used to colorize series and their elements.\n    \n     */\n    @Input()\n    get palette(): Array<string> | Palette {\n        return this._getOption('palette');\n    }\n    set palette(value: Array<string> | Palette) {\n        this._setOption('palette', value);\n    }\n\n\n    /**\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).\n    \n     */\n    @Input()\n    get paletteExtensionMode(): PaletteExtensionMode {\n        return this._getOption('paletteExtensionMode');\n    }\n    set paletteExtensionMode(value: PaletteExtensionMode) {\n        this._setOption('paletteExtensionMode', value);\n    }\n\n\n    /**\n     * Notifies the UI component that it is embedded into an HTML page that uses a tag modifying the path.\n    \n     */\n    @Input()\n    get pathModified(): boolean {\n        return this._getOption('pathModified');\n    }\n    set pathModified(value: boolean) {\n        this._setOption('pathModified', value);\n    }\n\n\n    /**\n     * Specifies whether a single point or multiple points can be selected in the chart.\n    \n     */\n    @Input()\n    get pointSelectionMode(): SingleOrMultiple {\n        return this._getOption('pointSelectionMode');\n    }\n    set pointSelectionMode(value: SingleOrMultiple) {\n        this._setOption('pointSelectionMode', value);\n    }\n\n\n    /**\n     * Specifies whether to redraw the UI component when the size of the container changes or a mobile device rotates.\n    \n     */\n    @Input()\n    get redrawOnResize(): boolean {\n        return this._getOption('redrawOnResize');\n    }\n    set redrawOnResize(value: boolean) {\n        this._setOption('redrawOnResize', value);\n    }\n\n\n    /**\n     * Specifies how a chart must behave when point labels overlap.\n    \n     */\n    @Input()\n    get resolveLabelOverlapping(): ShiftLabelOverlap {\n        return this._getOption('resolveLabelOverlapping');\n    }\n    set resolveLabelOverlapping(value: ShiftLabelOverlap) {\n        this._setOption('resolveLabelOverlapping', value);\n    }\n\n\n    /**\n     * Switches the UI component to a right-to-left representation.\n    \n     */\n    @Input()\n    get rtlEnabled(): boolean {\n        return this._getOption('rtlEnabled');\n    }\n    set rtlEnabled(value: boolean) {\n        this._setOption('rtlEnabled', value);\n    }\n\n\n    /**\n     * Specifies the direction that the pie chart segments will occupy.\n    \n     */\n    @Input()\n    get segmentsDirection(): PieChartSegmentDirection {\n        return this._getOption('segmentsDirection');\n    }\n    set segmentsDirection(value: PieChartSegmentDirection) {\n        this._setOption('segmentsDirection', value);\n    }\n\n\n    /**\n     * Specifies properties for the series of the PieChart UI component.\n    \n     */\n    @Input()\n    get series(): Array<PieChartSeries> | PieChartSeries | undefined {\n        return this._getOption('series');\n    }\n    set series(value: Array<PieChartSeries> | PieChartSeries | undefined) {\n        this._setOption('series', value);\n    }\n\n\n    /**\n     * Defines properties for the series template.\n    \n     */\n    @Input()\n    get seriesTemplate(): any {\n        return this._getOption('seriesTemplate');\n    }\n    set seriesTemplate(value: any) {\n        this._setOption('seriesTemplate', value);\n    }\n\n\n    /**\n     * Specifies the UI component&apos;s size in pixels.\n    \n     */\n    @Input()\n    get size(): { height?: number | undefined, width?: number | undefined } {\n        return this._getOption('size');\n    }\n    set size(value: { height?: number | undefined, width?: number | undefined }) {\n        this._setOption('size', value);\n    }\n\n\n    /**\n     * Allows you to display several adjoining pies in the same size.\n    \n     */\n    @Input()\n    get sizeGroup(): string | undefined {\n        return this._getOption('sizeGroup');\n    }\n    set sizeGroup(value: string | undefined) {\n        this._setOption('sizeGroup', value);\n    }\n\n\n    /**\n     * Specifies the angle in arc degrees from which the first segment of a pie chart should start.\n    \n     */\n    @Input()\n    get startAngle(): number {\n        return this._getOption('startAngle');\n    }\n    set startAngle(value: number) {\n        this._setOption('startAngle', value);\n    }\n\n\n    /**\n     * Sets the name of the theme the UI component uses.\n    \n     */\n    @Input()\n    get theme(): Theme {\n        return this._getOption('theme');\n    }\n    set theme(value: Theme) {\n        this._setOption('theme', value);\n    }\n\n\n    /**\n     * Configures the UI component&apos;s title.\n    \n     */\n    @Input()\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 } {\n        return this._getOption('title');\n    }\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 }) {\n        this._setOption('title', value);\n    }\n\n\n    /**\n     * \n    \n     */\n    @Input()\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: dxPieChartPointInfo) => 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 } {\n        return this._getOption('tooltip');\n    }\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: dxPieChartPointInfo) => 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 }) {\n        this._setOption('tooltip', value);\n    }\n\n\n    /**\n     * Specifies the type of the pie chart series.\n    \n     */\n    @Input()\n    get type(): PieChartType {\n        return this._getOption('type');\n    }\n    set type(value: PieChartType) {\n        this._setOption('type', value);\n    }\n\n    /**\n    \n     * A function that is executed before the UI component is disposed of.\n    \n    \n     */\n    @Output() onDisposing: EventEmitter<DisposingEvent>;\n\n    /**\n    \n     * A function that is executed when all series are ready.\n    \n    \n     */\n    @Output() onDone: EventEmitter<DoneEvent>;\n\n    /**\n    \n     * A function that is executed when the UI component&apos;s rendering has finished.\n    \n    \n     */\n    @Output() onDrawn: EventEmitter<DrawnEvent>;\n\n    /**\n    \n     * A function that is executed after the UI component is exported.\n    \n    \n     */\n    @Output() onExported: EventEmitter<ExportedEvent>;\n\n    /**\n    \n     * A function that is executed before the UI component is exported.\n    \n    \n     */\n    @Output() onExporting: EventEmitter<ExportingEvent>;\n\n    /**\n    \n     * A function that is executed before a file with exported UI component is saved to the user&apos;s local storage.\n    \n    \n     */\n    @Output() onFileSaving: EventEmitter<FileSavingEvent>;\n\n    /**\n    \n     * A function that is executed when an error or warning occurs.\n    \n    \n     */\n    @Output() onIncidentOccurred: EventEmitter<IncidentOccurredEvent>;\n\n    /**\n    \n     * A function used in JavaScript frameworks to save the UI component instance.\n    \n    \n     */\n    @Output() onInitialized: EventEmitter<InitializedEvent>;\n\n    /**\n    \n     * A function that is executed when a legend item is clicked or tapped.\n    \n    \n     */\n    @Output() onLegendClick: EventEmitter<LegendClickEvent>;\n\n    /**\n    \n     * A function that is executed after a UI component property is changed.\n    \n    \n     */\n    @Output() onOptionChanged: EventEmitter<OptionChangedEvent>;\n\n    /**\n    \n     * A function that is executed when a series point is clicked or tapped.\n    \n    \n     */\n    @Output() onPointClick: EventEmitter<PointClickEvent>;\n\n    /**\n    \n     * A function that is executed after the pointer enters or leaves a series point.\n    \n    \n     */\n    @Output() onPointHoverChanged: EventEmitter<PointHoverChangedEvent>;\n\n    /**\n    \n     * A function that is executed when a series point is selected or selection is canceled.\n    \n    \n     */\n    @Output() onPointSelectionChanged: EventEmitter<PointSelectionChangedEvent>;\n\n    /**\n    \n     * A function that is executed when a tooltip becomes hidden.\n    \n    \n     */\n    @Output() onTooltipHidden: EventEmitter<TooltipHiddenEvent>;\n\n    /**\n    \n     * A function that is executed when a tooltip appears.\n    \n    \n     */\n    @Output() onTooltipShown: EventEmitter<TooltipShownEvent>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() adaptiveLayoutChange: EventEmitter<{ height?: number, keepLabels?: boolean, width?: number }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() animationChange: EventEmitter<boolean | { duration?: number, easing?: AnimationEaseMode, enabled?: boolean, maxPointCountSupported?: number }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() annotationsChange: EventEmitter<Array<any | dxPieChartAnnotationConfig>>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() centerTemplateChange: EventEmitter<any>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() commonAnnotationSettingsChange: EventEmitter<dxPieChartCommonAnnotationConfig>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\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 }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() customizeAnnotationChange: EventEmitter<((annotation: dxPieChartAnnotationConfig | any) => dxPieChartAnnotationConfig) | undefined>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() customizeLabelChange: EventEmitter<((pointInfo: any) => SeriesLabel)>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() customizePointChange: EventEmitter<((pointInfo: any) => SeriesPoint)>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() dataSourceChange: EventEmitter<Array<any> | DataSource | DataSourceOptions | null | Store | string>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() diameterChange: EventEmitter<number | undefined>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() disabledChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() elementAttrChange: EventEmitter<Record<string, any>>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() exportChange: EventEmitter<{ backgroundColor?: string, enabled?: boolean, fileName?: string, formats?: Array<ExportFormat>, margin?: number, printingEnabled?: boolean, svgToCanvas?: ((svg: any, canvas: any) => any) | undefined }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() innerRadiusChange: EventEmitter<number>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\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 }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() loadingIndicatorChange: EventEmitter<{ backgroundColor?: string, enabled?: boolean, font?: Font, show?: boolean, text?: string }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() marginChange: EventEmitter<{ bottom?: number, left?: number, right?: number, top?: number }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() minDiameterChange: EventEmitter<number>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() paletteChange: EventEmitter<Array<string> | Palette>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() paletteExtensionModeChange: EventEmitter<PaletteExtensionMode>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() pathModifiedChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() pointSelectionModeChange: EventEmitter<SingleOrMultiple>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() redrawOnResizeChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() resolveLabelOverlappingChange: EventEmitter<ShiftLabelOverlap>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() rtlEnabledChange: EventEmitter<boolean>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() segmentsDirectionChange: EventEmitter<PieChartSegmentDirection>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() seriesChange: EventEmitter<Array<PieChartSeries> | PieChartSeries | undefined>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() seriesTemplateChange: EventEmitter<any>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() sizeChange: EventEmitter<{ height?: number | undefined, width?: number | undefined }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() sizeGroupChange: EventEmitter<string | undefined>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() startAngleChange: EventEmitter<number>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() themeChange: EventEmitter<Theme>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\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 }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\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: dxPieChartPointInfo) => 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 }>;\n\n    /**\n    \n     * This member supports the internal infrastructure and is not intended to be used directly from your code.\n    \n     */\n    @Output() typeChange: EventEmitter<PieChartType>;\n\n\n\n\n    constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost,\n            private _watcherHelper: WatcherHelper,\n            private _idh: IterableDifferHelper,\n            optionHost: NestedOptionHost,\n            transferState: TransferState,\n            @Inject(PLATFORM_ID) platformId: any) {\n\n        super(elementRef, ngZone, templateHost, _watcherHelper, transferState, platformId);\n\n        this._createEventEmitters([\n            { subscribe: 'disposing', emit: 'onDisposing' },\n            { subscribe: 'done', emit: 'onDone' },\n            { subscribe: 'drawn', emit: 'onDrawn' },\n            { subscribe: 'exported', emit: 'onExported' },\n            { subscribe: 'exporting', emit: 'onExporting' },\n            { subscribe: 'fileSaving', emit: 'onFileSaving' },\n            { subscribe: 'incidentOccurred', emit: 'onIncidentOccurred' },\n            { subscribe: 'initialized', emit: 'onInitialized' },\n            { subscribe: 'legendClick', emit: 'onLegendClick' },\n            { subscribe: 'optionChanged', emit: 'onOptionChanged' },\n            { subscribe: 'pointClick', emit: 'onPointClick' },\n            { subscribe: 'pointHoverChanged', emit: 'onPointHoverChanged' },\n            { subscribe: 'pointSelectionChanged', emit: 'onPointSelectionChanged' },\n            { subscribe: 'tooltipHidden', emit: 'onTooltipHidden' },\n            { subscribe: 'tooltipShown', emit: 'onTooltipShown' },\n            { emit: 'adaptiveLayoutChange' },\n            { emit: 'animationChange' },\n            { emit: 'annotationsChange' },\n            { emit: 'centerTemplateChange' },\n            { emit: 'commonAnnotationSettingsChange' },\n            { emit: 'commonSeriesSettingsChange' },\n            { emit: 'customizeAnnotationChange' },\n            { emit: 'customizeLabelChange' },\n            { emit: 'customizePointChange' },\n            { emit: 'dataSourceChange' },\n            { emit: 'diameterChange' },\n            { emit: 'disabledChange' },\n            { emit: 'elementAttrChange' },\n            { emit: 'exportChange' },\n            { emit: 'innerRadiusChange' },\n            { emit: 'legendChange' },\n            { emit: 'loadingIndicatorChange' },\n            { emit: 'marginChange' },\n            { emit: 'minDiameterChange' },\n            { emit: 'paletteChange' },\n            { emit: 'paletteExtensionModeChange' },\n            { emit: 'pathModifiedChange' },\n            { emit: 'pointSelectionModeChange' },\n            { emit: 'redrawOnResizeChange' },\n            { emit: 'resolveLabelOverlappingChange' },\n            { emit: 'rtlEnabledChange' },\n            { emit: 'segmentsDirectionChange' },\n            { emit: 'seriesChange' },\n            { emit: 'seriesTemplateChange' },\n            { emit: 'sizeChange' },\n            { emit: 'sizeGroupChange' },\n            { emit: 'startAngleChange' },\n            { emit: 'themeChange' },\n            { emit: 'titleChange' },\n            { emit: 'tooltipChange' },\n            { emit: 'typeChange' }\n        ]);\n\n        this._idh.setHost(this);\n        optionHost.setHost(this);\n    }\n\n    protected _createInstance(element, options) {\n\n        return new DxPieChart(element, options);\n    }\n\n\n    ngOnDestroy() {\n        this._destroyWidget();\n    }\n\n    ngOnChanges(changes: SimpleChanges) {\n        super.ngOnChanges(changes);\n        this.setupChanges('annotations', changes);\n        this.setupChanges('dataSource', changes);\n        this.setupChanges('palette', changes);\n        this.setupChanges('series', changes);\n    }\n\n    setupChanges(prop: string, changes: SimpleChanges) {\n        if (!(prop in this._optionsToUpdate)) {\n            this._idh.setup(prop, changes);\n        }\n    }\n\n    ngDoCheck() {\n        this._idh.doCheck('annotations');\n        this._idh.doCheck('dataSource');\n        this._idh.doCheck('palette');\n        this._idh.doCheck('series');\n        this._watcherHelper.checkWatchers();\n        super.ngDoCheck();\n        super.clearChangedOptions();\n    }\n\n    _setOption(name: string, value: any) {\n        let isSetup = this._idh.setupSingle(name, value);\n        let isChanged = this._idh.getChanges(name, value) !== null;\n\n        if (isSetup || isChanged) {\n            super._setOption(name, value);\n        }\n    }\n}\n\n@NgModule({\n  imports: [\n    DxPieChartComponent,\n    DxoAdaptiveLayoutModule,\n    DxoAnimationModule,\n    DxiAnnotationModule,\n    DxoBorderModule,\n    DxoFontModule,\n    DxoImageModule,\n    DxoShadowModule,\n    DxoCommonAnnotationSettingsModule,\n    DxoCommonSeriesSettingsModule,\n    DxoColorModule,\n    DxoHoverStyleModule,\n    DxoHatchingModule,\n    DxoLabelModule,\n    DxoArgumentFormatModule,\n    DxoConnectorModule,\n    DxoFormatModule,\n    DxoSelectionStyleModule,\n    DxoSmallValuesGroupingModule,\n    DxoExportModule,\n    DxoLegendModule,\n    DxoMarginModule,\n    DxoTitleModule,\n    DxoSubtitleModule,\n    DxoLoadingIndicatorModule,\n    DxiSeriesModule,\n    DxoSeriesTemplateModule,\n    DxoSizeModule,\n    DxoTooltipModule,\n    DxoPieChartAdaptiveLayoutModule,\n    DxoPieChartAnimationModule,\n    DxiPieChartAnnotationModule,\n    DxoPieChartAnnotationBorderModule,\n    DxoPieChartArgumentFormatModule,\n    DxoPieChartBorderModule,\n    DxoPieChartColorModule,\n    DxoPieChartCommonAnnotationSettingsModule,\n    DxoPieChartCommonSeriesSettingsModule,\n    DxoPieChartConnectorModule,\n    DxoPieChartExportModule,\n    DxoPieChartFontModule,\n    DxoPieChartFormatModule,\n    DxoPieChartHatchingModule,\n    DxoPieChartHoverStyleModule,\n    DxoPieChartImageModule,\n    DxoPieChartLabelModule,\n    DxoPieChartLegendModule,\n    DxoPieChartLegendTitleModule,\n    DxoPieChartL