/*! * devextreme-angular * Version: 25.2.6 * Build date: Mon Mar 30 2026 * * Copyright (c) 2012 - 2026 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 */ import { TransferState, ElementRef, NgZone, OnDestroy, EventEmitter, OnChanges, DoCheck, SimpleChanges } from '@angular/core'; import { AnimationEaseMode, Font, DashStyle, Palette, PaletteExtensionMode, ShiftLabelOverlap, Theme, TextOverflow, WordWrap } from 'devextreme/common/charts'; import { ExportFormat, HorizontalAlignment, Position, Orientation, VerticalEdge } from 'devextreme/common'; import { Format } from 'devextreme/common/core/localization'; import { BarGaugeBarInfo, BarGaugeLegendItem, DisposingEvent, DrawnEvent, ExportedEvent, ExportingEvent, FileSavingEvent, IncidentOccurredEvent, InitializedEvent, OptionChangedEvent, TooltipHiddenEvent, TooltipShownEvent } from 'devextreme/viz/bar_gauge'; import DxBarGauge from 'devextreme/viz/bar_gauge'; import { DxComponent, DxTemplateHost, NestedOptionHost, IterableDifferHelper, WatcherHelper } from 'devextreme-angular/core'; import type * as DxBarGaugeTypes from "devextreme/viz/bar_gauge_types"; import * as i0 from "@angular/core"; import * as i1 from "devextreme-angular/ui/nested"; import * as i2 from "devextreme-angular/ui/bar-gauge/nested"; import * as i3 from "devextreme-angular/core"; /** * The BarGauge UI component contains several circular bars that each indicates a single value. */ export declare class DxBarGaugeComponent extends DxComponent implements OnDestroy, OnChanges, DoCheck { private _watcherHelper; private _idh; instance: DxBarGauge; /** * Specifies animation properties. */ get animation(): any | { duration?: number; easing?: AnimationEaseMode; enabled?: boolean; }; set animation(value: any | { duration?: number; easing?: AnimationEaseMode; enabled?: boolean; }); /** * Specifies a color for the remaining segment of the bar's track. */ get backgroundColor(): string; set backgroundColor(value: string); /** * Specifies a distance between bars in pixels. */ get barSpacing(): number; set barSpacing(value: number); /** * Specifies a base value for bars. */ get baseValue(): number; set baseValue(value: number); /** * Specifies a custom template for content in the component's center. */ get centerTemplate(): any; set centerTemplate(value: any); /** * Specifies whether the UI component responds to user interaction. */ get disabled(): boolean; set disabled(value: boolean); /** * Specifies the global attributes to be attached to the UI component's container element. */ get elementAttr(): Record; set elementAttr(value: Record); /** * Specifies an end value for the gauge's invisible scale. */ get endValue(): number; set endValue(value: number); /** * Configures the exporting and printing features. */ get export(): { backgroundColor?: string; enabled?: boolean; fileName?: string; formats?: Array; margin?: number; printingEnabled?: boolean; svgToCanvas?: ((svg: any, canvas: any) => any) | undefined; }; set export(value: { backgroundColor?: string; enabled?: boolean; fileName?: string; formats?: Array; margin?: number; printingEnabled?: boolean; svgToCanvas?: ((svg: any, canvas: any) => any) | undefined; }); /** * Defines the shape of the gauge's arc. */ get geometry(): { endAngle?: number; startAngle?: number; }; set geometry(value: { endAngle?: number; startAngle?: number; }); /** * Specifies the properties of the labels that accompany gauge bars. */ get label(): { connectorColor?: string | undefined; connectorWidth?: number; customizeText?: ((barValue: { value: number; valueText: string; }) => string); font?: Font; format?: Format | undefined; indent?: number; visible?: boolean; }; set label(value: { connectorColor?: string | undefined; connectorWidth?: number; customizeText?: ((barValue: { value: number; valueText: string; }) => string); font?: Font; format?: Format | undefined; indent?: number; visible?: boolean; }); /** * Configures the legend. */ get legend(): { backgroundColor?: string | undefined; border?: { color?: string; cornerRadius?: number; dashStyle?: DashStyle; opacity?: number | undefined; visible?: boolean; width?: number; }; columnCount?: number; columnItemSpacing?: number; customizeHint?: ((arg: { item: BarGaugeBarInfo; text: string; }) => string); customizeItems?: ((items: Array) => Array); customizeText?: ((arg: { item: BarGaugeBarInfo; text: string; }) => string); font?: Font; horizontalAlignment?: HorizontalAlignment; itemsAlignment?: HorizontalAlignment | undefined; itemTextFormat?: Format | 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; }; 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?: ((arg: { item: BarGaugeBarInfo; text: string; }) => string); customizeItems?: ((items: Array) => Array); customizeText?: ((arg: { item: BarGaugeBarInfo; text: string; }) => string); font?: Font; horizontalAlignment?: HorizontalAlignment; itemsAlignment?: HorizontalAlignment | undefined; itemTextFormat?: Format | 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; }); /** * Configures the loading indicator. */ get loadingIndicator(): { backgroundColor?: string; font?: Font; show?: boolean; text?: string; }; set loadingIndicator(value: { backgroundColor?: string; font?: Font; show?: boolean; text?: string; }); /** * Generates space around the UI component. */ get margin(): { bottom?: number; left?: number; right?: number; top?: number; }; set margin(value: { bottom?: number; left?: number; right?: number; top?: number; }); /** * Sets the palette to be used for colorizing bars in the gauge. */ get palette(): Array | Palette; set palette(value: Array | Palette); /** * Specifies what to do with colors in the palette when their number is less than the number of bars in the gauge. */ get paletteExtensionMode(): PaletteExtensionMode; set paletteExtensionMode(value: PaletteExtensionMode); /** * Notifies the UI component that it is embedded into an HTML page that uses a tag modifying the path. */ get pathModified(): boolean; set pathModified(value: boolean); /** * Specifies whether to redraw the UI component when the size of the container changes or a mobile device rotates. */ get redrawOnResize(): boolean; set redrawOnResize(value: boolean); /** * Defines the radius of the bar that is closest to the center relatively to the radius of the topmost bar. */ get relativeInnerRadius(): number; set relativeInnerRadius(value: number); /** * Specifies how the UI component should behave when bar labels overlap. */ get resolveLabelOverlapping(): ShiftLabelOverlap; set resolveLabelOverlapping(value: ShiftLabelOverlap); /** * Switches the UI component to a right-to-left representation. */ get rtlEnabled(): boolean; set rtlEnabled(value: boolean); /** * Specifies the UI component's size in pixels. */ get size(): { height?: number | undefined; width?: number | undefined; }; set size(value: { height?: number | undefined; width?: number | undefined; }); /** * Specifies a start value for the gauge's invisible scale. */ get startValue(): number; set startValue(value: number); /** * Sets the name of the theme the UI component uses. */ get theme(): Theme; set theme(value: Theme); /** * Configures the UI component's title. */ 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; }; 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; }); /** * Configures tooltips. */ get tooltip(): { 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?: ((scaleValue: { index: number; value: number; valueText: string; }) => Record) | 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; }; zIndex?: number | undefined; }; set tooltip(value: { 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?: ((scaleValue: { index: number; value: number; valueText: string; }) => Record) | 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; }; zIndex?: number | undefined; }); /** * Specifies the array of values to be indicated on a bar gauge. */ get values(): Array; set values(value: Array); /** * A function that is executed before the UI component is disposed of. */ onDisposing: EventEmitter; /** * A function that is executed when the UI component's rendering has finished. */ onDrawn: EventEmitter; /** * A function that is executed after the UI component is exported. */ onExported: EventEmitter; /** * A function that is executed before the UI component is exported. */ onExporting: EventEmitter; /** * A function that is executed before a file with exported UI component is saved to the user's local storage. */ onFileSaving: EventEmitter; /** * A function that is executed when an error or warning occurs. */ onIncidentOccurred: EventEmitter; /** * A function used in JavaScript frameworks to save the UI component instance. */ onInitialized: EventEmitter; /** * A function that is executed after a UI component property is changed. */ onOptionChanged: EventEmitter; /** * A function that is executed when a tooltip becomes hidden. */ onTooltipHidden: EventEmitter; /** * A function that is executed when a tooltip appears. */ onTooltipShown: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ animationChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ backgroundColorChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ barSpacingChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ baseValueChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ centerTemplateChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ disabledChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ elementAttrChange: EventEmitter>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ endValueChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ exportChange: EventEmitter<{ backgroundColor?: string; enabled?: boolean; fileName?: string; formats?: Array; margin?: number; printingEnabled?: boolean; svgToCanvas?: ((svg: any, canvas: any) => any) | undefined; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ geometryChange: EventEmitter<{ endAngle?: number; startAngle?: number; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ labelChange: EventEmitter<{ connectorColor?: string | undefined; connectorWidth?: number; customizeText?: ((barValue: { value: number; valueText: string; }) => string); font?: Font; format?: Format | undefined; indent?: number; visible?: boolean; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ legendChange: EventEmitter<{ backgroundColor?: string | undefined; border?: { color?: string; cornerRadius?: number; dashStyle?: DashStyle; opacity?: number | undefined; visible?: boolean; width?: number; }; columnCount?: number; columnItemSpacing?: number; customizeHint?: ((arg: { item: BarGaugeBarInfo; text: string; }) => string); customizeItems?: ((items: Array) => Array); customizeText?: ((arg: { item: BarGaugeBarInfo; text: string; }) => string); font?: Font; horizontalAlignment?: HorizontalAlignment; itemsAlignment?: HorizontalAlignment | undefined; itemTextFormat?: Format | 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; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ loadingIndicatorChange: EventEmitter<{ backgroundColor?: string; font?: Font; show?: boolean; text?: string; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ marginChange: EventEmitter<{ bottom?: number; left?: number; right?: number; top?: number; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ paletteChange: EventEmitter | Palette>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ paletteExtensionModeChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ pathModifiedChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ redrawOnResizeChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ relativeInnerRadiusChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ resolveLabelOverlappingChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ rtlEnabledChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ sizeChange: EventEmitter<{ height?: number | undefined; width?: number | undefined; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ startValueChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ themeChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ titleChange: EventEmitter; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ tooltipChange: EventEmitter<{ 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?: ((scaleValue: { index: number; value: number; valueText: string; }) => Record) | 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; }; zIndex?: number | undefined; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ valuesChange: EventEmitter>; constructor(elementRef: ElementRef, ngZone: NgZone, templateHost: DxTemplateHost, _watcherHelper: WatcherHelper, _idh: IterableDifferHelper, optionHost: NestedOptionHost, transferState: TransferState, platformId: any); protected _createInstance(element: any, options: any): DxBarGauge; ngOnDestroy(): void; ngOnChanges(changes: SimpleChanges): void; setupChanges(prop: string, changes: SimpleChanges): void; ngDoCheck(): void; _setOption(name: string, value: any): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } export declare class DxBarGaugeModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } export * from 'devextreme-angular/ui/bar-gauge/nested'; export { DxBarGaugeTypes };