There are numerous options that define the ticks that are displayed on the axis. Most of the properties have some default values, which can be overwritten, but there are some restrictions over what the tick values can be. 

Let’s look at the most basic example and focus on the yAxis:

When there is no configuration specified, the extremes and ticks are calculated in such a way that all values should fit inside the chart. But even though the minimum data value is 2, and the maximum data value is 16, the extremes of the yAxis are 0-20. This happens because the tick interval is calculated so that the interval is the round value, e.g. 1, 2, 5, 10, 20, 50, 100, etc. and minute, hour, month etc. on the datetime axis. By default, yAxis will start and end on a tick. This could be changed through endOnTick and startOnTick options.

endOnTick and startOnTick even overwrite the min and max values that are set through the API ( and this makes the axis’ ticks extend to the nearest tick so that the min and max value of the axis are first and the last tick. Here is how the charts look like with and without those options defined: 

Here are some of the most important API options that allow you to control how the tick values are calculated: 

  • tickInterval - this option allows you to set the interval between the points to a fixed number 

  • tickPixelInterval - another property that enables you to change the default tick position, but this time in respect to the actual distance between the ticks on the screen. As you can see on the example below, there are two charts with the same options, but different widths and the tickPixelInterval distributes the values differently on the axis, but one rule still holds: the tick values are still calculated to be the round values: 

  • tickPositions - this property lets you set the tick positions to exact values. The property accepts the array of values, which overwrites all of the options above: 

  • tickPositioner - the final option that lets you modify the values of the ticks. This property is a callback function, which returns the array of values similar to the tickPositions array. In the example below, there is a function, which returns the values with increasing differences between them: 

Here is the full list of all options, that affect the tick position or placement: 

In case something is still unclear (in the API property description, behaviour, or even this article) don’t hesitate to reach out to us through one of our support channels.