Bar chart¶

Usage¶

Use it to perform a comparison of values across different subgroups of data. From a bar chart, it can be seen which groups are highest or most common, and how groups compare against each other.

Basic variant¶

The basic bar chart shows numerical comparisons across categories. One axis of the chart shows the specific categories being compared and the other axis is numeric in nature.

Multi-set variant¶

This variation is used when two or more data series are plotted side-by-side and grouped together under categories, all on the same axis.

Stacked variant¶

The stacked bar chart is used to show how a category is divided. It helps to understand what relationship each part has with the total amount.

Best practices¶

• Plot the bars against a zero-value baseline to accurately reflect the difference in the data.
• Use colors with purpose. Select accent colors to highlight meaningful changes.
• Bar charts can be vertical or horizontal. Horizontal bar charts work best when there are lots of different categories with long labels.
• Use common sense and adjust the width of the bars according to the amount of elements. The minimum bar width is 16px.

Design¶

1. Bars, 2. Y axis, 3.Legend, 4.Grid lines, 5. X axis

Code¶

Usage¶

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

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

Simple Bar Chart¶

Stacked Bar Chart¶

The same component can also be used in a stacked configuration.

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		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 ¶	(null | string)		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.
series ¶	CartesianChartSeries[]		The series for the chart.
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
stacked ¶	boolean	false	Used to display the chart as a stacked one.
subChartGrids ¶	SubchartGrid[]
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.
tooltipFormatter ¶	(string | TooltipFormatterCallback<TopLevelFormatterParams>)		The content formatter of tooltip's floating layer which supports string template and callback function (see (see https://echarts.apache.org/en/option.html#tooltip.formatter ).
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[])		The x axis in cartesian(rectangular) coordinate.
yAxis ¶	(ChartYAxis | ChartYAxis[])		The y axis in cartesian(rectangular) coordinate.
zoomInside ¶	boolean	false	Enables zooming inside the chart with the mouse wheel/touch. Whether zooming inside the chart is possible with mouse.
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 }