Returns true if there is nothing to draw: Start angle == end, zero ticks or labels, or all styling would be invisible.
Starting angle of ticks curve, in degrees. 0° points north.
Ending angle of ticks curve, in degrees. 0° points north.
Normalized (0-360) angle difference between startAngle
and endAngle
. Read-only.
Flag indicating if the labels should be auto-rotated to follow the drawing angle from center of gauge.
Placement.Inside
will rotate to face inward, Placement.Outside
will rotate to face outward, otherwise no auto rotateion is applied.
In the first two cases, any further labelsRotate property adjustment is applied relative to the rotated label.
Returns true
if there are any labels to be drawn.
If true
(default), scale down the overall size of the generated path (all ticks and labels together) to fit within the available canvas size if it would otherwise overflow.
Total number of major tick marks to draw along the curve. This will also determine the spacing (number of degrees) between ticks.
Length of each major tick mark, in either % or px units. Relative size is calculated based on overall image size.
Length unit for each major tick mark, either %
or px
.
Configures in which direction to draw major tick marks relative to the curve radius. Inside
will draw from curve radius to the inside of the circle,
Outside
will draw from radius towards the outside, and Center
will split the difference with each mark being centered along the radius.
Major tick marks StrokeStyle
object. Read-only.
Major tick marks stroke color.
Major tick marks stroke size and unit.
The number of minor tick marks to draw between each major tick (not a total number). This will also determine the spacing (number of degrees) between minor ticks.
Length of each minor tick mark, in either % or px units. Relative size is calculated based on overall image size.
Length unit for each minor tick mark, either %
or px
.
Configures in which direction to draw minor tick marks relative to the curve radius. Inside
will draw from curve radius to the inside of the circle,
Outside
will draw from radius towards the outside, and Center
will split the difference with each mark being centered along the radius.
Minor tick marks StrokeStyle
object. Read-only.
Minor tick marks stroke color.
Minor tick marks stroke size and unit.
Array of strings to be used as label text. Empty for no labels.
The individual label values will be distributed evenly along the curve from startAngle
to endAngle
(inclusive).
Controls label rotation. For linear marks this sets rotation from horizontal, in degrees. For circular, 0 = no rotation, 1 = rotate to inside, -1 = rotate to outside.
Expands or contracts the space between label text and the tick marks. Expressed as percent of overall image size. Default is 0
.
CSS font specification for labels text.
Letter spacing property expressed as a CSS length
value, eg: "2px" or "1em". Default is 0px
.
Labels fill BrushStyle
. Read-only.
Labels fill color.
Alignment value as two string values, first for vertical and second for horizontal. Eg. "top left" or "center middle". Setting the property can be done with either a single direction or both (separated by space or comma) in either order.
Horizontal alignment value as string. One of: 'left', 'center', 'right'
Vertical alignment value as string. One of: 'top', 'middle', 'bottom'
Optional
init: CircularTicksInitDraws the gauge marks with all styling and positioning options applied onto ctx
using rect
dimensions for scaling and alignment.
Sets element width and height property values with optional unit type specifier to use for both dimensions.
If unit
is undefined then the current unit types for each dimension remain unchanged.
Optional
unit: stringOptional
unitY: stringReturns actual pixel width of this element, either scaled to viewWidth
if width unit is %
or actual width value if it is in pixels already. If this element's width value is zero then return viewWidth
.
Returns actual pixel height of this element, either scaled to viewHeight
if height unit is %
or actual height value if it is in pixels already. If this element's height value is zero then return viewHeight
.
Returns actual pixel width and height of this element, potentially scaled to viewSize
.
See actualWidth and actualHeight for details on returned values.
A zero width/height (default) indicates to draw into the full available image area (eg. passed to render()
in rect
argument). Negative values are not allowed.
How to align within drawing area if/when width
/height
doesn't fill it completely.
Extra position offset to apply after alignment. Expressed as a percentage of overall drawing area size.
Implementation of GaugeTicks for drawing ticks/labels along a circular/curved path.