Skip to content

SiChartCartesianComponent documentation

selector
si-chart-cartesian

Input Properties

NameTypeDefaultDescription
additionalOptions
EChartOptionUsed to override specific properties set in options .
autoZoomSeriesIndex
number-1No auto dataZoom update) by default. Use together with visibleEntries .
axisPointer
(undefined | string | boolean)falseUsed 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) => stringExternal XAxis Formatter from consumer
externalZoomSlider
booleanfalseFlag to use external zoom slider
maxEntries
number1000
options
EChartOptionSee [ECharts 5.x Documentation] https://echarts.apache.org/en/option.html for all available options.
palette
stringundefinedThe 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: '' }
series
CartesianChartSeries[]
showCustomLegend
booleanfalse
showLegend
booleantrue
stacked
booleanfalseUsed to display the chart as a stacked one.
subChartGrids
SubchartGrid[]
subTitle
string
theme
anyThe desired theme to load.
themeCustomization
anyUsed to override specific options of loaded theme .
title
string
tooltipFormatter
(string | TooltipFormatterCallback<TopLevelFormatterParams>)
visibleEntries
number-1No auto dataZoom update) by default. Use together with autoZoomSeriesIndex .
visibleRange
number-1No auto dataZoom update) by default. Use together with autoZoomSeriesIndex .
xAxis
(ChartXAxis | ChartXAxis[])
yAxis
(ChartYAxis | ChartYAxis[])
zoomInside
booleanfalseEnables zooming inside the chart with the mouse wheel/touch.
zoomMode
booleanEnable or disable brush zoom mode
zoomSlider
booleanfalseEnables the zoom slider below the chart.
zoomSliderBrush
booleantrueenable brush mode for zoom slider
zoomSliderRealtime
booleantruerealtime update mode for zoom slider
zoomSliderShadow
booleantrueShows data shadow in dataZoom slider, use together with zoomSlider .
showTimeRangeBar
Deprecated
booleanfalseIf 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

NameTypeDescription
chartGridResized
GridRectCoordinateEvent emitted when chart grid is resized.
chartSeriesClick
LegendItem
customLegendMultiLineInfoEvent
CustomLegendMultiLineInfo[]
dataZoom
DataZoomEventEvent emitted when data zoom changes.
pointer
AxisPointerEventEvent emitted when axis pointer moves.
selectionChanged
any
showLegendChange
boolean
timeRangeChange
numberEmitted when datazoom changes, indicating the time range in milliseconds, 0 for full range
visibleEntriesChange
numberNo auto dataZoom update) by default. Use together with autoZoomSeriesIndex .
visibleRangeChange
numberNo auto dataZoom update) by default. Use together with autoZoomSeriesIndex .

Attributes and Methods

NameTypeDefaultDescription
addData(...)
(index: number, data: CartesianChartData) => voidUpdate single chart data entry.

Parameters
addDataMulti(...)
(series: SeriesUpdate<CartesianChartData>[]) => voidAppend charts data entries to the end of the series.

Parameters
(readonly) chartContainerWrapper
Signal<ElementRef<any>>viewChild.required<​ElementRef​>('chartContainerWrapper')reference to the wrapper container. Used for setting scroll position, etc.
dispatchEChartAction(...)
(action: Payload) => voidSend action to echart.
See https://echarts.apache.org/en/api.html#action

Parameters
getOptionNoClone()
() => anyreturns 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
getSeriesMarker(...)
(seriesName: string) => stringGet the series marker by series name.

Parameters
getSeriesMarkerSvg(...)
(seriesName: string) => stringGet the series marker svg by series name.

Parameters
getVisibleRange()
() => (undefined | DataZoomEvent)Get current data zoom range.
refreshSeries(...)
(isLive: boolean = true, dzToSet: DataZoomRange) => voidRe-render the chart series data. This method should be called on series data changes.

Parameters
resetChart()
() => voidRe-render the whole chart.
resize()
() => voidAllow consuming applications to re-draw chart on window resizes.
setTimeRange(...)
(range: number) => voidSet the data zoom range for the chart in milliseconds. As an example one hour is the value 3600000.

Parameters
startProgressIndication()
() => voidShow loading indicator.
stopProgressIndication()
() => voidHide loading indicator.
toggleSeriesVisibility(...)
(name: string, visible: boolean) => voidToggle visibility of a series.

Parameters

Types Documentation

Index signature: [ key: string ]: any
Properties
dataZoom?: DataZoomComponentOption[]
grid?: (GridComponentOption | GridComponentOption[])
legend?: LegendComponentOption[]
series?: EChartSeries
("none" | "filter" | "weakFilter" | "empty")
Properties
end?: any
endValue?: any
start?: any
startValue?: any
visibleWidth?: any
Properties
legendItemName: string
Properties
bottom?: (string | number)
categoryId?: string
containLabel?: boolean
height?: (string | number)
left?: (string | number)
right?: (string | number)
top?: (string | number)
imported from echarts
imported from echarts
extends ChartAxis
Index signature: [ key: string ]: any
Properties
axisLabel?: any from ChartAxis.axisLabel
axisLine?: { onZero: boolean, show: boolean } from ChartAxis.axisLine
data?: AxisData from ChartAxis.data
gridIndex?: number from ChartAxis.gridIndex
max?: number from ChartAxis.max
min?: number from ChartAxis.min
name?: string from ChartAxis.name
offset?: number from ChartAxis.offset
position?: XAxisPosition
show?: boolean from ChartAxis.show
splitLine?: { show: boolean } from ChartAxis.splitLine
splitNumber?: number from ChartAxis.splitNumber
type: AxisType from ChartAxis.type
extends ChartAxis
Index signature: [ key: string ]: any
Properties
axisLabel?: any from ChartAxis.axisLabel
axisLine?: { onZero: boolean, show: boolean } from ChartAxis.axisLine
data?: AxisData from ChartAxis.data
gridIndex?: number from ChartAxis.gridIndex
max?: number from ChartAxis.max
min?: number from ChartAxis.min
name?: string from ChartAxis.name
offset?: number from ChartAxis.offset
position?: YAxisPosition
scale?: boolean
show?: boolean from ChartAxis.show
splitLine?: { show: boolean } from ChartAxis.splitLine
splitNumber?: number from ChartAxis.splitNumber
type: AxisType from ChartAxis.type
Properties
containerHeight: number
containerWidth: number
height: number
width: number
x: number
y: number
Properties
color?: string
dataIndex: number
itemName: string
selected?: boolean
Properties
customLegendId: number
isCustomLegendMultilined: boolean
Properties
autoZoomUpdate?: boolean
rangeEnd: any
rangeStart: any
rangeType: AxisType
requested?: DataZoomRange
source?: string
width?: number
Properties
dataIndex?: number
seriesIndex?: number
Properties
If enable animation
animation?: boolean from LineSeriesOption.animation
Delay of initialize animation Can be a callback to specify duration of each element
animationDelay?: (number | AnimationDelayCallback) from LineSeriesOption.animationDelay
Delay of data update animation. Can be a callback to specify duration of each element
animationDelayUpdate?: (number | AnimationDelayCallback) from LineSeriesOption.animationDelayUpdate
Duration of initialize animation. Can be a callback to specify duration of each element
animationDuration?: (number | AnimationDurationCallback) from LineSeriesOption.animationDuration
Delay of data update animation. Can be a callback to specify duration of each element
animationDurationUpdate?: (number | AnimationDurationCallback) from LineSeriesOption.animationDurationUpdate
Easing of initialize animation
animationEasing?: AnimationEasing from LineSeriesOption.animationEasing
Easing of data update animation.
animationEasingUpdate?: AnimationEasing from LineSeriesOption.animationEasingUpdate
Disable animation when the number of elements exceeds the threshold
animationThreshold?: number from LineSeriesOption.animationThreshold
area?: boolean
areaStyle?: (AreaStyleOption<ZRColor> & { origin: (number | "auto" | "start" | "end") }) from LineSeriesOption.areaStyle
blendMode?: string from LineSeriesOption.blendMode
Blur states.
blur?: (LineStateOption<CallbackDataParams> & { areaStyle: AreaStyleOption<ZRColor>, lineStyle: LineStyleOption<ZRColor> }) from LineSeriesOption.blur
clip?: boolean from LineSeriesOption.clip
color?: (ZRColor | ZRColor[]) from LineSeriesOption.color
colorBy?: ColorBy from LineSeriesOption.colorBy
colorLayer?: ZRColor[][] from LineSeriesOption.colorLayer
connectNulls?: boolean from LineSeriesOption.connectNulls
Not available on every series
coordinateSystem?: ("cartesian2d" | "polar") from LineSeriesOption.coordinateSystem
Cursor when mouse on the elements
cursor?: string from LineSeriesOption.cursor
customLegendToolTip?: string from customLegendToolTip
data?: (LineDataValue | LineDataItemOption)[] from LineSeriesOption.data
groupId of data. can be used for doing drilldown / up animation It will be ignored if: - groupId is specified in each data - encode.itemGroupId is given.
dataGroupId?: OptionId from LineSeriesOption.dataGroupId
datasetId?: (string | number) from LineSeriesOption.datasetId
datasetIndex?: number from LineSeriesOption.datasetIndex
dimensions?: DimensionDefinitionLoose[] from LineSeriesOption.dimensions
displayName?: string from displayName
Emphasis states
emphasis?: (LineStateOption<CallbackDataParams> & { focus: DefaultEmphasisFocus, scale: (number | boolean) } & { areaStyle: AreaStyleOption<ZRColor>, lineStyle: (Omit<LineStyleOption<ZRColor>, "width"> & { width: (number | "bolder") }) } & { blurScope: BlurScope, disabled: boolean }) from LineSeriesOption.emphasis
encode?: OptionEncode from LineSeriesOption.encode
endLabel?: LineEndLabelOption from LineSeriesOption.endLabel
hoverLayerThreshold?: number from LineSeriesOption.hoverLayerThreshold
id?: OptionId from LineSeriesOption.id
itemStyle?: ItemStyleOption<CallbackDataParams> from LineSeriesOption.itemStyle
label?: SeriesLabelOption<CallbackDataParams> from LineSeriesOption.label
Overall label layout option in label layout stage.
labelLayout?: (LabelLayoutOption | LabelLayoutOptionCallback) from LineSeriesOption.labelLayout
labelLine?: LabelLineOption from LineSeriesOption.labelLine
lineStyle?: LineStyleOption<ZRColor> from LineSeriesOption.lineStyle
mainType?: "series" from LineSeriesOption.mainType
markArea?: MarkAreaComponentOption from LineSeriesOption.markArea
markLine?: MarkLineComponentOption from LineSeriesOption.markLine
markPoint?: MarkPointComponentOption from LineSeriesOption.markPoint
name?: OptionName from LineSeriesOption.name
polarId?: string from LineSeriesOption.polarId
polarIndex?: number from LineSeriesOption.polarIndex
Configurations about progressive rendering
progressive?: (number | false) from LineSeriesOption.progressive
progressiveChunkMode?: "mod" from LineSeriesOption.progressiveChunkMode
progressiveThreshold?: number from LineSeriesOption.progressiveThreshold
sampling?: ("none" | "min" | "max" | "average" | "minmax" | "sum" | "lttb" | SamplingFunc) from LineSeriesOption.sampling
Select states
select?: (LineStateOption<CallbackDataParams> & { disabled: boolean }) from LineSeriesOption.select
Map of selected data key is name or index of data.
selectedMap?: (Dictionary<boolean> | "all") from LineSeriesOption.selectedMap
selectedMode?: (boolean | "series" | "single" | "multiple") from LineSeriesOption.selectedMode
When dataset is used, seriesLayoutBy specifies whether the column or the row of dataset is mapped to the series namely, the series is "layout" on columns or rows
seriesLayoutBy?: ("column" | "row") from LineSeriesOption.seriesLayoutBy = 'column'
showAllSymbol?: (boolean | "auto") from LineSeriesOption.showAllSymbol
showSymbol?: boolean from LineSeriesOption.showSymbol
silent?: boolean from LineSeriesOption.silent
smooth?: (number | boolean) from LineSeriesOption.smooth
smoothMonotone?: ("none" | "x" | "y") from LineSeriesOption.smoothMonotone
sourceHeader?: OptionSourceHeader from LineSeriesOption.sourceHeader
stack?: string from LineSeriesOption.stack
stackStrategy?: ("all" | "samesign" | "positive" | "negative") from LineSeriesOption.stackStrategy
Animation config for state transition.
stateAnimation?: AnimationOption$1 from LineSeriesOption.stateAnimation
step?: (false | "start" | "middle" | "end") from LineSeriesOption.step
type of symbol, like cirlce , rect , or custom path and image.
symbol?: (string | SymbolCallback<CallbackDataParams>) from LineSeriesOption.symbol
symbolKeepAspect?: boolean from LineSeriesOption.symbolKeepAspect
symbolOffset?: (string | number | (string | number)[] | SymbolOffsetCallback<CallbackDataParams>) from LineSeriesOption.symbolOffset
symbolRotate?: (number | SymbolRotateCallback<CallbackDataParams>) from LineSeriesOption.symbolRotate
Size of symbol.
symbolSize?: (number | number[] | SymbolSizeCallback<CallbackDataParams>) from LineSeriesOption.symbolSize
tooltip?: SeriesTooltipOption from LineSeriesOption.tooltip
triggerLineEvent?: boolean from LineSeriesOption.triggerLineEvent
type?: "line" from LineSeriesOption.type
If enabled universal transition cross series.

Example:
universalTransition: true
 universalTransition: { enabled: true }
universalTransition?: (boolean | UniversalTransitionOption) from LineSeriesOption.universalTransition
visible?: boolean from visible
xAxisId?: string from LineSeriesOption.xAxisId
xAxisIndex?: number from LineSeriesOption.xAxisIndex
yAxisId?: string from LineSeriesOption.yAxisId
yAxisIndex?: number from LineSeriesOption.yAxisIndex
z?: number from LineSeriesOption.z
zlevel?: number from LineSeriesOption.zlevel
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
Properties
customLegendToolTip?: string
displayName?: string
visible?: boolean
("top" | "bottom")
("value" | "category" | "time" | "log")
Copyright (c) Siemens 2016 - 2025 SPDX-License-Identifier: MIT
("left" | "right")
Properties
data: SeriesType
index: number
Index signature: [ other: string ]: any
Properties
animation?: PayloadAnimationPart from PayloadItem.animation
batch?: PayloadItem[]
escapeConnect?: boolean
excludeSeriesId?: (OptionId | OptionId[]) from PayloadItem.excludeSeriesId
type: string
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
import
imported from echarts
imported from echarts
imported from echarts
import
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
Properties
If enable animation
animation?: boolean from MarkerOption.animation
Delay of initialize animation Can be a callback to specify duration of each element
animationDelay?: (number | AnimationDelayCallback) from MarkerOption.animationDelay
Delay of data update animation. Can be a callback to specify duration of each element
animationDelayUpdate?: (number | AnimationDelayCallback) from MarkerOption.animationDelayUpdate
Duration of initialize animation. Can be a callback to specify duration of each element
animationDuration?: (number | AnimationDurationCallback) from MarkerOption.animationDuration
Delay of data update animation. Can be a callback to specify duration of each element
animationDurationUpdate?: (number | AnimationDurationCallback) from MarkerOption.animationDurationUpdate
Easing of initialize animation
animationEasing?: AnimationEasing from MarkerOption.animationEasing
Easing of data update animation.
animationEasingUpdate?: AnimationEasing from MarkerOption.animationEasingUpdate
Disable animation when the number of elements exceeds the threshold
animationThreshold?: number from MarkerOption.animationThreshold
Blur states.
blur?: MarkAreaStateOption from StatesOptionMixin.blur
data?: (MarkArea1DDataItemOption | MarkArea2DDataItemOption)[]
Emphasis states
emphasis?: (MarkAreaStateOption & { blurScope: BlurScope, disabled: boolean }) from StatesOptionMixin.emphasis
id?: OptionId from MarkerOption.id
itemStyle?: ItemStyleOption<never> from MarkAreaStateOption.itemStyle
label?: SeriesLabelOption<CallbackDataParams> from MarkAreaStateOption.label
mainType?: "markArea"
name?: OptionName from MarkerOption.name
precision?: number
Select states
select?: (MarkAreaStateOption & { disabled: boolean }) from StatesOptionMixin.select
silent?: boolean from MarkerOption.silent
tooltip?: (CommonTooltipOption<unknown> & { trigger: (boolean | "none" | "axis" | "item") }) from MarkerOption.tooltip
type?: string from MarkerOption.type
z?: number from MarkerOption.z
zlevel?: number from MarkerOption.zlevel
Properties
If enable animation
animation?: boolean from MarkerOption.animation
Delay of initialize animation Can be a callback to specify duration of each element
animationDelay?: (number | AnimationDelayCallback) from MarkerOption.animationDelay
Delay of data update animation. Can be a callback to specify duration of each element
animationDelayUpdate?: (number | AnimationDelayCallback) from MarkerOption.animationDelayUpdate
Duration of initialize animation. Can be a callback to specify duration of each element
animationDuration?: (number | AnimationDurationCallback) from MarkerOption.animationDuration
Delay of data update animation. Can be a callback to specify duration of each element
animationDurationUpdate?: (number | AnimationDurationCallback) from MarkerOption.animationDurationUpdate
Easing of initialize animation
animationEasing?: AnimationEasing from MarkerOption.animationEasing
Easing of data update animation.
animationEasingUpdate?: AnimationEasing from MarkerOption.animationEasingUpdate
Disable animation when the number of elements exceeds the threshold
animationThreshold?: number from MarkerOption.animationThreshold
Blur states.
blur?: MarkLineStateOption from StatesOptionMixin.blur
data?: (MarkLine1DDataItemOption | MarkLine2DDataItemOption)[]
Emphasis states
emphasis?: (MarkLineStateOption & { blurScope: BlurScope, disabled: boolean }) from StatesOptionMixin.emphasis
id?: OptionId from MarkerOption.id
itemStyle for symbol
itemStyle?: ItemStyleOption<never> from MarkLineStateOption.itemStyle
label?: SeriesLineLabelOption from MarkLineStateOption.label
lineStyle?: LineStyleOption<ZRColor> from MarkLineStateOption.lineStyle
mainType?: "markLine"
name?: OptionName from MarkerOption.name
Precision used on statistic method
precision?: number
Select states
select?: (MarkLineStateOption & { disabled: boolean }) from StatesOptionMixin.select
silent?: boolean from MarkerOption.silent
symbol?: (string | string[])
symbolOffset?: (string | number | (string | number)[] | (string | number)[][])
symbolRotate?: (number | number[])
symbolSize?: (number | number[])
tooltip?: (CommonTooltipOption<unknown> & { trigger: (boolean | "none" | "axis" | "item") }) from MarkerOption.tooltip
type?: string from MarkerOption.type
z?: number from MarkerOption.z
zlevel?: number from MarkerOption.zlevel
Properties
If enable animation
animation?: boolean from MarkerOption.animation
Delay of initialize animation Can be a callback to specify duration of each element
animationDelay?: (number | AnimationDelayCallback) from MarkerOption.animationDelay
Delay of data update animation. Can be a callback to specify duration of each element
animationDelayUpdate?: (number | AnimationDelayCallback) from MarkerOption.animationDelayUpdate
Duration of initialize animation. Can be a callback to specify duration of each element
animationDuration?: (number | AnimationDurationCallback) from MarkerOption.animationDuration
Delay of data update animation. Can be a callback to specify duration of each element
animationDurationUpdate?: (number | AnimationDurationCallback) from MarkerOption.animationDurationUpdate
Easing of initialize animation
animationEasing?: AnimationEasing from MarkerOption.animationEasing
Easing of data update animation.
animationEasingUpdate?: AnimationEasing from MarkerOption.animationEasingUpdate
Disable animation when the number of elements exceeds the threshold
animationThreshold?: number from MarkerOption.animationThreshold
Blur states.
blur?: MarkPointStateOption from StatesOptionMixin.blur
data?: MarkPointDataItemOption[]
Emphasis states
emphasis?: (MarkPointStateOption & { blurScope: BlurScope, disabled: boolean }) from StatesOptionMixin.emphasis
id?: OptionId from MarkerOption.id
itemStyle?: ItemStyleOption<never> from MarkPointStateOption.itemStyle
label?: SeriesLabelOption<CallbackDataParams> from MarkPointStateOption.label
mainType?: "markPoint"
name?: OptionName from MarkerOption.name
precision?: number
Select states
select?: (MarkPointStateOption & { disabled: boolean }) from StatesOptionMixin.select
silent?: boolean from MarkerOption.silent
type of symbol, like cirlce , rect , or custom path and image.
symbol?: (string | SymbolCallback<CallbackDataParams>) from SymbolOptionMixin.symbol
symbolKeepAspect?: boolean from SymbolOptionMixin.symbolKeepAspect
symbolOffset?: (string | number | (string | number)[] | SymbolOffsetCallback<CallbackDataParams>) from SymbolOptionMixin.symbolOffset
symbolRotate?: (number | SymbolRotateCallback<CallbackDataParams>) from SymbolOptionMixin.symbolRotate
Size of symbol.
symbolSize?: (number | number[] | SymbolSizeCallback<CallbackDataParams>) from SymbolOptionMixin.symbolSize
tooltip?: (CommonTooltipOption<unknown> & { trigger: (boolean | "none" | "axis" | "item") }) from MarkerOption.tooltip
type?: string from MarkerOption.type
z?: number from MarkerOption.z
zlevel?: number from MarkerOption.zlevel
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts
imported from echarts

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