Sparkline

About 3 min read

TwSparkline · Category: Charts

Settings

These settings are in the properties panel on the right while the widget is selected. The default value is the value the widget has when it is first added to a page.

Data

Setting	Type	Default	Description
Sparkline Type type	Selection	splinearea	Chart type. Bar uses the positive and negative bar colors; Win/Loss draws only up/down bars with the win and loss colors. Options: area Area, bar Bar, line Line, spline Spline, splinearea Spline Area, steparea Step Area, stepline Step Line, winloss Win/Loss
Win/Loss Threshold winlossThreshold	Number	0	The win/loss threshold is 0.
Process Value processValue	Text	0	Each new value is added to the line and the last 50 values are kept. The line starts empty when the page opens.

Line & Points

Setting	Type	Default	Description
Point Symbol pointSymbol	Selection	circle	Shape of the data points. Options: circle Circle, cross Cross, polygon Polygon, square Square, triangle Triangle, triangleDown Triangle Down, triangleUp Triangle Up
Line Width lineWidth	Number	2	Line thickness in pixels (default 2); empty or 0 uses 2.
Point Color pointColor	Color	#fff	Fill color of the data points.
Line Color lineColor	Color	#666	Color of the line and area.
Point Size pointSize	Number	2	Size of the data points in pixels; 0 hides them.

Markers

Setting	Type	Default	Description
First/Last Color firstLastColor	Color	#666	Color of the first and last point when Show First Last is on.
Show Min Max showMinMax	Checkbox	On	Highlights the lowest and highest point with the Min and Max colors.
Show First Last showFirstLast	Checkbox	On	Highlights the first and last point with the First/Last color.

Colors

Setting	Type	Default	Description
Bar Negative Color barNegativeColor	Color	#d7d7d7	Color of the bars below zero in the bar type.
Win Color winColor	Color	#a9a9a9	Color of the bars above the threshold in the Win/Loss type.
Min Color minColor	Color	#e8c267	Color of the lowest point when Show Min Max is on.
Bar Positive Color barPositiveColor	Color	#a9a9a9	Color of the bars above zero in the bar type.
Loss Color lossColor	Color	#d7d7d7	Color of the bars below the threshold in the Win/Loss type.
Max Color maxColor	Color	#e55253	Color of the highest point when Show Min Max is on.

Tooltip

Setting	Type	Default	Description
Tooltip Enabled tooltipEnabled	Checkbox	On	Shows the values when the pointer rests on the sparkline.

Other settings

Setting	Type	Default	Description
Enable Flashing enableFlashing	Checkbox	Off	Makes the widget blink (an opacity pulse every second). Usually bound to an alarm condition.
Log Button logButton	Checkbox	Off	At runtime shows a chart icon when hovering the widget; clicking it adds the Tags bound to the widget to the log Tag list.

Bindings

In the Bindings (Rules) section of the properties panel, a Tag can be bound to the following properties of this widget with a Direct binding. The binding types (Direct, IntRange, FloatRange, Boolean, Bit) are the same for all widgets; they are described on the Widget Reference page.

title, visible, authorization, x, y, width, height, rotation, class, foregroundColor, backgroundColor, borderColor, borderStyle, borderWidth, borderRadius, borderTopLeftRadius, borderTopRightRadius, enableFlashing, logButton, processValue, showMinMax, showFirstLast, lineWidth, tooltipEnabled, winlossThreshold, barNegativeColor, barPositiveColor, firstLastColor, lineColor, winColor, lossColor, minColor, maxColor, pointColor, pointSize, pointSymbol

The style fields of the widget can also be bound as style.<field> (e.g. style.fontSize).

Common sections

While this widget is selected, the properties panel also shows these common sections: General, Layout, Appearance, Bindings (Rules). These sections are described on the Page Editor page.