Generic chart¶

A generic chart with full support for ECharts options.

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.