SiChartGaugeComponent documentation¶
selector
si-chart-gaugeInput 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 | Enable custom legend click actions exposed by the selectionChanged event. | |
| dataZoomFilterMode ¶ | FilterMode | 'none' | The data zoom filter mode. (see https://echarts.apache.org/en/option.html#dataZoom-inside.filterMode ) The value 'filter' will cause the lines to be disconnected to the outside of the chart. |
| dataZoomMaxValueSpan ¶ | number | The upper limit of the data zoom slider (see https://echarts.apache.org/en/option.html#dataZoom-slider.maxValueSpan ). | |
| dataZoomMinValueSpan ¶ | number | The lower limit of the data zoom slider (see https://echarts.apache.org/en/option.html#dataZoom-slider.minValueSpan ). | |
| dataZoomRange ¶ | DataZoomRange | Apply a specific zoom range (see https://echarts.apache.org/en/option.html#dataZoom-inside ). | |
| eChartContainerHeight ¶ | (null | string) | The height of the ECharts container as decimal. | |
| 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 | Maximum number of series data points shown in the chart. |
| 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: '' } | Specify selected legend item. |
| showCustomLegend ¶ | boolean | false | Enable to show a custom legend. The custom legend offers additional features such as, scroll bar to avoid legend and chart overlapping, Left and right alignment of legends based on y-axis, etc and many more. |
| showLegend ¶ | boolean | true | Show Echarts legend |
| splitSteps ¶ | number | ||
| subTitle ¶ | string | The subtitle of the chart. | |
| theme ¶ | any | The desired theme to load. | |
| themeCustomization ¶ | any | Used to override specific options of loaded theme . | |
| title ¶ | string | The title of the chart. | |
| 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. Whether zooming inside the chart is possible with mouse. |
| 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 | Event emitted when a chart series is clicked. |
| customLegendMultiLineInfoEvent ¶ | CustomLegendMultiLineInfo[] | Event emitted when custom legend multi-line info changes. |
| dataZoom ¶ | DataZoomEvent | Event emitted when data zoom changes. |
| pointer ¶ | AxisPointerEvent | Event emitted when axis pointer moves. |
| selectionChanged ¶ | any | Event emitted when selection changes e.g. clicking on a legend item. |
| showLegendChange ¶ | boolean | Show Echarts legend |
| timeRangeChange ¶ | number | Emitted when data zoom 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
| |
| 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
| |
| 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
| |
| 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
| |
| setValue(...) ¶ | (value: number) => void | Update gauge chart value. Parameters
| |
| startProgressIndication() ¶ | () => void | Show loading indicator. | |
| stopProgressIndication() ¶ | () => void | Hide loading indicator. | |
| toggleSeriesVisibility(...) ¶ | (name: string, visible: boolean) => void | Toggle visibility of a series. Parameters |
Types Documentation¶
| |||||
|
|
|
|
|
|
|
|
|
| ||||||
|
import imported from echarts |
|---|
import imported from echarts |
|---|
import imported from echarts |
|---|
import imported from echarts |
|---|
import imported from echarts |
|---|
import imported from echarts |
|---|
import imported from echarts |
|---|
import imported from echarts |
|---|
import imported from echarts |
|---|
import imported from echarts |
|---|
| imported from echarts |
|---|
| imported from echarts |
|---|
import imported from echarts |
|---|
import imported from echarts |
|---|
import imported from echarts |
|---|
import imported from echarts |
|---|
import imported from echarts |
|---|
import imported from echarts |
|---|
import imported from echarts |
|---|
import imported from echarts |
|---|
import imported from echarts |
|---|
import imported from echarts |
|---|
import imported from echarts |
|---|
import imported from echarts |
|---|
import imported from echarts |
|---|
import imported from echarts |
|---|
import imported from echarts |
|---|
Except where otherwise noted, content on this site is licensed under MIT License.