Bar Chart

A BarChart represents data with rectangular bars. It can be statically filled with data or dynamically supplied with data via an array.

A description of the configuration can be found in chapter Configuration.

Attributes

Category: Colors

Name	Description
GridBackgroundColor	Definition of the background color of the coordinate system
XAxisColor	Definition of the color of the X-axis
YAxisColor	Definition of the color of the Y-axis
GridLineColor	Definition of the color of the coordinate grid
SectionsBackgroundColor	Definition of the color of the sections
SubgridLineColor	Definition of the color of the coordinate subgrid
XLabelFontColor	Definition of the font color of the X-axis labels
XAxisNameFontColor	Definition of the font color of the Y-axis name
YLabelFontColor	Definition of the font color of the Y-axis labels
YAxisNameFontColor	Definition of the font color of the Y-axis name
BackgroundColor	Definition of the background color
BorderColor	Definition of the border color of the control

Category: Layout

Name	Description
Left	Definition of the distance from the left side to the left side of the surrounding control
LeftUnit	Definition of the unit of the distance to the right side of the surrounding control: Pixels for absolute positioning Percent for relative positioning
Top	Definition of the distance from the top side to the top side of the surrounding control
TopUnit	Selection of the unit of the distance to the top side of the surrounding control: Pixels for absolute positioning Percent for relative positioning
Right	Definition of the distance from the right side to the right side of the surrounding control
RightUnit	Selection of the unit of the distance to the right side of the surrounding control: Pixels for absolute positioning Percent for relative positioning
Bottom	Definition of the distance from the bottom side to the bottom side of the surrounding control
BottomUnit	Selection of the unit of the distance to the bottom side of the surrounding control: Pixels for absolute positioning Percent for relative positioning
Width	Definition of the external width of the control
WidthUnit	Selection of the unit of the width: Pixels for an absolute width Percent for a relative width
Height	Definition of the external height of the control
HeightUnit	Selection of the unit of the height: Pixels for an absolute height Percent for a relative height
MaxWidth	Definition of the maximum width if the control size is defined as dynamic.
MaxWidthUnit	Selection of the unit of the maximum width: Pixels for an absolute value Percent for a relative value
MinWidth	Definition of the minimum width if the control size is defined as dynamic.
MinWidthUnit	Selection of the unit of the minimum width: Pixels for an absolute value Percent for a relative value
MaxHeight	Definition of the maximum height if the control size is defined as dynamic.
MaxHeightUnit	Selection of the unit of the maximum height: Pixels for an absolute value Percent for a relative value
MinHeight	Definition of the minimum height if the control size is defined as dynamic.
MinHeightUnit	Selection of the unit of the minimum height: Pixels for an absolute value Percent for a relative value
RenderedLeft	Calculated distance in pixels from the left side to the left side of the surrounding control
RenderedTop	Calculated distance in pixels from the top side to the top side of the surrounding control
RenderedRight	Calculated distance in pixels from the right side to the right side of the surrounding control
RenderedBottom	Calculated distance in pixels from the bottom side to the bottom side of the surrounding control
RenderedWidth	Calculated width of the control in pixels
RenderedHeight	Calculated height of the control in pixels
GridRowIndex	Definition of the row of a grid in which the control is to be displayed.
GridColumnIndex	Definition of the column of a grid in which the control is to be displayed.
Opacity	Definition of the transparency of the entire control
Visibility	Selection of the visibility of a control: Visible: Control is visible. Hidden: Control is invisible, but is drawn – controls behind it cannot be operated. Collapsed: Control is invisible and is not drawn – controls behind it can be operated.
ZIndex	Definition of the position on the Z-axis
Transform	Definition of a transformation of a control: Translate: Translate in X-, Y-, Z-direction Rotate: Rotate by an angle Scale: Zoom by a factor Skew: Sides shown skewed by an angle Origin: Set the origin of the transformation relative to the position of the control Perspective: Set the perspective of the transformations of all child elements
BoxShadow	Definition of a shadow
WidthMode	Selection of the method of calculating the width: Value: The width is defined by the width entered. Parent: The width is defined by the distance to the left and right side of the parent element. The "Width" attribute is ignored in all calculations!
HeightMode	Selection of the method of calculating the height: Value: The height is defined by the height entered. Parent: The height is defined by the distance to the top and bottom side of the parent element. The "Height" attribute is ignored in all calculations!

Category: Common

Name	Description
BarGraphData	Definition of the data to be displayed as graph using the 'Bar Graph Data' dialog
BarGraphDescription	Definition of the display mode of the configured bar graphs using the 'Bar Graph Description' dialog
BarGraphColors	Definition of the colors of the configured bar graphs using the 'Bar Graph Color' dialog
ShowLegend	Selecting whether the legend is to be displayed
BarGraphArrangement	Selection of the display mode of the bar chart: Overlapped: Bars are drawn on top of each other Clustered: Bars are drawn next to each other
BarGraphWidth	Definition of the width of the individual bars.
ReferenceLines	Definition of the reference lines.
IsEnabled	Selection of whether a control should be activated
Id	Definition of the name of the control
Type	Type name of the control
ClassNames	Definition of control classes
IsAttached	If a control is logically assigned in the DOM.
Tooltip	Definition of the tooltip for the control

Category: Border

Name	Description
BorderRadius	Definition of the radius of the four corners to round them off
BorderStyle	Selection of the border style of the four sides of the control
BorderWidth	Definition of the border width of the four sides of the control

Category: Background Image

Name	Description
BackgroundImage	Definition of an image that is located above the background color
BackgroundImageHeight	Definition of the height of the background image
BackgroundImageHeightUnit	Selection of the unit of the height of the background image: Pixels for an absolute height Percent for a relative height
BackgroundImageWidth	Definition of the width of the background image
BackgroundImageWidthUnit	Selection of the unit of the width of the background image: Pixels for an absolute width Percent for a relative width
BackgroundImagePadding	Definition of an additional distance between the border of the control and background image for the four sides
BackgroundImageVerticalAlignment	Definition of the vertical alignment of the background image within the control
BackgroundImageHorizontalAlignment	Definition of the horizontal alignment of the background image within the control

Category: XAxis

Name	Description
ShowXAxis	Selecting whether the X-axis is to be displayed
XShowLabels	Selecting whether the X-axis labels are to be displayed
XMainTickSteps	Definition of the step size of the X-axis main subdivision
XMainTickMinValue	Definition of the minimum value of the X-axis main subdivision
XMainTickMaxValue	Definition of the maximum value of the X-axis main subdivision
ShowXAxisName	Selecting whether the X-axis name is to be displayed
XAxisName	Definition of the X-axis name
XAxisAutoScaling	Selecting whether the X-axis should be automatically scaled according to the data sets. 'Maintick Min Value', 'Maintick Max Value' and 'X-Axis Maintick Steps' need not be set.
XAxisDecimalPlaces	Definition of the decimal places displayed for the X-axis
XAxisUnit	Definition of the X-axis unit
XAxisWidth	Definition of the X-axis width
XLabelFontFamily	Definition of the font using the name of the font family or the keyword
XLabelFontSize	Definition of the font size for the X-axis labels
XLabelFontSizeUnit	Selecting the font size unit for the X-axis labels: Pixels for an absolute size Percent for a relative size
XLabelFontWeight	Selecting the font weight of the X-axis labels: Normal Bold
XAxisFormat	Definition of the formatting of the X-axis labels
XNameFontFamily	Definition of the font using the name of the font family or the keyword
XNameFontSize	Definition of the font size of the X-axis name
XNameFontSizeUnit	Selecting the unit of the font size of the X axis name: Pixels for an absolute size Percent for a relative size
XNameFontWeight	Selecting of the font weight of the X-axis name: Normal Bold
ShowXSubTicks	Selecting whether the subcoordinate points are to be displayed on the X-axis
XSubTickSteps	Definition of the step size of the X-axis subdivision

Category: YAxis

Name	Description
ShowYAxis	Selecting whether the y-axis is to be displayed
YPosition	Selecting the position of the y-axis on the coordinate system Left: Y-axis is displayed on the left side of the coordinate system. Right: Y-axis is displayed on the right side of the coordinate system.
YAxisAutoScaling	Selecting whether the y-axis should be automatically scaled according to the data sets. 'Maintick Min Value', 'Maintick Max Value' and 'Y-Axis Maintick Steps' need not be set.
YAxisDecimalPlaces	Definition of the decimal places displayed for the y-axis
YAxisUnit	Definition of the unit of the y-axis
YAxisWidth	Definition of the y-axis width
ShowYAxisName	Selecting whether the y-axis name is to be displayed
YAxisName	Definition of the y-axis name
YAxisNameFontFamily	Definition of the font using the name of the font family or the keyword
YAxisNameFontSize	Definition of the font size of the y-axis name
YAxisNameFontSizeUnit	Selecting the unit of the font size of the y-axis name: Pixels for an absolute size Percent for a relative size
YAxisNameFontWeight	Selecting of the font weight of the y-axis name: Normal Bold: Bold
YShowLabels	Selecting whether the y-axis labels are to be displayed
YLabelFontFamily	Definition of the font using the name of the font family or the keyword
YLabelFontSize	Definition of the font size for the y-axis labels
YLabelFontSizeUnit	Selecting the font size unit for the y-axis labels: Pixels for an absolute size Percent for a relative size
YLabelFontWeight	Selecting the font weight of the y-axis labels: Normal Bold: Bold
YMainTickMinValue	Definition of the minimum value of the y-axis main subdivision
YMainTickMaxValue	Definition of the maximum value of the y-axis main subdivision
YMainTickSteps	Definition of the step size of the y-axis main subdivision
ShowYSubTicks	Selecting whether the subcoordinate points are to be displayed on the y-axis
YSubTickSteps	Definition of the step size of the y-axis subdivision

Category: Grid

Name	Description
ShowGrid	Selecting whether the coordinate grid is to be displayed.
GridShowHorizontalLines	Selecting whether the horizontal lines of the coordinate grid are to be displayed.
GridShowVerticalLines	Selecting whether the vertical lines of the coordinate grid are to be displayed.
GridLineStyle	Definition of the line style for the coordinate grid.
GridLineWidth	Definition of the line width of the coordinate grid.
SubgridShowHorizontalLines	Selecting whether the horizontal lines of the subgrid are to be displayed.
SubgridShowVerticalLines	Selecting whether the vertical lines of the subgrid are to be displayed.
SubgridLineStyle	Definition of the line style of the subgrid.
SubgridLineWidth	Definition of the line width of the subgrid.

Events

Category: Framework

Name	Description
onAttached	The control was added to the display.
onDetached	The control was removed from the display.
onInitialized	The control was initialized.
onDestroyed	The control was destroyed.
onMoved	The control was moved in relation to the browser window.
onResized	The size of the control was changed.

Category: Operator

Name	Description
onPressed	A mouse click was executed or a touch screen was briefly touched.
onMouseClick	The left mouse button was clicked over the control and released.
onMouseDoubleClick	The left mouse button was clicked twice over the control and released.
onMouseRightClick	The right mouse button was clicked over the control and released.
onMouseDown	A mouse button was pressed down over the control.
onMouseEnter	The mouse pointer was moved over the control.
onMouseLeave	The mouse pointer has left the control.
onMouseUp	A mouse button was released over the control.
onMouseDownLeft	The left mouse button was pressed down over the control.
onMouseDownRight	The right mouse button was pressed down over the control.
onMouseMove	The mouse was moved over the control.
onMouseOver	The mouse pointer was moved over the control or one of its children.
onMouseOut	The mouse pointer has left the control or one of its child controls.
onMouseUpLeft	The left mouse button was released over the control.
onMouseUpRight	The right mouse button was released over the control.
onMouseWheel	The mouse wheel was moved over the control.
onTouchStart	A finger/stylus was placed against a touch screen.
onTouchMove	A finger/stylus was moved on a touch screen.
onTouchEnd	A finger/stylus was lifted off a touch screen.
onTouchCancel	An interaction with a touch screen was aborted.

Access rights

Name	Description
observe	Determines whether the control is generally observable.
operate	Determines whether the control is generally operable.

Inheritance hierarchy

Control

Bar Chart

NuGet package: Beckhoff.TwinCAT.HMI.Controls

	NuGet packages are available from version 1.12.

	Available from 1.8

Bar Chart

Attributes

Events

Access rights

Inheritance hierarchy

See also