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`
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
maxEntries ¶	`number`	`1000`
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: '' }`
showCustomLegend ¶	`boolean`	`false`
showLegend ¶	`boolean`	`true`
subTitle ¶	`string`
theme ¶	`any`		The desired theme to load.
themeCustomization ¶	`any`		Used to override specific options of loaded `theme` .
title ¶	`string`
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` .
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
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?: (`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

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

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

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.