Skip to main content

​
Overview

Axes are used to plot data along the X and Y dimensions of an XY chart. amCharts 5 provides several axis types:
  • ValueAxis - For numeric values
  • DateAxis - For date/time values
  • CategoryAxis - For categorical data
  • DurationAxis - For duration values
  • GaplessDateAxis - Date axis without gaps

​
Base Axis Settings

All axes share these common settings:
​
renderer
AxisRenderer
required
A renderer object which is responsible of rendering visible axis elements.See documentation
​
start
number
The initial relative zoom start position of the axis (0 to 1).E.g. setting it to 0.1 will pre-zoom axis to 10% from the start.See documentation
​
end
number
The initial relative zoom end position of the axis (0 to 1).E.g. setting it to 0.9 will pre-zoom axis to 10% from the end.See documentation
​
maxZoomFactor
number
default:"1000"
Maximum number of times the scope of the axis could auto-zoom-in.This is to prevent axis jumping too drastically when scrolling/zooming.
​
maxZoomCount
number
Maximum number of axis elements to show at a time.The axis will not allow to be zoomed out beyond this number.See documentation
​
minZoomCount
number
Minimum number of axis elements to show at a time.The axis will not allow to be zoomed in beyond this number.See documentation
​
tooltip
Tooltip
Tooltip element to use for axis.
​
tooltipLocation
number
default:"0.5"
Indicates which relative place to snap to: 0 beginning, 0.5 middle, 1 end.
​
snapTooltip
boolean
default:"true"
Should tooltip snap to the tooltipLocation (true) or follow cursor.

​
ValueAxis

A numeric axis for plotting numeric values. 
import * as am5xy from "@amcharts/amcharts5/xy";

const yAxis = chart.yAxes.push(
  am5xy.ValueAxis.new(root, {
    min: 0,
    max: 100,
    strictMinMax: true,
    renderer: am5xy.AxisRendererY.new(root, {})
  })
);

​
ValueAxis Settings

​
min
number
Override minimum value for the axis scale.NOTE: the axis might modify the minimum value to fit into its scale better, unless strictMinMax is set to true.See documentation
​
max
number
Override maximum value for the axis scale.NOTE: the axis might modify the maximum value to fit into its scale better, unless strictMinMax is set to true.See documentation
​
strictMinMax
boolean
Force axis scale to be precisely at values as set in min and/or max.This effectively locks the axis from auto-zooming itself when chart is zoomed in.See documentation
​
strictMinMaxSelection
boolean
Force axis to auto-zoom to exact lowest and highest values from attached series’ data items within currently visible range.This is a good feature when your series is plotted from derivative values.
​
logarithmic
boolean
If set to true axis will use logarithmic scale.See documentation
​
treatZeroAs
number
Treat zero values as some other value.Useful in situations where zero would result in error, i.e. logarithmic scale.See documentation
​
extraMin
number
Relative extension to the automatically-calculated minimum value of the axis scale.E.g. 0.1 will extend the scale by 10%.See documentation
​
extraMax
number
Relative extension to the automatically-calculated maximum value of the axis scale.E.g. 0.1 will extend the scale by 10%.See documentation
​
baseValue
number
default:"0"
Base value, which indicates the threshold between “positive” and “negative” values.See documentation
​
maxPrecision
number
Maximum number of decimals to allow in axis labels.See documentation
​
numberFormat
string
Number format to use for axis labels.See documentation
​
tooltipNumberFormat
string | Intl.NumberFormatOptions
A numeric format used for numbers displayed in axis tooltip.See documentation
​
calculateTotals
boolean
If your series relies on dynamically calculated values, like value changes, percents, or total sums, set this to true.See documentation
​
syncWithAxis
ValueAxis
If set, the grid of this axis will be synced with grid of the target axis.See documentation

​
DateAxis

An axis for date/time values. 
import * as am5xy from "@amcharts/amcharts5/xy";

const xAxis = chart.xAxes.push(
  am5xy.DateAxis.new(root, {
    baseInterval: { timeUnit: "day", count: 1 },
    groupData: true,
    groupCount: 500,
    renderer: am5xy.AxisRendererX.new(root, {})
  })
);

​
DateAxis Settings

​
baseInterval
ITimeInterval
required
Indicates granularity of data.
baseInterval: { timeUnit: "day", count: 1 }
See documentation
​
groupData
boolean
default:"false"
Should axis group data items together dynamically?See documentation
​
groupCount
number
default:"500"
Maximum number of data items in the view before data grouping kicks in.See documentation
​
groupInterval
ITimeInterval
Force data item grouping to specific interval.See documentation
​
groupIntervals
Array<ITimeInterval>
A list of intervals the axis is allowed to group data items into.See documentation
​
gridIntervals
Array<ITimeInterval>
A list of intervals the axis is allowed to show grid/labels on.See documentation
​
markUnitChange
boolean
default:"true"
Display “period change” labels using different format.If set to true, will use periodChangeDateFormats instead of dateFormats for such labels, e.g. for month start.
​
dateFormats
Record<string, string | Intl.DateTimeFormatOptions>
Date formats used for intermediate labels.See documentation
​
periodChangeDateFormats
Record<string, string | Intl.DateTimeFormatOptions>
Date formats used for “period change” labels.See documentation
​
tooltipDateFormat
string | Intl.DateTimeFormatOptions
A date format to use for axis tooltip.See documentation

​
CategoryAxis

An axis for categorical data. 
import * as am5xy from "@amcharts/amcharts5/xy";

const xAxis = chart.xAxes.push(
  am5xy.CategoryAxis.new(root, {
    categoryField: "category",
    renderer: am5xy.AxisRendererX.new(root, {})
  })
);

xAxis.data.setAll([
  { category: "Category 1" },
  { category: "Category 2" },
  { category: "Category 3" }
]);

​
CategoryAxis Settings

​
categoryField
string
required
A field in data which holds categories.
​
startLocation
number
default:"0"
Relative location of where axis cell starts: 0 - beginning, 1 - end.
​
endLocation
number
default:"1"
Relative location of where axis cell ends: 0 - beginning, 1 - end.

​
Base Axis Methods

​
zoom()

public zoom(
  start: number,
  end: number,
  duration?: number,
  priority?: "start" | "end"
): Animation | undefined
Zooms the axis to relative locations. Both start and end are relative: 0 means start of the axis, 1 - end.
​
start
number
required
Relative start position (0-1)
​
end
number
required
Relative end position (0-1)
​
duration
number
Duration of the zoom animation in milliseconds
​
priority
'start' | 'end'
Which end to prioritize when adjusting zoom
Returns: Animation | undefined - Zoom animation

​
coordinateToPosition()

public coordinateToPosition(coordinate: number): number
Converts pixel coordinate to a relative position on axis.
​
coordinate
number
required
Pixel coordinate
Returns: number - Relative position (0-1)

​
toAxisPosition()

public toAxisPosition(position: number): number
Converts relative position of the plot area to relative position of the axis with zoom taken into account.
​
position
number
required
Position (0-1)
Returns: number - Relative position

​
createAxisRange()

public createAxisRange(axisDataItem: DataItem<IAxisDataItem>): DataItem
Creates and returns an axis range object. See documentation
​
axisDataItem
DataItem<IAxisDataItem>
required
Axis data item
Returns: DataItem - Axis range

​
Usage Example

import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";

const root = am5.Root.new("chartdiv");
const chart = root.container.children.push(am5xy.XYChart.new(root, {}));

// Create DateAxis
const xAxis = chart.xAxes.push(
  am5xy.DateAxis.new(root, {
    baseInterval: { timeUnit: "day", count: 1 },
    groupData: true,
    renderer: am5xy.AxisRendererX.new(root, {}),
    tooltip: am5.Tooltip.new(root, {})
  })
);

// Create ValueAxis
const yAxis = chart.yAxes.push(
  am5xy.ValueAxis.new(root, {
    min: 0,
    extraMax: 0.1,
    renderer: am5xy.AxisRendererY.new(root, {})
  })
);

// Zoom axis programmatically
yAxis.zoom(0.2, 0.8, 500);

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us