Generic chart¶

A generic chart with full support for ECharts options.

Code¶

Usage¶

Required Packages

• echarts

import { SiChartComponent } from '@siemens/charts-ng';

@Component({
  imports: [SiChartComponent, ...]
})

SiChartComponent API Documentation¶

selector

si-chart

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 .
axisPointer ¶	(undefined | string | boolean)	false	Used to display axisPointer line either by click or mouse-move.
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
maxEntries ¶	number	1000	Maximum number of series data points shown in the chart.
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
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
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.
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 .
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
startProgressIndication() ¶	() => void		Show loading indicator.
stopProgressIndication() ¶	() => void		Hide loading indicator.

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?: PositionSizeOption from BoxLayoutOptionMixin.bottom¶ Deprecated: Use grid.outerBounds instead. Whether grid size contains axis labels. This approach estimates the size by sample labels. It works for most case but it does not strictly contain all labels in some cases. containLabel?: boolean¶ coord?: CoordinateSystemDataCoord from ComponentOption.coord¶ coordinateSystem?: string from ComponentOption.coordinateSystem¶ coordinateSystemUsage?: CoordinateSystemUsageOption from ComponentOption.coordinateSystemUsage¶ height?: PositionSizeOption from BoxLayoutOptionMixin.height¶ id?: OptionId from ComponentOption.id¶ left?: PositionSizeOption from BoxLayoutOptionMixin.left¶ mainType?: "grid"¶ name?: OptionName from ComponentOption.name¶ {left, right, top, bottom, width, height}: Define a outerBounds rect, based on: - the canvas by default. - or the dataToLayout result if a boxCoordinateSystem is specified. outerBounds?: BoxLayoutOptionMixin¶ outerBoundsClampHeight?: (string | number)¶ Available only when outerBoundsMode is not 'none'. Offer a constraint to not to shrink the grid rect causing smaller that width/height. A string means percent, like '30%', based on the original rect size determined by grid.top/right/bottom/left/width/height . outerBoundsClampWidth?: (string | number)¶ - 'all': Default. Contains the cartesian rect and axis labels and axis name. - 'axisLabel': Contains the cartesian rect and axis labels. This effect differs slightly from the previous option containLabel but more precise. - 'auto'/null/undefined: Default. be 'axisLabel' if containLabel:true , otherwise 'all'. outerBoundsContain?: ("all" | "auto" | "axisLabel" | NullUndefined$1)¶ Define a constrains rect. Axis lines is firstly laid out based on the rect defined by grid.left/right/top/bottom/width/height . (for axis line alignment requirements between multiple grids) But if axisLabel and/or axisName overflow the outerBounds, shrink the layout to avoid that overflow. Options: - 'none': outerBounds is infinity. - 'same': outerBounds is the same as the layout rect defined by grid.left/right/top/bottom/width/height . - 'auto'/null/undefined: Default. Use outerBounds , or 'same' if containLabel:true . Note: grid.containLabel is equivalent to {outerBoundsMode: 'same', outerBoundsContain: 'axisLabel'} . outerBoundsMode?: ("auto" | "none" | "same" | NullUndefined$1)¶ right?: PositionSizeOption 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?: PositionSizeOption from BoxLayoutOptionMixin.top¶ type?: string from ComponentOption.type¶ width?: PositionSizeOption 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

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

ZRColor ¶ import imported from echarts

PositionSizeOption ¶ import imported from echarts

CoordinateSystemDataCoord ¶ import imported from echarts

CoordinateSystemUsageOption ¶ import imported from echarts

OptionId ¶ import imported from echarts

OptionName ¶ import imported from echarts

NullUndefined$1 ¶ import imported from echarts

BarSeriesOption (BarSeriesOption$1 & SeriesInjectedOption)¶ Type alias

CandlestickSeriesOption (CandlestickSeriesOption & SeriesInjectedOption)¶ Type alias

CustomSeriesOption (CustomSeriesOption$1 & 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

BarSeriesOption$1 ¶ import imported from echarts

SeriesInjectedOption ¶ import imported from echarts

CandlestickSeriesOption ¶ import imported from echarts

CustomSeriesOption$1 ¶ 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.