SiChartGaugeComponent documentation¶

selector

si-chart-gauge

Input Properties¶

Name	Type	Default	Description
additionalOptions ¶	`EChartOption`		Used to override specific properties set in `options` .
autoZoomSeriesIndex ¶	`number`	`-1`	No auto dataZoom update) by default. Use together with `visibleEntries` .
axisNumberOfDecimals ¶	`number`	`0`	Number of decimals on the axis.
axisPointer ¶	(`undefined` \| `string` \| `boolean`)	`false`	Used to display `axisPointer` line either by click or mouse-move.
colors ¶	`string`[]		Colors for the defined segments. If there are less colors then segments, the colors will be repeated. Defaults to the standard color palette
customLegendAction ¶	`boolean`
dataZoomFilterMode ¶	`FilterMode`	`'none'`
dataZoomMaxValueSpan ¶	`number`
dataZoomMinValueSpan ¶	`number`
dataZoomRange ¶	`DataZoomRange`
eChartContainerHeight ¶	(`null` \| `string`)
externalXAxisFormatter ¶	(value: `any`, visibleRange: `number`) => `string`		External XAxis Formatter from consumer
externalZoomSlider ¶	`boolean`	`false`	Flag to use external zoom slider
hideAxisLabels ¶	`boolean`	`false`
labelFormatter ¶	(val: `number`) => `string`		Custom formatter for axis labels. Takes precedence when specified, i.e. number of decimals, unit etc needs to be set by the user using this formatter.
maxEntries ¶	`number`	`1000`
maxNumberOfDecimals ¶	`number`	`0`	Max number of decimals.
maxValue ¶	`number`	`100`
minNumberOfDecimals ¶	`number`	`0`	Min number of decimals.
minValue ¶	`number`	`0`
options ¶	`EChartOption`		See [ECharts 5.x Documentation] https://echarts.apache.org/en/option.html for all available options.
palette ¶	`string`	`undefined`	The name of the color palette (if any) of the loaded `theme` .
renderer ¶	(`"canvas"` \| `"svg"`)	`'canvas'`	the renderer to use: canvas or svg
responsiveSplitSteps ¶	`boolean`	`true`
segments ¶	`number`[]	`[0.2, 0.8, 1]`	Segments on the arc from 0 (implicit) to 1 (explicit) E.g. 0.2 means from 0 to 0.2 of the possible range (maxValue - minValue)
selectedItem ¶	`SelectedLegendItem`	`{ legendItemName: '' }`
showCustomLegend ¶	`boolean`	`false`
showLegend ¶	`boolean`	`true`
splitSteps ¶	`number`
subTitle ¶	`string`
theme ¶	`any`		The desired theme to load.
themeCustomization ¶	`any`		Used to override specific options of loaded `theme` .
title ¶	`string`
unit ¶	`string`	`'%'`
unitsOnSplit ¶	`boolean`	`false`
value ¶	`number`	`0`
valueFormatter ¶	(val: `number`) => `string`		Custom formatter for value. Takes precedence when specified, i.e. number of decimals needs to be set by the user using this formatter.
visibleEntries ¶	`number`	`-1`	No auto dataZoom update) by default. Use together with `autoZoomSeriesIndex` .
visibleRange ¶	`number`	`-1`	No auto dataZoom update) by default. Use together with `autoZoomSeriesIndex` .
zoomInside ¶	`boolean`	`false`	Enables zooming inside the chart with the mouse wheel/touch.
zoomSlider ¶	`boolean`	`false`	Enables the zoom slider below the chart.
zoomSliderBrush ¶	`boolean`	`true`	enable brush mode for zoom slider
zoomSliderRealtime ¶	`boolean`	`true`	realtime update mode for zoom slider
zoomSliderShadow ¶	`boolean`	`true`	Shows data shadow in dataZoom slider, use together with `zoomSlider` .
numberOfDecimals ¶	`number`	`undefined`	Sets the number of decimals. Deprecated: Use `minNumberOfDecimals` and `maxNumberOfDecimals` instead.
showTimeRangeBar ¶	`boolean`	`false`	If true, add consumer-provided time range bar. Use together with `zoomSlider` . Deprecated: The input will be removed in future versions as the time range bar slot is deprecated.

Output Properties¶

Name	Type	Description
chartGridResized ¶	`GridRectCoordinate`	Event emitted when chart grid is resized.
chartSeriesClick ¶	`LegendItem`
customLegendMultiLineInfoEvent ¶	`CustomLegendMultiLineInfo`[]
dataZoom ¶	`DataZoomEvent`	Event emitted when data zoom changes.
pointer ¶	`AxisPointerEvent`	Event emitted when axis pointer moves.
selectionChanged ¶	`any`
showLegendChange ¶	`boolean`
timeRangeChange ¶	`number`	Emitted when datazoom changes, indicating the time range in milliseconds, 0 for full range
visibleEntriesChange ¶	`number`	No auto dataZoom update) by default. Use together with `autoZoomSeriesIndex` .
visibleRangeChange ¶	`number`	No auto dataZoom update) by default. Use together with `autoZoomSeriesIndex` .

Attributes and Methods¶

Name	Type	Default	Description
(readonly) chartContainerWrapper ¶	`Signal`<`ElementRef`<`any`>>	`viewChild.required<ElementRef>('chartContainerWrapper')`	reference to the wrapper container. Used for setting scroll position, etc.
dispatchEChartAction(...) ¶	(action: `Payload`) => `void`		Send action to echart. See https://echarts.apache.org/en/api.html#action Parameters action: `Payload`
getOptionNoClone() ¶	() => `any`		returns the current EChart options, w/o cloning anything. Be very careful not to change anything in the data structure in it.
getSeriesColorBySeriesName(...) ¶	(seriesName: `string`) => (`undefined` \| `string`)		Get color by series name. Parameters seriesName: `string`
getVisibleRange() ¶	() => (`undefined` \| `DataZoomEvent`)		Get current data zoom range.
refreshSeries(...) ¶	(isLive: `boolean` = `true`, dzToSet: `DataZoomRange`) => `void`		Re-render the chart series data. This method should be called on series data changes. Parameters isLive: `boolean` = `true` dzToSet: `DataZoomRange`
resetChart() ¶	() => `void`		Re-render the whole chart.
resize() ¶	() => `void`		Allow consuming applications to re-draw chart on window resizes.
setTimeRange(...) ¶	(range: `number`) => `void`		Set the data zoom range for the chart in milliseconds. As an example one hour is the value 3600000. Parameters range: `number`
setValue(...) ¶	(value: `number`) => `void`		Update gauge chart value. Parameters value: `number`
startProgressIndication() ¶	() => `void`		Show loading indicator.
stopProgressIndication() ¶	() => `void`		Hide loading indicator.
toggleSeriesVisibility(...) ¶	(name: `string`, visible: `boolean`) => `void`		Toggle visibility of a series. Parameters name: `string` visible: `boolean`

Types Documentation¶

EChartOption

¶

Interface

Index signature: [ key: string ]: any¶

Properties
dataZoom?: `DataZoomComponentOption`[]¶
grid?: (`GridComponentOption` \| `GridComponentOption`[])¶
legend?: `LegendComponentOption`[]¶
series?: `EChartSeries`¶

FilterMode (`"none"` \| `"filter"` \| `"weakFilter"` \| `"empty"`)¶ Type alias

DataZoomRange

¶

Interface

Properties
end?: `any`¶
endValue?: `any`¶
start?: `any`¶
startValue?: `any`¶
visibleWidth?: `any`¶

SelectedLegendItem

¶

Interface

Properties
legendItemName: `string`¶

GridRectCoordinate

¶

Interface

Properties
containerHeight: `number`¶
containerWidth: `number`¶
height: `number`¶
width: `number`¶
x: `number`¶
y: `number`¶

LegendItem

¶

Interface

Properties
color?: `string`¶
dataIndex: `number`¶
itemName: `string`¶
selected?: `boolean`¶

CustomLegendMultiLineInfo

¶

Interface

Properties
customLegendId: `number`¶
isCustomLegendMultilined: `boolean`¶

DataZoomEvent

¶

Interface

Properties
autoZoomUpdate?: `boolean`¶
rangeEnd: `any`¶
rangeStart: `any`¶
rangeType: `AxisType`¶
requested?: `DataZoomRange`¶
source?: `string`¶
width?: `number`¶

AxisPointerEvent

¶

Interface

Properties
dataIndex?: `number`¶
seriesIndex?: `number`¶

DataZoomComponentOption (`SliderDataZoomOption` \| `InsideDataZoomOption`)¶ Type alias

GridComponentOption

extends ComponentOption, BoxLayoutOptionMixin, ShadowOptionMixin¶

Interface

Properties
backgroundColor?: `ZRColor`¶
borderColor?: `ZRColor`¶
borderWidth?: `number`¶
bottom?: (`string` \| `number`) from `BoxLayoutOptionMixin.bottom`¶
containLabel?: `boolean`¶
height?: (`string` \| `number`) from `BoxLayoutOptionMixin.height`¶
id?: `OptionId` from `ComponentOption.id`¶
left?: (`string` \| `number`) from `BoxLayoutOptionMixin.left`¶
mainType?: `"grid"`¶
name?: `OptionName` from `ComponentOption.name`¶
right?: (`string` \| `number`) from `BoxLayoutOptionMixin.right`¶
shadowBlur?: `number` from `ShadowOptionMixin.shadowBlur`¶
shadowColor?: `string` from `ShadowOptionMixin.shadowColor`¶
shadowOffsetX?: `number` from `ShadowOptionMixin.shadowOffsetX`¶
shadowOffsetY?: `number` from `ShadowOptionMixin.shadowOffsetY`¶
show?: `boolean`¶
tooltip?: `any`¶
top?: (`string` \| `number`) from `BoxLayoutOptionMixin.top`¶
type?: `string` from `ComponentOption.type`¶
width?: (`string` \| `number`) from `BoxLayoutOptionMixin.width`¶
z?: `number` from `ComponentOption.z`¶
zlevel?: `number` from `ComponentOption.zlevel`¶

LegendComponentOption (`LegendOption` \| `ScrollableLegendOption`)¶ Type alias

EChartSeries `EChartSeriesOption`[]¶ Type alias

AxisType (`"value"` \| `"category"` \| `"time"` \| `"log"`)¶ Type alias Copyright (c) Siemens 2016 - 2025 SPDX-License-Identifier: MIT

Payload

extends PayloadItem¶

Interface

Index signature: [ other: string ]: any¶

Properties
animation?: `PayloadAnimationPart` from `PayloadItem.animation`¶
batch?: `PayloadItem`[]¶
escapeConnect?: `boolean`¶
excludeSeriesId?: (`OptionId` \| `OptionId`[]) from `PayloadItem.excludeSeriesId`¶
type: `string`¶

SliderDataZoomOption ¶ import imported from echarts

InsideDataZoomOption ¶ import imported from echarts

ComponentOption ¶ import imported from echarts

BoxLayoutOptionMixin ¶ import imported from echarts

ShadowOptionMixin ¶ import imported from echarts

LegendOption ¶ import imported from echarts

ScrollableLegendOption ¶ import imported from echarts

EChartSeriesOption (`BarSeriesOption` \| `CandlestickSeriesOption` \| `CustomSeriesOption` \| `GaugeSeriesOption` \| `HeatmapSeriesOption` \| `LineSeriesOption` \| `PieSeriesOption` \| `ScatterSeriesOption` \| `SankeySeriesOption` \| `SunburstSeriesOption` \| `never`)¶ Type alias

PayloadItem ¶ import imported from echarts

ZRColor ¶ import imported from echarts

OptionId ¶ import imported from echarts

OptionName ¶ import imported from echarts

BarSeriesOption (`BarSeriesOption` & `SeriesInjectedOption`)¶ Type alias

CandlestickSeriesOption (`CandlestickSeriesOption` & `SeriesInjectedOption`)¶ Type alias

CustomSeriesOption (`CustomSeriesOption` & `SeriesInjectedOption`)¶ Type alias

GaugeSeriesOption (`GaugeSeriesOption` & `SeriesInjectedOption`)¶ Type alias

HeatmapSeriesOption (`HeatmapSeriesOption` & `SeriesInjectedOption`)¶ Type alias

LineSeriesOption (`LineSeriesOption` & `SeriesInjectedOption`)¶ Type alias

PieSeriesOption (`PieSeriesOption` & `SeriesInjectedOption`)¶ Type alias

ScatterSeriesOption (`ScatterSeriesOption` & `SeriesInjectedOption`)¶ Type alias

SankeySeriesOption (`SankeySeriesOption` & `SeriesInjectedOption`)¶ Type alias

SunburstSeriesOption (`SunburstSeriesOption` & `SeriesInjectedOption`)¶ Type alias

PayloadAnimationPart ¶ import imported from echarts

BarSeriesOption ¶ import imported from echarts

SeriesInjectedOption ¶ import imported from echarts

CandlestickSeriesOption ¶ import imported from echarts

CustomSeriesOption ¶ import imported from echarts

GaugeSeriesOption ¶ import imported from echarts

HeatmapSeriesOption ¶ import imported from echarts

LineSeriesOption ¶ import imported from echarts

PieSeriesOption ¶ import imported from echarts

ScatterSeriesOption ¶ import imported from echarts

SankeySeriesOption ¶ import imported from echarts

SunburstSeriesOption ¶ import imported from echarts

Except where otherwise noted, content on this site is licensed under MIT License.