Skip to main content
Version: 8.1

Vision - Chart Customizer

Description

The Chart component, also known as the Classic Chart, can be used to make almost any kind of chart. It provides a flexible way to display XY charts using a host of built-in properties. All you need to do to create a chart is add datasets, fill them in with data, configure a property binding, and setup the chart properties using the customizer.

Customizer

The Chart component has its own special customizer called the Chart Customizer. When you open the customizer, you'll notice five tabs at the top: Dataset, X-Axes, Y-Axes, Dataset Properties, and Plot Properties. Each tab has its own set of properties and defaults.

To get started, first add your dataset(s) and any additional XY axes using the appropriate tabs in the customizer. You can configure additional properties for each dataset, like what axes the data maps to, as well as select from a host of visual styles.

There are six types of axes to choose from when configuring a chart, each having its own list of properties: Number Axis, Date Axis, Category Axis, Logarithmic Axis, Elapsed Axis, and Symbols Axis. Most of the X and Y axes properties are used in the customizer, and some properties are specific to the axis type and have their own unique properties

The customizer already has some default styles in place to help you get started, but you can modify these default settings to your own style using the XY properties, Axes Type, Renderer and Plot styles. If you don't like one style, try another.

Shown below is each tab in the Chart Customizer with all its properties, description, and what axes type it supports. Note: Not all properties are available for all axes type charts.

Datasets Tab

The Dataset tab is where you set up, add, and remove datasets.

PropertyDescription
DataDefault dataset property.
AddAdds a new dataset. Click the plus icon a new row will be added. Enter the dataset Name and Description.
DeleteDeletes an existing dataset. Click the Delete icon to delete an existing dataset.
NameName of the dataset. Double click in the field to rename the dataset.
TypeDefault type is "Dataset."
DescriptionDescribes the dataset.

X-Axes Tab

The X-Axes tab is where X-Axis properties are configured. You can also add and delete X axes here.

PropertyDescriptionSupports Axes Types
Add X axis. When you add an X axis, you can select from one of the following axis types: Number, Date, Category, Logarithmic, Elapsed, and Symbol.
Click the green plus icon, select an Axis Type, enter an Axis Name, and click OK.
All
Delete an existing axis. Select the axis, and click the Delete icon.All
Axis VisibleIf false, the axis will be hidden.All
Axis LabelName of the axis.All
Axis Label AngleAngle of the value on the axis label.All
Axis Label ColorColor of axis label.All
Axis Label FontFont type and size of text on axis label.All
Tick Labels VisibleIf false, the tick labels will be hidden.All
Tick Label ColorColor of tick labels.All
Tick Label FontFont type and size of text on tick labels.All
Tick Marks VisibleIf false, the tick marks will be hidden.All
Tick Mark ColorColor of tick marks.All
Tick Mark Inside LengthLength of tick marks inside the chart.All
Tick Mark Outside LengthLength of tick marks outside the chart.All
Axis PositionDepends on the axis selected. X-axis label alternates between top and bottom. Y-axis label alternates between left and right. You many need to change both X and Y axis properties to get your intended axis position.All
Auto RangeIf true, the value axis range will be determined automatically. If false, the specified Lower and Upper bounds will be used.All
Auto Range Min SizeIf true, the minimum value range is used.Date, Number, Logarithmic, Symbol, Elapsed
Fixed Auto RangeSets an axis up for dynamic graphs.Date, Number, Logarithmic, Symbol, Elapsed
Lower BoundLower bound value. Used only when Auto Range is false.Date, Number, Logarithmic, Symbol, Elapsed
Upper BoundUpper bound value. Used only when Auto Range is false.Date, Number, Logarithmic, Symbol, Elapsed
Lower Margin (% of range)Lower margin represented as a percentage. Used only when Auto Range is true.Date, Number, Logarithmic, Symbol, Elapsed
Upper Margin (% of range)Upper margin represented as a percentage. Used only when the Auto Range is true.Date, Number, Logarithmic, Symbol, Elapsed
Negative ArrowIf true, negative arrow is visible.Date, Number, Logarithmic, Symbol, Elapsed
Positive ArrowIf true, positive arrow is visible.Date, Number, Logarithmic, Symbol, Elapsed
Vertical Tick LabelsVertical orientation for tick labels.Date, Number, Logarithmic, Symbol, Elapsed
Auto Range Includes ZeroIf true, the range includes a zero.Date, Number, Logarithmic, Symbol, Elapsed
Auto Range Sticky ZeroIf true, the zero is on both the XY axes.Date, Number, Logarithmic, Symbol, Elapsed
Number Format OverrideOverwrites the current number format.Date, Number, Logarithmic, Symbol
Date StyleThe style of the date displayed on the axis.Date
Time StyleThe style of the time displayed on the axis.Date
Max DateMax value in a series of dates.Date
Min DateMin value in a series of dates.Date
Display Date in TitleIf true, the date will be displayed in the title when the range is zoomed into the hour range.Date
Label AngleThe angle for the value axis labels.Category
"1e#"-style tick labelsIf true, uses scientific notation format (i.e.,1e5, 1e6, etc.,).Logarithmic
"10^n"-style tick labelsIf true, uses power notation format (i.e., 10 to the "X" power).Logarithmic
Symbols StringSequence of characters such as a literal constant. (i.e., On,Off,Auto)Symbols
Grid Bands VisibleIf true, grid bands will be hidden.Symbols
Grid Bands ColorColor of grid bands.Symbols
Grid Bands Alternate ColorBackup color of grid bands.Symbols
Format StringSpecified sequence of characters.Elapsed

Y-Axes Tab

The Y-Axes tab is where Y-Axis properties are configured. You can also add and delete Y axes here.

PropertyDescriptionSupports Axes Types
Add axis. When you add a Y axis, you can select from one of the following axis types: Number, Date, Category, Logarithmic, Elapsed, and Symbol.
Click the green plus icon, select an Axis Type, enter an Axis Name, and click OK.
All
Delete an existing axis. Select an axis, and click the Delete icon.All
Axis VisibleIf false, the axis will be hidden.All
Axis LabelName of the axis.All
Axis Label AngleAngle of the value on the axis label.All
Axis Label ColorColor of axis label.All
Axis Label FontFont type and size of text on axis label.All
Tick Labels VisibleIf false, the tick labels will be hidden.All
Tick Label ColorColor of tick labels.All
Tick Label FontFont type and size of text on tick labels.All
Tick Marks VisibleIf false, the tick marks will be hidden.All
Tick Mark ColorColor of tick marks.All
Tick Mark Inside LengthLength of tick marks inside the chart.All
Tick Mark Outside LengthLength of tick marks outside the chart.All
Axis PositionDepends on the axis selected. X-axis label alternates between top and bottom. Y-axis label alternates between left and right. You many need to change both X and Y axis properties to get your intended axis position.All
Auto RangeIf true, the value axis range will be determined automatically. If false, the specified Lower and Upper bounds will be used.All
Auto Range Min SizeIf true, the minimum value range is used.Date, Number, Logarithmic, Symbol, Elapsed
Fixed Auto RangeSets an axis up for dynamic graphs.Date, Number, Logarithmic, Symbol, Elapsed
Lower BoundLower bound value. Used only when Auto Range is false.Date, Number, Logarithmic, Symbol, Elapsed
Upper BoundUpper bound value. Used only when Auto Range is false.Date, Number, Logarithmic, Symbol, Elapsed
Lower Margin (% of range)Lower margin represented as a percentage. Used only when Auto Range is true.Date, Number, Logarithmic, Symbol, Elapsed
Upper Margin (% of range)Upper margin represented as a percentage. Used only when the Auto Range is true.Date, Number, Logarithmic, Symbol, Elapsed
Negative ArrowIf true, negative arrow is visible.Date, Number, Logarithmic, Symbol, Elapsed
Positive ArrowIf true, positive arrow is visible.Date, Number, Logarithmic, Symbol, Elapsed
Vertical Tick LabelsVertical orientation for tick labels.Date, Number, Logarithmic, Symbol, Elapsed
Auto Range Includes ZeroIf true, the range includes a zero.Date, Number, Logarithmic, Symbol, Elapsed
Auto Range Sticky ZeroIf true, the zero is on both the XY axes.Date, Number, Logarithmic, Symbol, Elapsed
Number Format OverrideOverwrites the current number format.Date, Number, Logarithmic, Symbol
Date StyleThe style of the date displayed on the axis.Date
Time StyleThe style of the time displayed on the axis.Date
Max DateMax value in a series of dates.Date
Min DateMin value in a series of dates.Date
Display Date in TitleIf true, the date will be displayed in the title when the range is zoomed into the hour range.Date
Label AngleThe angle for the value axis labels.Category
"1e#"-style tick labelsIf true, uses scientific notation format (i.e.,1e5, 1e6, etc.,).Logarithmic
"10^n"-style tick labelsIf true, uses power notation format (i.e., 10 to the "X" power).Logarithmic
Symbols StringSequence of characters such as a literal constant. (i.e., On,Off,Auto)Symbols
Grid Bands VisibleIf true, grid bands will be hidden.Symbols
Grid Bands ColorColor of grid bands.Symbols
Grid Bands Alternate ColorBackup color of grid bands.Symbols
Format StringSpecified sequence of characters.Elapsed

Dataset Properties Tab

The Dataset tab is where you can modify the visual styles of your chart. You can configure your chart with subplots, experiment with different renderer types and property types to change how the data is displayed until you find what best meets your requirements.

note

Not all Renderer properties are available for each axis type.

PropertyDescriptionSupports Axes Types
DatasetCollection of data in tabular form. Data from the dataset drives the chart.All
X AxisHorizontal axis.All
Y AxisVertical axis.All
Subplot NumberNumber of plot areas on one chart.All
EnabledIf true, the chart is displayed with the selected renderer properties.All
RendererThe visual style of the data presented on the chart. Select from various renderer styles:
  • XY Line/Shape Renderer
  • XY Bar Renderer
  • XY Area Renderer
  • XY Step Renderer
  • XY Step Area Renderer
  • XY Dot Renderer
  • Category Line/Shape Renderer
  • Category Bar Renderer
All
Series ColorsAn ordered list of the colors to draw series in.All
TypeType of XY Item Renderer.All
Line SizeThe thickness of the line.All
Dash PatternThe pattern used for dashed lines.All
Fill ShapesIf false, there is only an outline of the shape, no fill color.All
Shape OffsetThe offset into the standard shape list to start this renderer at. Offset values and respective values are listed below.
  • 0 - Square
  • 1 - Circle
  • 2 - Upward triangle
  • 3 - Diamond
  • 4 - Horizontal rectangle
  • 5 - Downward triangle
  • 6 - Horizontal ellipse
  • 7 - Rightward triangle
  • 8 - Vertical rectangle
  • 9 - Leftward triangle
Offset
MarginThe percentage by which the bars are trimmed using the XY Bar Renderer.All
ShadowsIf true, draws shadows under the bars using the XY Bar Renderer.All
OutlineIf true, draws an outline around the area using the XY Area Renderer.All
Draw LinesIf true, lines will be drawn to connect the datapoints using the Category Line/Shape Renderer.All
Draw ShapesIf true, shapes will be drawn to connect each datapoint if using the Category Line/Shape Renderer.All
Date StyleThe style of the date displayed on the axis.Date
Time StyleThe style of the time displayed on the axis.Date
Max DateMax value in a series of dates.Date
Min DateMin value in a series of dates.Date
Display Date in TitleIf true, the date will be displayed in the title when the range is zoomed into the hour range.Date
Label AngleThe angle for the value axis labels.Category
"1e#"-style tick labelsIf true, uses scientific notation format (i.e.,1e5, 1e6, etc.,).Logarithmic
"10^n"-style tick labelsIf true, uses power notation format (i.e., 10 to the "X" power).Logarithmic
Symbols StringSequence of characters such as a literal constant. (i.e., On,Off,Auto)Symbols
Grid Bands VisibleIf true, grid bands will be hidden.Symbols
Grid Bands ColorColor of grid bands.Symbols
Grid Bands Alternate ColorBackup color of grid bands.Symbols
Format StringSpecified sequence of characters.Elapsed

Plot Properties Tab

The Plot Properties tab allows you to break up the chart plot area into multiple distinct subplots.

PropertyDescriptionSupports Axes Types
PlotThe chart area displaying data.All
Override Background ColorIf enabled, allows you to change the background color.All
Background ColorBackground color of the chart.All
Plot Weight (Relative)The chart ratio between subplots.All

References

Axis Type Examples

The Chart Customizer has six different axis types to choose from when configuring a chart, each with its own list of properties.

note

Some customizer properties are specific to the axis type and have their own unique properties. Examples of all axis types are shown below along with the property settings used to create each chart.

Number Axis Chart

Binding Type

  • Tag - Tag History

Chart Customizer Property Settings

Datasets Tab

Property NameValue
DatasetsData

X-Axes Tab

Property NameValue
AxesNumber
X Axis LabelNumber Axis
Axis Label ColorRed
Tick Label ColorGreen

Y-Axes Tab

Property NameValue
AxesDefault Y Axis
Y Axis LabelOutput Temp
Axis Label ColorRed
Tick Label ColorGreen

Dataset Properties Tab

Property NameValue
X AxisNumber
Y AxisDefault Y Axis
RendererXY Line/Shape Renderer
TypeShapes Only

Dataset Property Dataset

Date Axis Chart

Chart Customizer Property Settings

Datasets Tab

Property NameValue
DatasetsData

X-Axes Tab

Property NameValue
AxesDate
Axis LabelDate
Axis Label ColorRed

Y-Axes Tab

Property NameValue
AxesDefault Y Axis
Axis LabelValue
Axis Label ColorRed

Dataset Properties Tab

Property NameValue
DatasetsData
X AxisDate
Y AxisDefault Y Axis
RendererXY Line/Shape Renderer
TypeLines Only

Dataset Property Dataset

Category Axis Chart

Behavior

PropertyValue
Chart TypeCategory

Chart Customizer Property Settings

Datasets Tab

Property NameValue
DatasetsData

X-Axes Tab

Property NameValue
AxesCategory
Axis LabelCategory Axis
Axis Label ColorBlue

Y-Axes Tab

Property NameValue
AxesDefault Y Axis
Axis LabelValue
Axis Label ColorBlue

Dataset Properties Tab

Property NameValue
DatasetsData
X AxisCategory
Y AxisDefault Y Axis
RendererCategory Bar Renderer
TypeBar

Dataset Property Dataset

Logarithmic Axis Chart

Chart Customizer Property Settings

Datasets Tab

Property NameValue
DatasetsData

X-Axes Tab

Property NameValue
AxesLogarithmic
Axis LabelLogarithmic Axis
Axis Label ColorRed

Y-Axes Tab

Property NameValue
AxesDefault Y Axis
Axis LabelValue
Axis Label ColorRed

Dataset Properties Tab

Property NameValue
DatasetsData
X AxisLogarithmic
Y AxisDefault Y Axis
RendererXY Line/Shape Renderer
TypeLines Only

Dataset Property Dataset

Symbols Axis Chart

Chart Customizer Property Settings

Datasets Tab

Property NameValue
DatasetsData

X-Axes Tab

Property NameValue
AxesDefault Axis
Axis LabelSymbol Axis
Axis Label ColorGreen

Y-Axes Tab

Property NameValue
AxesSymbol
Axis LabelState
Axis Label ColorGreen
Symbols StringOn,Off,Auto

Dataset Properties Tab

Property NameValue
DatasetsData
X AxisDefault X Axis
Y AxisSymbol
RendererXY Line/Shape Renderer
TypeLines Only
Line Size3

Dataset Property Dataset

Elapsed Time Axis Chart

Binding Type

  • Database
  • SQL Query

Chart Customizer Property Settings

Datasets Tab

Property NameValue
DatasetData

X-Axes Tab

Property NameValue
AxesElapsed Time
Axis LabelTimestamp
Axis Label ColorRed
Tick Label ColorGreen
Upper Bound60,000
Tick Size (ms)30,000

Y-Axes Tab

Property NameValue
AxesDefault Y Axis
Axis LabelValue
Axis Label ColorRed
Tick Label ColorGreen

Dataset Properties Tab

Property NameValue
DatasetsData
X AxisElapsed
Y AxisDefault Y Axis
RendererXY Line/Shape Renderer
TypeLines Only

Dataset Property Dataset