devextreme-angular
Version:
Angular UI and visualization components based on DevExtreme widgets
1,342 lines (1,125 loc) • 336 kB
JavaScript
/*!
* devextreme-angular
* Version: 24.2.6
* Build date: Mon Mar 17 2025
*
* Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
*
* This software may be modified and distributed under the terms
* of the MIT license. See the LICENSE file in the root of the project for details.
*
* https://github.com/DevExpress/devextreme-angular
*/
/* tslint:disable:max-line-length */
import { TransferState, Component, NgModule, ElementRef, NgZone, PLATFORM_ID, Inject, Input, Output, EventEmitter, ContentChildren, QueryList } from '@angular/core';
import DxChart from 'devextreme/viz/chart';
import { DxComponent, DxTemplateHost, DxIntegrationModule, DxTemplateModule, NestedOptionHost, IterableDifferHelper, WatcherHelper } from 'devextreme-angular/core';
import { DxoAdaptiveLayoutModule } from 'devextreme-angular/ui/nested';
import { DxoAnimationModule } from 'devextreme-angular/ui/nested';
import { DxiAnnotationModule } from 'devextreme-angular/ui/nested';
import { DxoBorderModule } from 'devextreme-angular/ui/nested';
import { DxoFontModule } from 'devextreme-angular/ui/nested';
import { DxoImageModule } from 'devextreme-angular/ui/nested';
import { DxoShadowModule } from 'devextreme-angular/ui/nested';
import { DxoArgumentAxisModule } from 'devextreme-angular/ui/nested';
import { DxoAggregationIntervalModule } from 'devextreme-angular/ui/nested';
import { DxiBreakModule } from 'devextreme-angular/ui/nested';
import { DxoBreakStyleModule } from 'devextreme-angular/ui/nested';
import { DxiConstantLineModule } from 'devextreme-angular/ui/nested';
import { DxoLabelModule } from 'devextreme-angular/ui/nested';
import { DxoConstantLineStyleModule } from 'devextreme-angular/ui/nested';
import { DxoGridModule } from 'devextreme-angular/ui/nested';
import { DxoFormatModule } from 'devextreme-angular/ui/nested';
import { DxoMinorGridModule } from 'devextreme-angular/ui/nested';
import { DxoMinorTickModule } from 'devextreme-angular/ui/nested';
import { DxoMinorTickIntervalModule } from 'devextreme-angular/ui/nested';
import { DxoMinVisualRangeLengthModule } from 'devextreme-angular/ui/nested';
import { DxiStripModule } from 'devextreme-angular/ui/nested';
import { DxoStripStyleModule } from 'devextreme-angular/ui/nested';
import { DxoTickModule } from 'devextreme-angular/ui/nested';
import { DxoTickIntervalModule } from 'devextreme-angular/ui/nested';
import { DxoTitleModule } from 'devextreme-angular/ui/nested';
import { DxoCommonAnnotationSettingsModule } from 'devextreme-angular/ui/nested';
import { DxoCommonAxisSettingsModule } from 'devextreme-angular/ui/nested';
import { DxoCommonPaneSettingsModule } from 'devextreme-angular/ui/nested';
import { DxoBackgroundColorModule } from 'devextreme-angular/ui/nested';
import { DxoCommonSeriesSettingsModule } from 'devextreme-angular/ui/nested';
import { DxoAggregationModule } from 'devextreme-angular/ui/nested';
import { DxoAreaModule } from 'devextreme-angular/ui/nested';
import { DxoHoverStyleModule } from 'devextreme-angular/ui/nested';
import { DxoHatchingModule } from 'devextreme-angular/ui/nested';
import { DxoConnectorModule } from 'devextreme-angular/ui/nested';
import { DxoPointModule } from 'devextreme-angular/ui/nested';
import { DxoHeightModule } from 'devextreme-angular/ui/nested';
import { DxoUrlModule } from 'devextreme-angular/ui/nested';
import { DxoWidthModule } from 'devextreme-angular/ui/nested';
import { DxoSelectionStyleModule } from 'devextreme-angular/ui/nested';
import { DxoReductionModule } from 'devextreme-angular/ui/nested';
import { DxoValueErrorBarModule } from 'devextreme-angular/ui/nested';
import { DxoBarModule } from 'devextreme-angular/ui/nested';
import { DxoBubbleModule } from 'devextreme-angular/ui/nested';
import { DxoCandlestickModule } from 'devextreme-angular/ui/nested';
import { DxoColorModule } from 'devextreme-angular/ui/nested';
import { DxoFullstackedareaModule } from 'devextreme-angular/ui/nested';
import { DxoFullstackedbarModule } from 'devextreme-angular/ui/nested';
import { DxoFullstackedlineModule } from 'devextreme-angular/ui/nested';
import { DxoFullstackedsplineModule } from 'devextreme-angular/ui/nested';
import { DxoFullstackedsplineareaModule } from 'devextreme-angular/ui/nested';
import { DxoArgumentFormatModule } from 'devextreme-angular/ui/nested';
import { DxoLineModule } from 'devextreme-angular/ui/nested';
import { DxoRangeareaModule } from 'devextreme-angular/ui/nested';
import { DxoRangebarModule } from 'devextreme-angular/ui/nested';
import { DxoScatterModule } from 'devextreme-angular/ui/nested';
import { DxoSplineModule } from 'devextreme-angular/ui/nested';
import { DxoSplineareaModule } from 'devextreme-angular/ui/nested';
import { DxoStackedareaModule } from 'devextreme-angular/ui/nested';
import { DxoStackedbarModule } from 'devextreme-angular/ui/nested';
import { DxoStackedlineModule } from 'devextreme-angular/ui/nested';
import { DxoStackedsplineModule } from 'devextreme-angular/ui/nested';
import { DxoStackedsplineareaModule } from 'devextreme-angular/ui/nested';
import { DxoStepareaModule } from 'devextreme-angular/ui/nested';
import { DxoSteplineModule } from 'devextreme-angular/ui/nested';
import { DxoStockModule } from 'devextreme-angular/ui/nested';
import { DxoCrosshairModule } from 'devextreme-angular/ui/nested';
import { DxoHorizontalLineModule } from 'devextreme-angular/ui/nested';
import { DxoVerticalLineModule } from 'devextreme-angular/ui/nested';
import { DxoDataPrepareSettingsModule } from 'devextreme-angular/ui/nested';
import { DxoExportModule } from 'devextreme-angular/ui/nested';
import { DxoLegendModule } from 'devextreme-angular/ui/nested';
import { DxoMarginModule } from 'devextreme-angular/ui/nested';
import { DxoSubtitleModule } from 'devextreme-angular/ui/nested';
import { DxoLoadingIndicatorModule } from 'devextreme-angular/ui/nested';
import { DxiPaneModule } from 'devextreme-angular/ui/nested';
import { DxoScrollBarModule } from 'devextreme-angular/ui/nested';
import { DxiSeriesModule } from 'devextreme-angular/ui/nested';
import { DxoSeriesTemplateModule } from 'devextreme-angular/ui/nested';
import { DxoSizeModule } from 'devextreme-angular/ui/nested';
import { DxoTooltipModule } from 'devextreme-angular/ui/nested';
import { DxiValueAxisModule } from 'devextreme-angular/ui/nested';
import { DxoZoomAndPanModule } from 'devextreme-angular/ui/nested';
import { DxoDragBoxStyleModule } from 'devextreme-angular/ui/nested';
import { DxoChartAdaptiveLayoutModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartAggregationModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartAggregationIntervalModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartAnimationModule } from 'devextreme-angular/ui/chart/nested';
import { DxiChartAnnotationModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartAnnotationBorderModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartAnnotationImageModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartArgumentAxisModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartArgumentFormatModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartAxisConstantLineStyleModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartAxisConstantLineStyleLabelModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartAxisLabelModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartAxisTitleModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartBackgroundColorModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartBorderModule } from 'devextreme-angular/ui/chart/nested';
import { DxiChartBreakModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartBreakStyleModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartChartTitleModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartChartTitleSubtitleModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartColorModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartCommonAnnotationSettingsModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartCommonAxisSettingsModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartCommonAxisSettingsConstantLineStyleModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartCommonAxisSettingsConstantLineStyleLabelModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartCommonAxisSettingsLabelModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartCommonAxisSettingsTitleModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartCommonPaneSettingsModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartCommonSeriesSettingsModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartCommonSeriesSettingsHoverStyleModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartCommonSeriesSettingsLabelModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartCommonSeriesSettingsSelectionStyleModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartConnectorModule } from 'devextreme-angular/ui/chart/nested';
import { DxiChartConstantLineModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartConstantLineLabelModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartConstantLineStyleModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartCrosshairModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartDataPrepareSettingsModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartDragBoxStyleModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartExportModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartFontModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartFormatModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartGridModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartHatchingModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartHeightModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartHorizontalLineModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartHorizontalLineLabelModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartHoverStyleModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartImageModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartLabelModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartLegendModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartLegendTitleModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartLegendTitleSubtitleModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartLengthModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartLoadingIndicatorModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartMarginModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartMinorGridModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartMinorTickModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartMinorTickIntervalModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartMinVisualRangeLengthModule } from 'devextreme-angular/ui/chart/nested';
import { DxiChartPaneModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartPaneBorderModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartPointModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartPointBorderModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartPointHoverStyleModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartPointImageModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartPointSelectionStyleModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartReductionModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartScrollBarModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartSelectionStyleModule } from 'devextreme-angular/ui/chart/nested';
import { DxiChartSeriesModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartSeriesBorderModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartSeriesTemplateModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartShadowModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartSizeModule } from 'devextreme-angular/ui/chart/nested';
import { DxiChartStripModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartStripLabelModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartStripStyleModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartStripStyleLabelModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartSubtitleModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartTickModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartTickIntervalModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartTitleModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartTooltipModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartTooltipBorderModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartUrlModule } from 'devextreme-angular/ui/chart/nested';
import { DxiChartValueAxisModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartValueErrorBarModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartVerticalLineModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartVisualRangeModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartWholeRangeModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartWidthModule } from 'devextreme-angular/ui/chart/nested';
import { DxoChartZoomAndPanModule } from 'devextreme-angular/ui/chart/nested';
import { DxiAnnotationComponent } from 'devextreme-angular/ui/nested';
import { DxiPaneComponent } from 'devextreme-angular/ui/nested';
import { DxiSeriesComponent } from 'devextreme-angular/ui/nested';
import { DxiValueAxisComponent } from 'devextreme-angular/ui/nested';
import { DxiChartAnnotationComponent } from 'devextreme-angular/ui/chart/nested';
import { DxiChartPaneComponent } from 'devextreme-angular/ui/chart/nested';
import { DxiChartSeriesComponent } from 'devextreme-angular/ui/chart/nested';
import { DxiChartValueAxisComponent } from 'devextreme-angular/ui/chart/nested';
import * as i0 from "@angular/core";
import * as i1 from "devextreme-angular/core";
/**
* The Chart is a UI component that visualizes data from a local or remote storage using a great variety of series types along with different interactive elements, such as tooltips, crosshair pointer, legend, etc.
*/
export class DxChartComponent extends DxComponent {
_watcherHelper;
_idh;
instance = null;
/**
* Specifies adaptive layout properties.
*/
get adaptiveLayout() {
return this._getOption('adaptiveLayout');
}
set adaptiveLayout(value) {
this._setOption('adaptiveLayout', value);
}
/**
* Specifies whether to adjust the value axis's visualRange when the argument axis is being zoomed or panned.
*/
get adjustOnZoom() {
return this._getOption('adjustOnZoom');
}
set adjustOnZoom(value) {
this._setOption('adjustOnZoom', value);
}
/**
* Specifies animation properties.
*/
get animation() {
return this._getOption('animation');
}
set animation(value) {
this._setOption('animation', value);
}
/**
* Specifies the annotation collection.
*/
get annotations() {
return this._getOption('annotations');
}
set annotations(value) {
this._setOption('annotations', value);
}
/**
* Configures the argument axis.
*/
get argumentAxis() {
return this._getOption('argumentAxis');
}
set argumentAxis(value) {
this._setOption('argumentAxis', value);
}
/**
* Specifies whether to hide series point markers automatically to reduce visual clutter.
*/
get autoHidePointMarkers() {
return this._getOption('autoHidePointMarkers');
}
set autoHidePointMarkers(value) {
this._setOption('autoHidePointMarkers', value);
}
/**
* Controls the padding and consequently the width of a group of bars with the same argument using relative units. Ignored if the barGroupWidth property is set.
*/
get barGroupPadding() {
return this._getOption('barGroupPadding');
}
set barGroupPadding(value) {
this._setOption('barGroupPadding', value);
}
/**
* Specifies a fixed width for groups of bars with the same argument, measured in pixels. Takes precedence over the barGroupPadding property.
*/
get barGroupWidth() {
return this._getOption('barGroupWidth');
}
set barGroupWidth(value) {
this._setOption('barGroupWidth', value);
}
/**
* Specifies settings common for all annotations in the chart.
*/
get commonAnnotationSettings() {
return this._getOption('commonAnnotationSettings');
}
set commonAnnotationSettings(value) {
this._setOption('commonAnnotationSettings', value);
}
/**
* Defines common settings for both the argument and value axis in a chart.
*/
get commonAxisSettings() {
return this._getOption('commonAxisSettings');
}
set commonAxisSettings(value) {
this._setOption('commonAxisSettings', value);
}
/**
* Defines common settings for all panes in a chart.
*/
get commonPaneSettings() {
return this._getOption('commonPaneSettings');
}
set commonPaneSettings(value) {
this._setOption('commonPaneSettings', value);
}
/**
* Specifies settings common for all series in the chart.
*/
get commonSeriesSettings() {
return this._getOption('commonSeriesSettings');
}
set commonSeriesSettings(value) {
this._setOption('commonSeriesSettings', value);
}
/**
* Specifies background color of the chart container.
*/
get containerBackgroundColor() {
return this._getOption('containerBackgroundColor');
}
set containerBackgroundColor(value) {
this._setOption('containerBackgroundColor', value);
}
/**
* Configures the crosshair feature.
*/
get crosshair() {
return this._getOption('crosshair');
}
set crosshair(value) {
this._setOption('crosshair', value);
}
/**
* Customizes an individual annotation.
*/
get customizeAnnotation() {
return this._getOption('customizeAnnotation');
}
set customizeAnnotation(value) {
this._setOption('customizeAnnotation', value);
}
/**
* Customizes the appearance of an individual point label.
*/
get customizeLabel() {
return this._getOption('customizeLabel');
}
set customizeLabel(value) {
this._setOption('customizeLabel', value);
}
/**
* Customizes the appearance of an individual series point.
*/
get customizePoint() {
return this._getOption('customizePoint');
}
set customizePoint(value) {
this._setOption('customizePoint', value);
}
/**
* Processes data before visualizing it.
*/
get dataPrepareSettings() {
return this._getOption('dataPrepareSettings');
}
set dataPrepareSettings(value) {
this._setOption('dataPrepareSettings', value);
}
/**
* Binds the UI component to data.
*/
get dataSource() {
return this._getOption('dataSource');
}
set dataSource(value) {
this._setOption('dataSource', value);
}
/**
* Specifies which pane should be used by default.
*/
get defaultPane() {
return this._getOption('defaultPane');
}
set defaultPane(value) {
this._setOption('defaultPane', value);
}
/**
* Specifies whether the UI component responds to user interaction.
*/
get disabled() {
return this._getOption('disabled');
}
set disabled(value) {
this._setOption('disabled', value);
}
/**
* Specifies the global attributes to be attached to the UI component's container element.
*/
get elementAttr() {
return this._getOption('elementAttr');
}
set elementAttr(value) {
this._setOption('elementAttr', value);
}
/**
* Configures the exporting and printing features.
*/
get export() {
return this._getOption('export');
}
set export(value) {
this._setOption('export', value);
}
/**
* Specifies the properties of a chart's legend.
*/
get legend() {
return this._getOption('legend');
}
set legend(value) {
this._setOption('legend', value);
}
/**
* Configures the loading indicator.
*/
get loadingIndicator() {
return this._getOption('loadingIndicator');
}
set loadingIndicator(value) {
this._setOption('loadingIndicator', value);
}
/**
* Generates space around the UI component.
*/
get margin() {
return this._getOption('margin');
}
set margin(value) {
this._setOption('margin', value);
}
/**
* Specifies a coefficient determining the diameter of the largest bubble.
*/
get maxBubbleSize() {
return this._getOption('maxBubbleSize');
}
set maxBubbleSize(value) {
this._setOption('maxBubbleSize', value);
}
/**
* Specifies the diameter of the smallest bubble measured in pixels.
*/
get minBubbleSize() {
return this._getOption('minBubbleSize');
}
set minBubbleSize(value) {
this._setOption('minBubbleSize', value);
}
/**
* Forces the UI component to treat negative values as zeroes. Applies to stacked-like series only.
*/
get negativesAsZeroes() {
return this._getOption('negativesAsZeroes');
}
set negativesAsZeroes(value) {
this._setOption('negativesAsZeroes', value);
}
/**
* Sets the palette to be used for colorizing series and their elements.
*/
get palette() {
return this._getOption('palette');
}
set palette(value) {
this._setOption('palette', value);
}
/**
* 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).
*/
get paletteExtensionMode() {
return this._getOption('paletteExtensionMode');
}
set paletteExtensionMode(value) {
this._setOption('paletteExtensionMode', value);
}
/**
* Declares a collection of panes.
*/
get panes() {
return this._getOption('panes');
}
set panes(value) {
this._setOption('panes', value);
}
/**
* Notifies the UI component that it is embedded into an HTML page that uses a tag modifying the path.
*/
get pathModified() {
return this._getOption('pathModified');
}
set pathModified(value) {
this._setOption('pathModified', value);
}
/**
* Specifies whether a single point or multiple points can be selected in the chart.
*/
get pointSelectionMode() {
return this._getOption('pointSelectionMode');
}
set pointSelectionMode(value) {
this._setOption('pointSelectionMode', value);
}
/**
* Specifies whether to redraw the UI component when the size of the container changes or a mobile device rotates.
*/
get redrawOnResize() {
return this._getOption('redrawOnResize');
}
set redrawOnResize(value) {
this._setOption('redrawOnResize', value);
}
/**
* Specifies whether panes can be resized if other chart elements require more space after zooming or panning.
*/
get resizePanesOnZoom() {
return this._getOption('resizePanesOnZoom');
}
set resizePanesOnZoom(value) {
this._setOption('resizePanesOnZoom', value);
}
/**
* Specifies how the chart must behave when series point labels overlap.
*/
get resolveLabelOverlapping() {
return this._getOption('resolveLabelOverlapping');
}
set resolveLabelOverlapping(value) {
this._setOption('resolveLabelOverlapping', value);
}
/**
* Swaps the axes around making the value axis horizontal and the argument axis vertical.
*/
get rotated() {
return this._getOption('rotated');
}
set rotated(value) {
this._setOption('rotated', value);
}
/**
* Switches the UI component to a right-to-left representation.
*/
get rtlEnabled() {
return this._getOption('rtlEnabled');
}
set rtlEnabled(value) {
this._setOption('rtlEnabled', value);
}
/**
* Specifies the settings of the scroll bar.
*/
get scrollBar() {
return this._getOption('scrollBar');
}
set scrollBar(value) {
this._setOption('scrollBar', value);
}
/**
* Specifies properties for Chart UI component series.
*/
get series() {
return this._getOption('series');
}
set series(value) {
this._setOption('series', value);
}
/**
* Specifies whether a single series or multiple series can be selected in the chart.
*/
get seriesSelectionMode() {
return this._getOption('seriesSelectionMode');
}
set seriesSelectionMode(value) {
this._setOption('seriesSelectionMode', value);
}
/**
* Defines properties for the series template.
*/
get seriesTemplate() {
return this._getOption('seriesTemplate');
}
set seriesTemplate(value) {
this._setOption('seriesTemplate', value);
}
/**
* Specifies the UI component's size in pixels.
*/
get size() {
return this._getOption('size');
}
set size(value) {
this._setOption('size', value);
}
/**
* Specifies whether a point should remain in the hover state when the mouse pointer moves away.
*/
get stickyHovering() {
return this._getOption('stickyHovering');
}
set stickyHovering(value) {
this._setOption('stickyHovering', value);
}
/**
* Indicates whether or not to synchronize value axes when they are displayed on a single pane.
*/
get synchronizeMultiAxes() {
return this._getOption('synchronizeMultiAxes');
}
set synchronizeMultiAxes(value) {
this._setOption('synchronizeMultiAxes', value);
}
/**
* Sets the name of the theme the UI component uses.
*/
get theme() {
return this._getOption('theme');
}
set theme(value) {
this._setOption('theme', value);
}
/**
* Configures the UI component's title.
*/
get title() {
return this._getOption('title');
}
set title(value) {
this._setOption('title', value);
}
/**
* Configures tooltips.
*/
get tooltip() {
return this._getOption('tooltip');
}
set tooltip(value) {
this._setOption('tooltip', value);
}
/**
* Configures the value axis.
*/
get valueAxis() {
return this._getOption('valueAxis');
}
set valueAxis(value) {
this._setOption('valueAxis', value);
}
/**
* Configures zooming and panning.
*/
get zoomAndPan() {
return this._getOption('zoomAndPan');
}
set zoomAndPan(value) {
this._setOption('zoomAndPan', value);
}
/**
* A function that is executed when a label on the argument axis is clicked or tapped.
*/
onArgumentAxisClick;
/**
* A function that is executed before the UI component is disposed of.
*/
onDisposing;
/**
* A function that is executed when all series are ready.
*/
onDone;
/**
* A function that is executed when the UI component's rendering has finished.
*/
onDrawn;
/**
* A function that is executed after the UI component is exported.
*/
onExported;
/**
* A function that is executed before the UI component is exported.
*/
onExporting;
/**
* A function that is executed before a file with exported UI component is saved to the user's local storage.
*/
onFileSaving;
/**
* A function that is executed when an error or warning occurs.
*/
onIncidentOccurred;
/**
* A function used in JavaScript frameworks to save the UI component instance.
*/
onInitialized;
/**
* A function that is executed when a legend item is clicked or tapped.
*/
onLegendClick;
/**
* A function that is executed after a UI component property is changed.
*/
onOptionChanged;
/**
* A function that is executed when a series point is clicked or tapped.
*/
onPointClick;
/**
* A function that is executed after the pointer enters or leaves a series point.
*/
onPointHoverChanged;
/**
* A function that is executed when a series point is selected or selection is canceled.
*/
onPointSelectionChanged;
/**
* A function that is executed when a series is clicked or tapped.
*/
onSeriesClick;
/**
* A function that is executed after the pointer enters or leaves a series.
*/
onSeriesHoverChanged;
/**
* A function that is executed when a series is selected or selection is canceled.
*/
onSeriesSelectionChanged;
/**
* A function that is executed when a tooltip becomes hidden.
*/
onTooltipHidden;
/**
* A function that is executed when a tooltip appears.
*/
onTooltipShown;
/**
* A function that is executed when zooming or panning ends.
*/
onZoomEnd;
/**
* A function that is executed when zooming or panning begins.
*/
onZoomStart;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
adaptiveLayoutChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
adjustOnZoomChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
animationChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
annotationsChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
argumentAxisChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
autoHidePointMarkersChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
barGroupPaddingChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
barGroupWidthChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
commonAnnotationSettingsChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
commonAxisSettingsChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
commonPaneSettingsChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
commonSeriesSettingsChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
containerBackgroundColorChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
crosshairChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
customizeAnnotationChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
customizeLabelChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
customizePointChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
dataPrepareSettingsChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
dataSourceChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
defaultPaneChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
disabledChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
elementAttrChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
exportChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
legendChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
loadingIndicatorChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
marginChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
maxBubbleSizeChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
minBubbleSizeChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
negativesAsZeroesChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
paletteChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
paletteExtensionModeChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
panesChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
pathModifiedChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
pointSelectionModeChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
redrawOnResizeChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
resizePanesOnZoomChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
resolveLabelOverlappingChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
rotatedChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
rtlEnabledChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
scrollBarChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
seriesChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
seriesSelectionModeChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
seriesTemplateChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
sizeChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
stickyHoveringChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
synchronizeMultiAxesChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
themeChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
titleChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
tooltipChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
valueAxisChange;
/**
* This member supports the internal infrastructure and is not intended to be used directly from your code.
*/
zoomAndPanChange;
get annotationsChildren() {
return this._getOption('annotations');
}
set annotationsChildren(value) {
this._setChildren('annotations', value, 'DxiChartAnnotationComponent');
}
get panesChildren() {
return this._getOption('panes');
}
set panesChildren(value) {
this._setChildren('panes', value, 'DxiChartPaneComponent');
}
get seriesChildren() {
return this._getOption('series');
}
set seriesChildren(value) {
this._setChildren('series', value, 'DxiChartSeriesComponent');
}
get valueAxesChildren() {
return this._getOption('valueAxis');
}
set valueAxesChildren(value) {
this._setChildren('valueAxis', value, 'DxiChartValueAxisComponent');
}
get annotationsLegacyChildren() {
return this._getOption('annotations');
}
set annotationsLegacyChildren(value) {
this._setChildren('annotations', value, 'DxiAnnotationComponent');
}
get panesLegacyChildren() {
return this._getOption('panes');
}
set panesLegacyChildren(value) {
this._setChildren('panes', value, 'DxiPaneComponent');
}
get seriesLegacyChildren() {
return this._getOption('series');
}
set seriesLegacyChildren(value) {
this._setChildren('series', value, 'DxiSeriesComponent');
}
get valueAxisLegacyChildren() {
return this._getOption('valueAxis');
}
set valueAxisLegacyChildren(value) {
this._setChildren('valueAxis', value, 'DxiValueAxisComponent');
}
constructor(elementRef, ngZone, templateHost, _watcherHelper, _idh, optionHost, transferState, platformId) {
super(elementRef, ngZone, templateHost, _watcherHelper, transferState, platformId);
this._watcherHelper = _watcherHelper;
this._idh = _idh;
this._createEventEmitters([
{ subscribe: 'argumentAxisClick', emit: 'onArgumentAxisClick' },
{ subscribe: 'disposing', emit: 'onDisposing' },
{ subscribe: 'done', emit: 'onDone' },
{ subscribe: 'drawn', emit: 'onDrawn' },
{ subscribe: 'exported', emit: 'onExported' },
{ subscribe: 'exporting', emit: 'onExporting' },
{ subscribe: 'fileSaving', emit: 'onFileSaving' },
{ subscribe: 'incidentOccurred', emit: 'onIncidentOccurred' },
{ subscribe: 'initialized', emit: 'onInitialized' },
{ subscribe: 'legendClick', emit: 'onLegendClick' },
{ subscribe: 'optionChanged', emit: 'onOptionChanged' },
{ subscribe: 'pointClick', emit: 'onPointClick' },
{ subscribe: 'pointHoverChanged', emit: 'onPointHoverChanged' },
{ subscribe: 'pointSelectionChanged', emit: 'onPointSelectionChanged' },
{ subscribe: 'seriesClick', emit: 'onSeriesClick' },
{ subscribe: 'seriesHoverChanged', emit: 'onSeriesHoverChanged' },
{ subscribe: 'seriesSelectionChanged', emit: 'onSeriesSelectionChanged' },
{ subscribe: 'tooltipHidden', emit: 'onTooltipHidden' },
{ subscribe: 'tooltipShown', emit: 'onTooltipShown' },
{ subscribe: 'zoomEnd', emit: 'onZoomEnd' },
{ subscribe: 'zoomStart', emit: 'onZoomStart' },
{ emit: 'adaptiveLayoutChange' },
{ emit: 'adjustOnZoomChange' },
{ emit: 'animationChange' },
{ emit: 'annotationsChange' },
{ emit: 'argumentAxisChange' },
{ emit: 'autoHidePointMarkersChange' },
{ emit: 'barGroupPaddingChange' },
{ emit: 'barGroupWidthChange' },
{ emit: 'commonAnnotationSettingsChange' },
{ emit: 'commonAxisSettingsChange' },
{ emit: 'commonPaneSettingsChange' },
{ emit: 'commonSeriesSettingsChange' },
{ emit: 'containerBackgroundColorChange' },
{ emit: 'crosshairChange' },
{ emit: 'customizeAnnotationChange' },
{ emit: 'customizeLabelChange' },
{ emit: 'customizePointChange' },
{ emit: 'dataPrepareSettingsChange' },
{ emit: 'dataSourceChange' },
{ emit: 'defaultPaneChange' },
{ emit: 'disabledChange' },
{ emit: 'elementAttrChange' },
{ emit: 'exportChange' },
{ emit: 'legendChange' },
{ emit: 'loadingIndicatorChange' },
{ emit: 'marginChange' },
{ emit: 'maxBubbleSizeChange' },
{ emit: 'minBubbleSizeChange' },
{ emit: 'negativesAsZeroesChange' },
{ emit: 'paletteChange' },
{ emit: 'paletteExtensionModeChange' },
{ emit: 'panesChange' },
{ emit: 'pathModifiedChange' },
{ emit: 'pointSelectionModeChange' },
{ emit: 'redrawOnResizeChange' },
{ emit: 'resizePanesOnZoomChange' },
{ emit: 'resolveLabelOverlappingChange' },
{ emit: 'rotatedChange' },
{ emit: 'rtlEnabledChange' },
{ emit: 'scrollBarChange' },
{ emit: 'seriesChange' },
{ emit: 'seriesSelectionModeChange' },
{ emit: 'seriesTemplateChange' },
{ emit: 'sizeChange' },
{ emit: 'stickyHoveringChange' },
{ emit: 'synchronizeMultiAxesChange' },
{ emit: 'themeChange' },
{ emit: 'titleChange' },
{ emit: 'tooltipChange' },
{ emit: 'valueAxisChange' },
{ emit: 'zoomAndPanChange' }
]);
this._idh.setHost(this);
optionHost.setHost(this);
}
_createInstance(element, options) {
return new DxChart(element, options);
}
ngOnDestroy() {
this._destroyWidget();
}
ngOnChanges(changes) {
super.ngOnChanges(changes);
this.setupChanges('annotations', changes);
this.setupChanges('dataSource', changes);
this.setupChanges('palette', changes);
this.setupChanges('panes', changes);
this.setupChanges('series', changes);
this.setupChanges('valueAxis', changes);
}
setupChanges(prop, changes) {
if (!(prop in this._optionsToUpdate)) {
this._idh.setup(prop, changes);
}
}
ngDoCheck() {
this._idh.doCheck('annotations');
this._idh.doCheck('dataSource');
this._idh.doCheck('palette');
this._idh.doCheck('panes');
this._idh.doCheck('series');
this._idh.doCheck('valueAxis');
this._watcherHelper.checkWatchers();
super.ngDoCheck();
super.clearChangedOptions();
}
_setOption(name, value) {
let isSetup = this._idh.setupSingle(name, value);
let isChanged = this._idh.getChanges(name, value) !== null;
if (isSetup || isChanged) {
super._setOption(name, value);
}
}
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DxChartComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.DxTemplateHost }, { token: i1.WatcherHelper }, { token: i1.IterableDifferHelper }, { token: i1.NestedOptionHost }, { token: i0.TransferState }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DxChartComponent, selector: "dx-chart", inputs: { adaptiveLayout: "adaptiveLayout", adjustOnZoom: "adjustOnZoom", animation: "animation", annotations: "annotations", argumentAxis: "argumentAxis", autoHidePointMarkers: "autoHidePointMarkers", barGroupPadding: "barGroupPadding", barGroupWidth: "barGroupWidth", commonAnnotationSettings: "commonAnnotationSettings", commonAxisSettings: "commonAxisSettings", commonPaneSettings: "commonPaneSettings", commonSeriesSettings: "commonSeriesSettings", containerBackgroundColor: "containerBackgroundColor", crosshair: "crosshair", customizeAnnotation: "customizeAnnotation", customizeLabel: "customizeLabel", customizePoint: "customizePoint", dataPrepareSettings: "dataPrepareSettings", dataSource: "dataSource", defaultPane: "defaultPane", disabled: "disabled", elementAttr: "elementAttr", export: "export", legend: "legend", loadingIndicator: "loadingIndicator", margin: "margin", maxBubbleSize: "maxBubbleSize", minBubbleSize: "minBubbleSize", negativesAsZeroes: "negativesAsZeroes", palette: "palette", paletteExtensionMode: "paletteExtensionMode", panes: "panes", pathModified: "pathModified", pointSelectionMode: "pointSelectionMode", redrawOnResize: "redrawOnResize", resizePanesOnZoom: "resizePanesOnZoom", resolveLabelOverlapping: "resolveLabelOverlapping", rotated: "rotated", rtlEnabled: "rtlEnabled", scrollBar: "scrollBar", series: "series", seriesSelectionMode: "seriesSelectionMode", seriesTemplate: "seriesTemplate", size: "size", stickyHovering: "stickyHovering", synchronizeMultiAxes: "synchronizeMultiAxes", theme: "theme", title: "title", tooltip: "tooltip", valueAxis: "valueAxis", zoomAndPan: "zoomAndPan" }, outputs: { onArgumentAxisClick: "onArgumentAxisClick", onDisposing: "onDisposing", onDone: "onDone", onDrawn: "onDrawn", onExported: "onExported", onExporting: "onExporting", onFileSaving: "onFileSaving", onIncidentOccurred: "onIncidentOccurred", onInitialized: "onInitialized", onLegendClick: "onLegendClick", onOptionChanged: "onOptionChanged", onPointClick: "onPointClick", onPointHoverChanged: "onPointHoverChanged", onPointSelectionChanged: "onPointSelectionChanged", onSeriesClick: "onSeriesClick", onSeriesHoverChanged: "onSeriesHoverChanged", onSeriesSelectionChanged: "onSeriesSelectionChanged", onTooltipHidden: "onTooltipHidden", onTooltipShown: "onTooltipShown", onZoomEnd: "onZoomEnd", onZoomStart: "onZoomStart", adaptiveLayoutChange: "adaptiveLayoutChange", adjustOnZoomChange: "adjustOnZoomChange", animationChange: "animationChange", annotationsChange: "annotationsChange", argumentAxisChange: "argumentAxisChange", autoHidePointMarkersChange: "autoHidePointMarkersChange", barGroupPaddingChange: "barGroupPaddingChange", barGroupWidthChange: "barGroupWidthChange", commonAnnotationSettingsChange: "commonAnnotationSettingsChange", commonAxisSettingsChange: "commonAxisSettingsChange", commonPaneSettingsChange: "commonPaneSettingsChange", commonSeriesSettingsChange: "commonSeriesSettingsChange", containerBackgroundColorChange: "containerBackgroundColorChange", crosshairChange: "crosshairChange", customizeAnnotationChange: "customizeAnnotationChange", customizeLabelChange: "customizeLabelChange", customizePointChange: "customizePointChange", dataPrepareSettingsChange: "dataPrepareSettingsChange"