Line chart¶

Usage¶

Line charts can help users to track changes in data over time, compare performance of different groups and analyze trends and patterns to make timely decisions.

Basic line chart¶

Line charts connect a series of data points using a line. It displays quantitative data series over continuous intervals.

Multiple line chart¶

Use it to visualize trends and relationships in multiple data sets. It compares different data groups on the same scale to find out how each of them is performing compared to the others.

Step-line chart¶

Use it to visualize trends for a particular event that is not continuous in nature. This chart compares the magnitude of change in value and helps to discern the intermittent pattern of the trend.

Best practices¶

• Use appropriate time periods to ensure accurate insights.
• Choose a baseline that suits the data; choosing a zero baseline may not always represent the data change effectively.
• When comparing data sets, line charts are only useful if the axes follow the same scales.
• Don't plot too many lines. Limit the number to five.

Design¶

1. Chart title, 2. Y axis, 3. X axis, 4. Line graph, 5. Legend, 6. Grid-lines

Code¶

Usage¶

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

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

SiChartCartesianComponent API Documentation¶

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: '' }
series ¶	CartesianChartSeries[]
showCustomLegend ¶	boolean	false
showLegend ¶	boolean	true
stacked ¶	boolean	false	Used to display the chart as a stacked one.
subChartGrids ¶	SubchartGrid[]
subTitle ¶	string
theme ¶	any		The desired theme to load.
themeCustomization ¶	any		Used to override specific options of loaded theme .
title ¶	string
tooltipFormatter ¶	(string | TooltipFormatterCallback<TopLevelFormatterParams>)
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 .
xAxis ¶	(ChartXAxis | ChartXAxis[])
yAxis ¶	(ChartYAxis | ChartYAxis[])
zoomInside ¶	boolean	false	Enables zooming inside the chart with the mouse wheel/touch.
zoomMode ¶	boolean		Enable or disable brush zoom mode
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¶

Attributes and Methods¶

Types Documentation¶

universalTransition: true
 universalTransition: { enabled: true }