Adding Trend Points in Angular Gauge

Trend points are elements that you use to show a target value on the gauge. For example, while plotting the average customer satisfaction score for the current year, you might also want to show the average score for the last year for comparison. This average score for the last year can be shown as a trend point on the gauge.

Given below is a brief description of the attributes used to add and customize a simple trend point to the gauge:

Attribute Name

Description

startValue

It is used to specify the starting value for the trend point. For example, if you plot a trend arc from value 102 to 109, the starting value will be 102.

displayValue

It is used to display a label for the trend point. If you do not specify a label, then the data value that the trend point indicates is displayed.

valueInside

It is used to specify whether the trend point value will be rendered inside the gauge or outside it. Setting this attribute to 1 will place the value inside the gauge, setting it to 0 (default) will place it outside it.

color

It is used to specify the hex code of the color that will be used to render the trend point and its associated text, e.g. #CCCCCC.

thickness

It is used to specify the thickness of the trend point, in pixels, e.g. 5.

radius

It is used to specify the radius of the trendpoint, in pixels, e.g. 3.

dashed

If you’re showing the trend point as line, this attribute is used to specify whether you want to render the trend point as a dashed line. Setting this attribute to 1 will render the trend line as a dashed line, setting it to 0 (default) will render it as a whole line.

dashLen

It is used to specify the length of each dash, in pixels, if the trend point will be rendered as a dashed line.

dashGap

It is used to specify the gap between each dash, in pixels, if the trend point will be rendered as a dashed line.

trendValueDistance

It is used to specify the distance, in pixels, between a trend line and its corresponding value.

These attributes belong to the point object, which in turn belongs to the trendpoints object.

Showing Trend Markers

For each trend point, you can also show a triangular marker and customize it.

An angular gauge rendered with a marker for the trend point looks like this: