Axis Ticks and Markers

Defining custom axis ticks and markers.

Default tick

The axis defaultTick can be populated with options that all axis ticks inherit except for minor ticks. Options for minor ticks can be set under the DefaultMinorTick property.

Major/minor ticks

By default, only major ticks are drawn on charts except for some time scale scenarios where minor ticks can activate automatically when necessary.

Minor ticks are generally less prominent and don't use a label in some default cases. Tick intervals can be specified explicitly or determined automatically. Minor ticks can be enabled by setting the minorInterval to 'auto', a numeric value, or timeSpan configuration. Tick values can also be set with a token string like '%average'. This tick will be dynamic and refresh whenever chart data updates.

Custom tick

The axis can include custom ticks at any arbitrary position along the axis scale. They are specified under the customTicks property. The items set for the customTicks property can be populated with axisTick objects that include unique tick labels and styling or simply with a list of numeric values. When an array of numeric values is provided as shown below, the resulting ticks inherit styling from the axis default tick settings.

{ customTicks: [5, 10, 15] }

By default, custom ticks are added in addition to the automatically generated ticks. Setting axis.defaultTick.visible = false causes the automatic ticks to be removed. Even though custom ticks inherit default tick options, the visibility property is not inherited.

Custom ticks can be used to replace existing ticks as well. This happens when a custom tick value matches the value of an existing tick. Only one tick is used for any specific position on the axis.

Tick label (smart) behavior

It is often not possible to show all axis tick labels without some overlaps. The chart includes logic to determine if a different labeling more allows more labels to be shown. If standard labeling is not an option, the ticks may be drawn angled at 45 degrees which will usually fit more. However, in the end the only option may be to remove some ticks. The logic for removing ticks attempts to decide which ticks are more important than others and removes the less important ones first. Custom ticks are the most important, so they are the last to be removed, but it is possible they get removed as well.

Axis markers

Axis markers can be used to highlight parts of a chart area along an axis. They can highlight a single value position, or a low, high value range. In general, the marker color property is applied to all marker visuals like label/line/fill. However, a single value line can be styled further through the marker line property, and a range marker fill can be customized using the fill property.

Axis markers include a label that is drawn near the marker in order to identify it. Specifying the label align and verticalAlign properties can help position the label where it can be seen. If necessary, setting the onTop property will render the axis markers on top of dataPoints.

Tick/Marker Values

Axis markers can have a single value indicating a specific point on an axis similar to ticks, or two values indicating a range.

Single Value

{ markers: [{ value: 5 }] }

Range Value

{ markers: [{ value: [5, 10] }] }

Category Scales

On category scales (when point names are used rather than a quantitative x value), tick and marker values refer to the index of the category where 0 is the first and length-1 is the last. Decimal point values are allowed such that .5 would render the tick or marker between the first and second category positions.

Time Scales

When time scales are used, tick and marker values can be specified as numbers, strings (parsed by Date.parse()) or JS Date objects.

Token Values

Values can also be specified using token calculations such as %average, %min, %max and so on. The series collection set of tokens is supported by the value (y) axis.

{ markers: [{ value: "%average" }] }

For a list of available tokens, see the Token Reference Tutorial.

IncludeInScale

When an axis marker or tick is not within the axis range, they will not be rendered by default. However, if the tick or marker is important to the chart, the includeInScale option can be set to true. This will force the axis to expand its range to encompass the data and this tick or marker so that they are visible on the axis. Custom axis ticks also support the includeInScale option.