Vue ChartsAxis Types

The horizontal (X) and vertical (Y) lines in cartesian charts are referred to as chart axes, and they serve to illustrate the relationships between data points on the graph. This section discusses the different axis types.

Number

A number axis is used to display continuous numerical values in a chart.

The number axis displays continuous numerical values, unlike the Category axis which displays discrete categories or groups of data. This means that while categories are spaced out evenly, the distance between values in a number axis will depend on their magnitude.

Instead of using one Axis Tick per value, the number axis will determine the range of all values, round it up and try to segment the rounded range with evenly spaced ticks.

If no axes are supplied, a number axis will be used as the y-axis by default. However, it can also be explicitly configured as shown below:

axes: [
    {
        type: 'number',
        position: 'left',
    },
]

For a full list of configuration options see Number Axis Options.

Time

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 Javascript 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, the %H:%M:%S specifier string will instruct the axis to format a time value like new Date('Mon Apr 17 2023 12:43:17') or 1681735397000 as '12:43:17'. Time axes are typically used as x-axes and placed at the bottom of a chart. The simplest time axis config looks like this:

{
    type: 'time',
    position: 'bottom'
}

For a full list of configuration options see Time Axis Options.

Log

If the range of values is very wide, the log axis can be used instead of the number axis. For example, because the number axis uses a linear scale, same changes in magnitude result in the same pixel distance.

The log axis uses a log scale, where same percentage changes in magnitude result in the same pixel distance. In other words, the pixel distance between 10 and 100, and 100 and 1000 will be the same because both ranges represent the same percentage increase. Whereas, if the number axis was used, the second distance would be 10 times larger than the first.

The above property of the log axis can also be useful in financial charts. For example, if your rate of return on an investment stays consistent over time, the investment value chart will look like a straight line.

By default, if the data domain has 5 or more orders of magnitude, the log axis attempts to render 5 ticks. Otherwise, 10 ticks (the logarithm base) is rendered per order of magnitude. For example a data domain of [1, 100] with 2 orders of magnitude, will show 1, 2, 3, 4,5, 6, 7, 8, 9, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100.

Depending on the data domain and chart size, using a larger value for the tick: { minSpacing: xxx } config might be necessary to reduce the number of ticks.

{
    type: 'log',
    position: 'left',
    tick: {
      minSpacing: 200,
    }
}

The log axis uses the common logarithm (base 10) by default. The base config allows you to change the base to any number you like, for example Math.E for natural or 2 for binary logarithms:

{
    type: 'log',
    position: 'left',
    base: 2
}

For a full list of configuration options see Log Axis Options.

These configurations above are demonstrated in the following example:

The domain of a log axis should be strictly positive or strictly negative (because there's no power you can raise a number to that will yield zero). For that reason, any non-conforming domain will be clipped to conformity. For example, [0, 10] will be clipped to [1, 10]. If the data domain crosses 0, for example [-10, 5], no data will be rendered. It is often desirable to set the min or max property of the axis manually. In this case it can be max: -1.

API Reference

Category Axis Options

type Type'category'	Axis type identifier.
paddingInner TypeRatio Default0.2	The size of the gap between the categories as a proportion, between 0 and 1. This value is a fraction of the “step”, which is the interval between the start of a band and the start of the next band.
paddingOuter TypeRatio Default0.3	The padding on the outside i.e. left and right of the first and last category. In association with `paddingInner`, this value can be between 0 and 1.
groupPaddingInner TypeRatio Default0.2	This property is for grouped column/bar series plotted on a category axis. It is a proportion between 0 and 1 which determines the size of the gap between the bars or columns within a single group along the axis.
tick TypeAgAxisCategoryTickOptions	Configuration for the axis ticks.
position TypeAgCartesianAxisPosition	The position on the chart where the axis should be rendered.
crossLines TypeAgCrossLineOptions[]	Add cross lines or regions corresponding to data values.
thickness TypePixelSize	If set to a non-zero value, the axis will have the specified thickness regardless of label size.
title TypeAgAxisCaptionOptions	Configuration for the title shown next to the axis.
line TypeAgAxisLineOptions	Configuration for the axis line.
label TypeAgAxisLabelOptions	Configuration for the axis labels, shown next to the ticks.
gridStyle TypeAgAxisGridStyle[]	Configuration of the lines used to form the grid in the chart area.

Number Axis Options

type Type'number'	Axis type identifier.
nice Typeboolean Default	If 'true', the range will be rounded up to ensure nice equal spacing between the ticks.
min Typenumber	User override for the automatically determined min value (based on series data).
max Typenumber	User override for the automatically determined max value (based on series data).
tick TypeAgAxisNumberTickOptions	Configuration for the axis ticks.
position TypeAgCartesianAxisPosition	The position on the chart where the axis should be rendered.
crossLines TypeAgCrossLineOptions[]	Add cross lines or regions corresponding to data values.
thickness TypePixelSize	If set to a non-zero value, the axis will have the specified thickness regardless of label size.
title TypeAgAxisCaptionOptions	Configuration for the title shown next to the axis.
line TypeAgAxisLineOptions	Configuration for the axis line.
label TypeAgAxisLabelOptions	Configuration for the axis labels, shown next to the ticks.
gridStyle TypeAgAxisGridStyle[]	Configuration of the lines used to form the grid in the chart area.

Time Axis Options

type Type'time'	Axis type identifier.
nice Typeboolean Default	If 'true', the range will be rounded up to ensure nice equal spacing between the ticks.
tick TypeAgAxisTimeTickOptions	Configuration for the axis ticks.
min TypeDate \| number	User override for the automatically determined min value (based on series data).
max TypeDate \| number	User override for the automatically determined max value (based on series data).
position TypeAgCartesianAxisPosition	The position on the chart where the axis should be rendered.
crossLines TypeAgCrossLineOptions[]	Add cross lines or regions corresponding to data values.
thickness TypePixelSize	If set to a non-zero value, the axis will have the specified thickness regardless of label size.
title TypeAgAxisCaptionOptions	Configuration for the title shown next to the axis.
line TypeAgAxisLineOptions	Configuration for the axis line.
label TypeAgAxisLabelOptions	Configuration for the axis labels, shown next to the ticks.
gridStyle TypeAgAxisGridStyle[]	Configuration of the lines used to form the grid in the chart area.

Log Axis Options

type Type'log'	Axis type identifier.
nice Typeboolean Default	If 'true', the range will be rounded up to ensure nice equal spacing between the ticks.
min Typenumber	User override for the automatically determined min value (based on series data). This value can be any non-zero number less than the configured `max` value.
max Typenumber	User override for the automatically determined max value (based on series data). This value can be any non-zero number more than the configured `min` value.
base Typenumber Default10	The base of the logarithm used.
tick TypeAgAxisNumberTickOptions	Configuration for the axis ticks.
position TypeAgCartesianAxisPosition	The position on the chart where the axis should be rendered.
crossLines TypeAgCrossLineOptions[]	Add cross lines or regions corresponding to data values.
thickness TypePixelSize	If set to a non-zero value, the axis will have the specified thickness regardless of label size.
title TypeAgAxisCaptionOptions	Configuration for the title shown next to the axis.
line TypeAgAxisLineOptions	Configuration for the axis line.
label TypeAgAxisLabelOptions	Configuration for the axis labels, shown next to the ticks.
gridStyle TypeAgAxisGridStyle[]	Configuration of the lines used to form the grid in the chart area.

Next Up

Continue to the next section to learn about the Axis Ticks.

Category

Number

Time

Log

API Reference

Category Axis Options

type

paddingInner

paddingOuter

groupPaddingInner

tick

position

crossLines

thickness

title

line

label

gridStyle

Number Axis Options

type

nice

min

max

tick

position

crossLines

thickness

title

line

label

gridStyle

Time Axis Options

type

nice

tick

min

max

position

crossLines

thickness

title

line

label

gridStyle

Log Axis Options

type

nice

min

max

base

tick

position

crossLines

thickness

title

line

label

gridStyle

Next Up