This section explains what chart axes are, how to configure and style them, and which axis type to use in which situation.
A chart uses axes to plot data such as categories and values by converting them to screen coordinates.
Since any point on the screen is an
(x, y) pair of coordinates, a chart needs two orthogonal
axes to plot the data — a horizontal axis to determine the
x position of a point and
a vertical axis to determine the
y position. Axes also show ticks, labels and grid lines to help the
user navigate a chart.
The charting library supports three axis types:
'left'. Just like with series, the axes can be specified by setting the corresponding
axesarray property of a chart.
The category axis is meant to be used with relatively small datasets of discrete values or categories, such as sales per product, person or quarter, where product, person and quarter are categories.
The category axis is used as the x-axis by default, positioned at the bottom of a chart.
The simplest category axis config looks like this:
The number axis is meant to be used as a value axis. While categories are spaced out evenly, the distance between values depends on their magnitude.
Instead of using one tick per value, the number axis will determine the range of all values, round it up and try to segment the rounded range with 10 evenly spaced ticks (unless you configure it differently).
The number axis is used as the y-axis by default, positioned to the left a chart.
Here's the simplest number axis config:
The time axis is similar to the number axis in the sense that it is also used to plot continuous values. The time
axis can even be used with numeric data (in addition to
Date objects), but the numbers will be
interpreted as Unix timestamps. The time axis differs from the number axis in tick segmentation and label formatting.
For example, you could choose to place a tick every 5 minutes, every month, or every Friday.
The time axis also supports specifier strings to control the way time values are presented as labels. For example,
%H:%M:%S specifier string will instruct the axis to format a time value like
new Date('Tue Feb 04 2020 15:08:03') or
'15:08:03'. Time axes are typically used as x-axes and placed at the bottom
of a chart. The simplest time axis config looks like this:
Sometimes it may not be obvious what a chart's dimension represents. For example, you might see numbers on a chart's axis and not be able to tell if they're millimetres, percentages, dollars, or something else! It can also be helpful to provide extra information. For example, category axis labels can clearly show people's names, but it might be worth knowing that they are a company's best performing sales people.
Luckily, an axis can have a title just like a chart. In the example below we can use axis titles to point out that:
- the horizontal dimension shows desktop operating systems
- the vertical dimension shows their percentage market share
Please see the API reference for axis title styling options like font and colour.
Example: Axis Title
Category axes show a tick for every category. Number and time axes try to segment the whole range into a certain number of intervals (10 by default, giving 11 ticks in total).
color of chart axis ticks
can be configured as explained in the API reference
below. These configs apply to all axis types.
With number and time axes you can additionally set the
In number axes the
countmeans the desired number of ticks for the axis to use. Note that this value only serves as a hint and doesn't guarantee that this number of ticks is going to be used.
In time axes the
countproperty can be set to a time interval, for example
agCharts.time.month, to make an axis show a tick every month.
The example below demonstrates how the
count property of the number axis
can be used to reduce or increase the amount of ticks.
Example: Axis Ticks
The axis renders a label next to every tick to show the tick's value. Chart axis labels
support the same font and colour options as the axis title. Additionally, the distance
of the labels from the ticks and their rotation can be configured via the
rotation properties respectively.
A label formatter function can be used to change the value displayed in the label. It's a handy feature when you need to show units next to values or format number values to a certain precision, for example.
A label formatter function receives a single
params object which contains:
- the raw
valueof the label (without the default formatting applied)
indexof the label in the data array
- the number of
fractionDigits, if the value is a number
- the default label
formatter, if the axis is a time axis
Example: Label Formatter
For example, to add
'%' units next to number values, you can use the following
Example: Time Label Format
label config of the bottom axis in the example below uses the
specifier string for the
format property to format dates as the abbreviated
name of the month followed by the full year.
Notice that the
label.format property only affects label formatting but not segmentation.
The fact that axis labels were configured to show the name of the month and the year
doesn't mean that the axis will show a tick every month. To ensure that it does, we also
tick.count config to use the
Chart axes feature grid lines by default. Grid lines extend from axis ticks on the other side of the axis into the series area, so that it's easy to trace a series item such as a marker to a corresponding tick/label.
Grid lines have the same stroke width as ticks.
Grid lines of each axis can be styled individually via the
The config takes an array of objects with two properties:
stroke: colour string in hex, named, rgb, or rgba format.
lineDash: an array of numbers that specify distances to alternately draw a line and a gap. If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example,
[5, 15, 25]will become
[5, 15, 25, 5, 15, 25]. If the array is empty, the grid lines will be solid without any dashes.
gridStylearray is alternately applied to the grid lines of the axis.
Example: Grid Lines
|The type of the axis.|
|The position on the chart where the axis should be rendered.|
|The rotation of the axis in degrees.|
|Configuration for the title shown next to the axis. See title for more details about this configuration object.|
|Configuration for the axis line. See line for more details about this configuration object.|
|Configuration for the axis ticks. See tick for more details about this configuration object.|
|Configuration for the axis labels, shown next to the ticks. See label for more details about this configuration object.|
|Configuration of the lines used to form the grid in the chart area. See gridStyle for more details about this configuration object.|
Configuration for the title shown next to the axis.
|Whether or not the axis title should be shown.|
|The text to show in the axis title.|
|The colour to use for the axis title.|
|The font style to use for the axis title.|
|The font weight to use for the axis title.|
|The font size in pixels to use for the axis title.|
|The font family to use for the axis title.|
Configuration for the axis line.
|The width in pixels of the axis line.|
|The colour of the axis line.|
Configuration for the axis ticks.
|The width in pixels of the axis ticks (and corresponding grid line).|
|The length in pixels of the axis ticks.|
|The colour of the axis ticks.|
|A hint of how many ticks to use across an axis. The axis is not guaranteed to use exactly this number of ticks, but will try to use a number of ticks that is close to the number given.|
Configuration for the axis labels, shown next to the ticks.
|The font style to use for the labels.|
|The font weight to use for the labels.|
|The font size in pixels to use for the labels.|
|The font family to use for the labels.|
|The colour to use for the labels.|
|Padding in pixels between the axis label and the tick.|
|The rotation of the axis labels in degrees.|
|Format string used when rendering labels for time axes. For more information on the structure of the string, click here.|
|Function used to render axis labels. If |
Configuration of the lines used to form the grid in the chart area.
|The colour of the grid line.|
|Defines how the gridlines are rendered. Every number in the array specifies the length in pixels of alternating dashes and gaps. For example, |