Skip to main content
Version: 8.1

Vision - Sparkline Chart

Component Palette Icon:

Description

The sparkline chart is a minimalistic chart component that displays a line-chart history for a single datapoint. Sparklines were invented by Edward Tufte as a way to show a great deal of contextual information in a very small amount of space. Sparklines are typically used to display the recent history (up to current time) of a datapoint so that the viewer can quickly discern the recent trend of a datapoint.

To use a sparkline, bind its Data property either to a Tag Historian realtime query, or to a database query. There should be two columns in this dataset: the first one a date column, the second a number. Each row will become a datapoint on the chart, and the dataset must be sorted by time in ascending order.

Instead of using axes to convey scale, the sparkline can display a band of color across the back of the chart which indicates the desired operating range of the datapoint. In this way, it is instantly obvious when a value is in its expected range, above that range, or below. The sparkline automatically configures its internal axes based on the data given to it. To give it a fixed range, fill in the Range High and Range Low properties.

Properties

NameDescriptionProperty TypeScriptingCategory
Background ColorThe background color of the component. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector.Color.backgroundAppearance
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.
Border.borderCommon
Border InsetThe amount of space to inset the chart inside its border.double.borderInsetAppearance
Chart MaxThe value that corresponds to the upper edge of the chart. (Read only. Usable in bindings and scripting.)Double.chartMaxUncategorized
Chart MinThe value that corresponds to the lower edge of the chart. (Read only. Usable in bindings and scripting.)Double.chartMinUncategorized
CursorThe mouse cursor to use when hovering over this component. Options are: Default, Crosshair, Text, Wait, Hand, Move, SW Resize, or SE Resize.int.cursorCodeCommon
DataThe history data to draw in the sparkline chart.Dataset.dataData
Desired HighThe high value of the desired operating range. If left blank (null), no desired range band will be shown.Double.desiredHiData
Desired LowThe low value of the desired operating range. If left blank (null), no desired range band will be shown.Double.desiredLoData
Desired Range ColorThe color of the desired operating range band. Only used if the desired operating range is configured. See Color Selector.Color.desiredRangeColorAppearance
First Marker ColorThe color of the first value marker. See Color Selector.Color.firstMarkerColorMarkers
First Marker SizeThe size of the first value marker.double.firstMarkerSizeMarkers
First Marker StyleThe style of the first value marker.int.firstMarkerStyleMarkers
First ValueThe first (oldest) value in the dataset. (Read only. Usable in bindings and scripting.)Double.firstValueUncategorized
High Marker ColorThe color of the high value marker. See Color Selector.Color.hiMarkerColorMarkers
High Marker SizeThe size of the high value marker.double.hiMarkerSizeMarkers
High Marker StyleThe style of the high value marker.int.hiMarkerStyleMarkers
Last Marker ColorThe color of the last value marker. See Color Selector.Color.lastMarkerColorMarkers
Last Marker SizeThe size of the last value marker.double.lastMarkerSizeMarkers
Last Marker StyleThe style of the last value marker.int.lastMarkerStyleMarkers
Last ValueThe last (most recent) value in the dataset. (Read only. Usable in bindings and scripting.)Double.lastValueUncategorized
Line ColorThe color of the sparkline. See Color Selector.Color.foregroundAppearance
Line WidthThe width of the sparkline.float.lineWidthAppearance
Low Marker ColorThe color of the low value marker. See Color Selector.Color.loMarkerColorMarkers
Low Marker SizeThe size of the low value marker.double.loMarkerSizeMarkers
Low Marker StyleThe style of the low value marker.int.loMarkerStyleMarkers
Max ValueThe largest value in the dataset. (Read only. Usable in bindings and scripting.)Double.maxValueUncategorized
Min ValueThe smallest value in the dataset. (Read only. Usable in bindings and scripting.)Double.minValueUncategorized
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
QualityThe data quality code for any Tag bindings on this component.int.qualityData
Range HighA fixed value for the upper edge of the chart. If left blank (null), the upper range will be calculated automatically.Double.rangeHiData
Range LowA fixed value for the lower edge of the chart. If left blank (null), the lower range will be calculated automatically.Double.rangeLoData
StylesContains the component's styles.Dataset.stylesAppearance
VisibleIf disabled, the component will be hidden.boolean.visibleCommon

Scripting

Component Functions

This component does not have component functions associated with it.

Extension Functions

This component does not have extension functions associated with it.

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

Customizers

Examples

Sparkline Chart with Low and High Limits

Property NameValue
Desired Range Color184,218,255
Range High100
Range Low0
Desired High75
Desired Low40