Skip to main content
Version: 8.1

Vision - Bar Chart

Component Palette Icon:


The Bar Chart represents numeric values in an underlying dataset. It is often configured to display as a category chart. A category chart is a chart whose X-values are categories (strings, names, groupings, etc) rather than numeric values (numbers, dates).

Like most chart components (other than the Easy Chart), the Data property drives the chart. The first column in the Data dataset defines the names of the categories. The rest of the columns define the values for each of the series (if there is more than one series per category), and thus should be numeric.


If your data is 'turned on its side', meaning that the columns define the categories and rows define the series, then set the Extract Order to "By Column".


You can bring up a context menu for this component when right-clicking on it either in the Designer's Preview Mode or in a Vision Client. See the Charting - Right Click Menu page for more details.


NameDescriptionProperty TypeScriptingCategory
Bar Label ColorThe color for the bar labels. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector.Color.barLabelColorAxes
Bar Label FontThe font for the bar labels.Font.barLabelFontAxes
Bar Label OffsetThe offset between the bar and the bar label.double.barLabelOffsetAxes
BorderThe border surrounding this component. Options are No border, Etched (Lowered), Etched (Raised), Bevel (Lowered), Bevel (Raised), Bevel (Double), and Field Border.
Note: The border is unaffected by rotation.

Changed in 8.1.21
As of 8.1.21, the "Button Border" and "Other Border" options are removed.
Category Axis LabelThe label for the category axis.String.categoryLabelAxes
Category Axis Label AngleThe angle for the value axis'
Category Axis Label ColorThe color for the category axis label. See Color Selector.Color.catAxisLabelColorAxes
Category Axis Label FontThe font for the category axis label.Font.catAxisLabelFontAxes
Category Axis Lower MarginThe lower margin, as a percentage, of the category axis.double.catAxisLowerMarginAxes
Category Axis Tick ColorThe color for the category axis' ticks. See Color Selector.Color.catAxisTickColorAxes
Category Axis Tick FontThe font for the category axis' ticks.Font.catAxisTickFontAxes
Category Axis Upper MarginThe upper margin, as a percentage, of the category axis.double.catAxisUpperMarginAxes
Category MarginThe margin between categories as a fraction of the total space.double.categoryMarginAppearance
Chart TitleAn optional title that will appear at the top of the chart.String.titleAppearance
Chart TypeControls how the bar chart is
CursorThe mouse cursor to use when hovering over this component. Options are: Default, Crosshair, Text, Wait, Hand, Move, SW Resize, or SE
DataThe data driving the chart.Dataset.dataData
Extract OrderControls whether the first row defines the categories or the
Foreground TransparencyThe transparency of the bars (useful for 3D bars). Valid values are between 0 (0% opacity) and 1 (100% opacity).float.foregroundAlphaAppearance
Gradient bars?If true, bars will be painted with a gradient 'shine'.boolean.gradientAppearance
Item MarginThe margin between bars in a category as a fraction.double.itemMarginAppearance
Labels?Always display labels?boolean.labelsAppearance
Legend FontThe font for the legend items.Font.legendFontAxes
Legend?If true, show a legend for the chart.boolean.legendAppearance
Mouseover TextThe text that is displayed in the tooltip which pops up on mouseover of this component.String.toolTipTextCommon
NameThe name of this component.String.nameCommon
Plot BackgroundThe background color for the plot.Color.plotBackgroundAppearance
QualityThe data quality code for any Tag bindings on this component.QualityCode.qualityData
Series ColorsThe sequence of colors used for series in the bar chart. See Color Selector.Color[].seriesColorsAppearance
Shadows?If true, bars will have a drop-shadow beneath them.boolean.shadowsAppearance
Title FontThe font for the chart's title.Font.titleFontAxes
Tooltips?If true, show tooltips.boolean.tooltipsBehavior
Value Axis Auto-RangeIf true, the value axis range will be determined automatically. If false, the specified upper and lower bounds will be used.boolean.valAxisAutoRangeAxes
Value Axis LabelThe label for the value axisString.valueLabelAxes
Value Axis Label ColorThe color for the value axis label. See Color Selector.Color.valAxisLabelColorAxes
Value Axis Label FontThe font for the value axis label.Font.valAxisLabelFontAxes
Value Axis Lower BoundThe lower bound of the value axis. Used only when auto-range is false.double.valAxisLowerBoundAxes
Value Axis Tick ColorThe color for the value axis' ticks. See Color Selector.Color.valAxisTickColorAxes
Value Axis Tick FontThe font for the value axis' ticks.Font.valAxisTickFontAxes
Value Axis Upper BoundThe upper bound of the value axis. Used only when auto-range is false.double.valAxisUpperBoundAxes
Value Axis Upper MarginThe upper margin, as a percentage, of the value axis. Only used when auto-range is true.double.valAxisUpperMarginAxes
VerticalSets the orientation of the chart to vertical (true) or horizontal(false)boolean.verticalAppearance
VisibleIf disabled, the component will be hidden.boolean.visibleCommon


See the Vision - Bar Chart Scripting Functions page for the full list of scripting functions available for this component.

Event Handlers

Event handlers allow you to run a script based off specific triggers. See the full list of available event handlers on the Component Events page



The following two charts demonstrate the effects of the extract order property on the given dataset. Two bar charts are shown, on the left Extract Order is set to "By Row" and on the right Extract Order is set to "By Column"