Generic chart¶

A generic chart with full support for ECharts options.

The built-in tooltip formatters display category labels, series names and values as plain text, not HTML. For example, <b>Temperature</b> is displayed literally. Pass raw strings rather than pre-escaped strings: & is displayed as &, not &. Null and undefined values are displayed as empty text.

Custom tooltip formatters, including the cartesian chart's tooltipFormatter input and options.tooltip.formatter, are responsible for escaping untrusted values with echarts.format.encodeHTML before inserting them into HTML. Import echarts from @siemens/charts-ng/common to use this function.

Code¶

Usage¶

Required Packages

echarts

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

@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 ¶	(`string` \| `boolean` \| `undefined`)	`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 ¶	(`string` \| `null`)		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?: `number`¶
endValue?: (`string` \| `number` \| `Date`)¶
start?: `number`¶
startValue?: (`string` \| `number` \| `Date`)¶
visibleWidth?: `number`¶

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: `number`¶
rangeStart: `number`¶
rangeType: `AxisType`¶
requested?: `DataZoomRange`¶
source?: `string`¶
width?: `number`¶

AxisPointerEvent

¶

Interface

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

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

GridComponentOption

extends ComponentOption, ComponentOnCalendarOptionMixin, ComponentOnMatrixOptionMixin, BoxLayoutOptionMixin, ShadowOptionMixin¶

Interface

Properties
backgroundColor?: `Color`¶
borderColor?: `Color`¶
borderWidth?: `number`¶
bottom?: `PositionSizeOption` from `BoxLayoutOptionMixin.bottom`¶
calendarId?: `OptionId` from `ComponentOnCalendarOptionMixin.calendarId`¶
calendarIndex?: `number` from `ComponentOnCalendarOptionMixin.calendarIndex`¶
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"`¶
matrixId?: `OptionId` from `ComponentOnMatrixOptionMixin.matrixId`¶
matrixIndex?: `number` from `ComponentOnMatrixOptionMixin.matrixIndex`¶
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?: (`"auto"` \| `"all"` \| `"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"` \| `NullUndefined$1` \| `"same"`)¶
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

ComponentOnCalendarOptionMixin ¶ import imported from echarts

ComponentOnMatrixOptionMixin ¶ 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

Color (`ColorString` \| `LinearGradientObject` \| `RadialGradientObject` \| `PatternObject`)¶ Type alias

PositionSizeOption ¶ import imported from echarts

OptionId ¶ import imported from echarts

CoordinateSystemDataCoord ¶ import imported from echarts

CoordinateSystemUsageOption ¶ import imported from echarts

OptionName ¶ import imported from echarts

NullUndefined$1 ¶ 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

ColorString ¶ import imported from echarts

LinearGradientObject

extends GradientObject¶

Interface

Properties
colorStops: `GradientColorStop`[] from `GradientObject.colorStops`¶
global?: `boolean` from `GradientObject.global`¶
id?: `number` from `GradientObject.id`¶
type: `"linear"`¶
x: `number`¶
x2: `number`¶
y: `number`¶
y2: `number`¶

RadialGradientObject

extends GradientObject¶

Interface

Properties
colorStops: `GradientColorStop`[] from `GradientObject.colorStops`¶
global?: `boolean` from `GradientObject.global`¶
id?: `number` from `GradientObject.id`¶
r: `number`¶
type: `"radial"`¶
x: `number`¶
y: `number`¶

PatternObject (`ImagePatternObject` \| `SVGPatternObject`)¶ Type alias

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

GradientObject ¶ import imported from echarts

ImagePatternObject

extends PatternObjectBase¶

Interface

Properties
id?: `number` from `PatternObjectBase.id`¶
image: (`string` \| `ImageLike`)¶
imageHeight?: `number`¶
imageWidth?: `number`¶
repeat?: `ImagePatternRepeat`¶
rotation?: `number` from `PatternObjectBase.rotation`¶
scaleX?: `number` from `PatternObjectBase.scaleX`¶
scaleY?: `number` from `PatternObjectBase.scaleY`¶
type?: `"pattern"` from `PatternObjectBase.type`¶
x?: `number` from `PatternObjectBase.x`¶
y?: `number` from `PatternObjectBase.y`¶

SVGPatternObject

extends PatternObjectBase¶

Interface

Properties
id?: `number` from `PatternObjectBase.id`¶
rotation?: `number` from `PatternObjectBase.rotation`¶
scaleX?: `number` from `PatternObjectBase.scaleX`¶
scaleY?: `number` from `PatternObjectBase.scaleY`¶
svgElement?: `SVGVNode`¶
svgHeight?: `number`¶
svgWidth?: `number`¶
type?: `"pattern"` from `PatternObjectBase.type`¶
x?: `number` from `PatternObjectBase.x`¶
y?: `number` from `PatternObjectBase.y`¶

GradientColorStop ¶ import imported from echarts

PatternObjectBase ¶ import imported from echarts

ImageLike ¶ import imported from echarts

ImagePatternRepeat ¶ import imported from echarts

SVGVNode ¶ import imported from echarts

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

Generic chart¶

Tooltip content¶

Code¶

Usage¶

SiChartComponent API Documentation¶

Input Properties¶

Output Properties¶

Attributes and Methods¶

Types Documentation¶