JavaScript ChartsAxis Types

Version 14.2.0

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.

In most cases, specifying an axis type is unnecessary as an appropriate axis will be inferred from the data and series type used in the chart. By default, the x-axis uses a Category, Time or Number axis based on the data type, whilst the y-axis defaults to a Number axis.

Axis types can be explicitly configured as explained below.

For an overview of how to configure axes and bind them to series, see Axis Configuration.

Category Copy Link

A category axis is used to display distinct categories or groups of data in a chart.

The category axis shows discrete categories or groups of data, unlike the Number or Time axes which use a continuous scale. For instance, in a bar chart of sales per product, the category axis shows the products as different groups, and the number axis displays the corresponding sale value for each group.

{
    axes: {
        x: {
            type: 'category',
        },
    },
}

The category axis will attempt to render an Axis Label, Grid Line and Tick for each category with even spacing.

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

Grouped Category Copy Link

A grouped category axis is similar to the regular category axis, with the additional ability to display nested categories or hierarchical groups of data.

main.ts

import {
  AgCartesianChartOptions,
  AgCharts,
  BarSeriesModule,
  GroupedCategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";

ModuleRegistry.registerModules([
  BarSeriesModule,
  GroupedCategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const options: AgCartesianChartOptions = {
  title: {
    text: "Olympic Medal Counts by Region, Country, and City",
  },
  data: getData(),
  axes: {
    x: {
      type: "grouped-category",
      depthOptions: [
        {},
        { label: { fontWeight: "bold" } },
        { label: { fontSize: 10 } },
      ],
    },
  },
  series: [
    {
      type: "bar",
      xKey: "location",
      xName: "Location",
      yKey: "gold",
      yName: "Gold",
    },
    {
      type: "bar",
      xKey: "location",
      xName: "Location",
      yKey: "silver",
      yName: "Silver",
    },
    {
      type: "bar",
      xKey: "location",
      xName: "Location",
      yKey: "bronze",
      yName: "Bronze",
    },
  ],
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

data.ts

export function getData() {
  return [
    {
      location: ["Europe", "United Kingdom", "London"],
      gold: 27,
      silver: 23,
      bronze: 17,
    },
    {
      location: ["Europe", "United Kingdom", "Manchester"],
      gold: 12,
      silver: 8,
      bronze: 10,
    },
    {
      location: ["Europe", "Germany", "Berlin"],
      gold: 17,
      silver: 10,
      bronze: 15,
    },
    {
      location: ["Asia", "China", "Beijing"],
      gold: 38,
      silver: 32,
      bronze: 18,
    },
    {
      location: ["Asia", "China", "Shanghai"],
      gold: 20,
      silver: 15,
      bronze: 12,
    },
    { location: ["Asia", "Japan", "Tokyo"], gold: 27, silver: 14, bronze: 17 },
    {
      location: ["North America", "United States", "Los Angeles"],
      gold: 46,
      silver: 37,
      bronze: 38,
    },
    {
      location: ["North America", "United States", "New York"],
      gold: 30,
      silver: 28,
      bronze: 25,
    },
    {
      location: ["North America", "Canada", "Toronto"],
      gold: 8,
      silver: 6,
      bronze: 10,
    },
    {
      location: ["South America", "Brazil", "Rio de Janeiro"],
      gold: 7,
      silver: 6,
      bronze: 6,
    },
    {
      location: ["Africa", "South Africa", "Cape Town"],
      gold: 4,
      silver: 4,
      bronze: 6,
    },
    {
      location: ["Oceania", "Australia", "Sydney"],
      gold: 17,
      silver: 7,
      bronze: 22,
    },
    {
      location: ["Oceania", "New Zealand", "Auckland"],
      gold: 10,
      silver: 5,
      bronze: 8,
    },
  ];
}

To use a grouped category axis, the xKey needs to reference an array of strings, with each string representing a level in the hierarchy.

For example, to create the above example comparing Olympic medal counts by hierarchical location, the data must include an array with the regions, countries, and cities.

{
    data: [
        { location: ['Europe', 'United Kingdom', 'London'], gold: 27, silver: 23, bronze: 17 },
        { location: ['Europe', 'United Kingdom', 'Manchester'], gold: 12, silver: 8, bronze: 10 },
        { location: ['Asia', 'China', 'Beijing'], gold: 38, silver: 32, bronze: 18 },
        { location: ['Asia', 'China', 'Shanghai'], gold: 20, silver: 15, bronze: 12 },
        { location: ['Asia', 'Japan', 'Tokyo'], gold: 27, silver: 14, bronze: 17 },
        { location: ['North America', 'United States', 'Los Angeles'], gold: 46, silver: 37, bronze: 38 },
        { location: ['North America', 'Canada', 'Toronto'], gold: 8, silver: 6, bronze: 10 },
    ],
}

The grouped category axis will render Axis Labels, Grid Lines, and Ticks for each level in the hierarchy, aligning them to visually represent the nested relationships between categories.

Ticks and labels for all levels inherit styles from the axis options by default. To style each level differently, use the depthOptions array, where each entry corresponds to a hierarchy level, starting at the leaf level.

{
    axes: {
        x: {
            type: 'grouped-category',
            depthOptions: [
                {}, // Skip depth 0 - the nearest to the axis, no unique styles.
                { label: { fontWeight: 'bold' } }, // depth 1
                { label: { fontSize: 10 } }, //depth 2
            ],
        },
    },
}

Number Copy Link

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 an Axis Interval with one item 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 intervals.

{
    axes: {
        y: {
            type: 'number',
        },
    },
}

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

Log Copy Link

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.

{
    axes: {
        y: {
            type: 'log',
            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:

{
    axes: {
        y: {
            type: 'log',
            base: 2,
        },
    },
}

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

These configurations above are demonstrated in the following example:

main.ts

import {
  AgCartesianChartOptions,
  AgCharts,
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  LogAxisModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";

const axisTypes: Record<string, AgCartesianChartOptions["axes"]> = {
  number: { y: { type: "number", label: { format: ".0f" } } },
  log: { y: { type: "log", label: { format: ".0f" } } },
  "log-base-2": { y: { type: "log", label: { format: ".0f" }, base: 2 } },
  "log-fewer-ticks": {
    y: { type: "log", interval: { minSpacing: 200 }, label: { format: ".0f" } },
  },
};
ModuleRegistry.registerModules([
  CategoryAxisModule,
  LegendModule,
  LineSeriesModule,
  LogAxisModule,
  NumberAxisModule,
]);

const options: AgCartesianChartOptions = {
  data: [
    { os: "A", share: 10 },
    { os: "B", share: 100 },
    { os: "C", share: 1000 },
  ],
  series: [
    {
      type: "line",
      xKey: "os",
      yKey: "share",
    },
  ],
  // The created axes match the checked 'Number axis' segment below, so the group opens showing the
  // option actually applied.
  axes: {
    y: { type: "number", label: { format: ".0f" } },
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

function axisTypeChange(event: Event) {
  const value = (event.target as HTMLInputElement).value;
  options.axes = axisTypes[value];

  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).axisTypeChange = axisTypeChange;
}

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.

Time Copy Link

There are three methods of displaying time along an axis.

Unit Time Axis - Each 'unit' has a dedicated band within the domain.
Ordinal Time Axis - Only provided values are shown, with missing values omitted.
Continuous Time Axis - Data is shown on a continuous scale.

The difference between a Unit Time Axis, an Ordinal Time Axis, and a continuous Continuous Time Axis is demonstrated in the following example:

main.ts

import {
  AgCartesianChartOptions,
  AgCharts,
  AnimationModule,
  BarSeriesModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  OrdinalTimeAxisModule,
  TimeAxisModule,
  UnitTimeAxisModule,
} from "ag-charts-enterprise";

ModuleRegistry.registerModules([
  AnimationModule,
  BarSeriesModule,
  CrosshairModule,
  LegendModule,
  NumberAxisModule,
  OrdinalTimeAxisModule,
  TimeAxisModule,
  UnitTimeAxisModule,
  ContextMenuModule,
]);

const options: AgCartesianChartOptions = {
  title: {
    text: "School Absences",
  },
  data: [
    { date: new Date(2024, 0, 1), value: 2 },
    { date: new Date(2024, 1, 1), value: 5 },
    { date: new Date(2024, 2, 1), value: 3 },
    { date: new Date(2024, 3, 1), value: 1 },
    { date: new Date(2024, 4, 1), value: 2 },
    { date: new Date(2024, 5, 1), value: 3 },
    { date: new Date(2024, 9, 1), value: 1 },
    { date: new Date(2024, 10, 1), value: 2 },
    { date: new Date(2024, 11, 1), value: 2 },
  ],
  series: [
    {
      type: "bar",
      xKey: "date",
      yKey: "value",
    },
  ],
  axes: {
    x: {
      type: "unit-time",
      title: { text: "Unit Time Axis" },
    },
  },
};

options.container = document.getElementById("myChart");

const chart = AgCharts.create(options);

function axisTypeChange(event: Event) {
  const axisType = (event.target as HTMLInputElement).value as
    | "unit-time"
    | "ordinal-time"
    | "time";
  switch (axisType) {
    case "unit-time":
      options.axes = {
        x: {
          type: "unit-time",
          title: { text: "Unit Time Axis" },
        },
      };
      break;
    case "ordinal-time":
      options.axes = {
        x: {
          type: "ordinal-time",
          interval: {
            step: "month",
          },
          title: { text: "Ordinal Time Axis" },
        },
      };
      break;
    case "time":
      options.axes = {
        x: {
          type: "time",
          title: { text: "Continuous Time Axis" },
        },
      };
      break;
  }

  chart.update(options);
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).axisTypeChange = axisTypeChange;
}

For more detail on time axes, see the Time Axes page.

API Reference Copy Link

Properties available on the AgCategoryAxisOptions interface.

type 'category': Axis type identifier.
interval AgAxisCategoryIntervalOptions: Configuration for the axis ticks interval.
paddingInner Ratio: 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 Ratio: 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 Ratio: 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.
bandHighlight AgBandHighlightOptions: Configuration for the axis band highlight.
bandAlignment AgBandAlignment default: 'justify': The alignment of bands when used with bar-like series with fixed widths.
skipNullBars boolean default: false: Set to `true` to prevent bars with `null`, `undefined` or missing values from taking up space in each category.
position AgCartesianAxisPosition: The position on the chart where the axis should be rendered.
crossAt AgCartesianAxisCrossAt: Value on the first perpendicular axis' domain where this axis should intersect.
crossLines AgCartesianCrossLineOptions[]: Add cross-lines or regions corresponding to data values.
thickness PixelSize: Sets the axis thickness regardless of its content.
maxThicknessRatio Ratio default: 0.3: The maximum thickness of the axis, as a ratio of the chart's width or height depending on axis direction. Used to prevent the axis from growing too large when labels or content are oversized.
title AgCartesianAxisCaptionOptions: Configuration for the title shown next to the axis.
crosshair AgCrosshairOptions: Configuration for the axis crosshair.
listeners AgAxisListeners: A map of event names to event listeners.
context ContextDefault: Context object to use in callbacks.
reverse boolean: Reverse the axis scale domain if `true`.
line AgAxisLineOptions: Configuration for the axis line.
gridLine AgAxisGridLineOptions: Configuration for the axis grid lines.
label AgBaseCartesianAxisLabelOptions: Configuration for the axis labels, shown next to the ticks.
tick AgAxisBaseTickOptions: Configuration for the axis ticks.

Properties available on the AgGroupedCategoryAxisOptions interface.

type 'grouped-category': Axis type identifier.
paddingInner Ratio: 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.
groupPaddingInner Ratio: 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.
depthOptions AgGroupedCategoryDepthOptions[]: An array of depth options, starting from the leafs.
tick AgGroupedCategoryAxisTickOptions: Configuration for the axis ticks.
bandHighlight AgBandHighlightOptions: Configuration for the axis band highlight.
maxThicknessRatio Ratio default: 0.5: The maximum thickness of the axis, as a ratio of the chart's width or height depending on axis direction. Used to prevent the axis from growing too large when labels or content are oversized.
position AgCartesianAxisPosition: The position on the chart where the axis should be rendered.
crossAt AgCartesianAxisCrossAt: Value on the first perpendicular axis' domain where this axis should intersect.
crossLines AgCartesianCrossLineOptions[]: Add cross-lines or regions corresponding to data values.
thickness PixelSize: Sets the axis thickness regardless of its content.
title AgCartesianAxisCaptionOptions: Configuration for the title shown next to the axis.
crosshair AgCrosshairOptions: Configuration for the axis crosshair.
listeners AgAxisListeners: A map of event names to event listeners.
context ContextDefault: Context object to use in callbacks.
reverse boolean: Reverse the axis scale domain if `true`.
line AgAxisLineOptions: Configuration for the axis line.
gridLine AgAxisGridLineOptions: Configuration for the axis grid lines.
label AgGroupedCategoryAxisLabelOptions: Configuration for the axis labels, shown next to the ticks.
interval AgAxisBaseIntervalOptions: Configuration for the axis ticks interval.

Properties available on the AgNumberAxisOptions interface.

type 'number': Axis type identifier.
crossLines AgCartesianCrossLineOptions[]: Add cross-lines or regions corresponding to data values.
position AgCartesianAxisPosition: The position on the chart where the axis should be rendered.
crossAt AgCartesianAxisCrossAt: Value on the first perpendicular axis' domain where this axis should intersect.
thickness PixelSize: Sets the axis thickness regardless of its content.
maxThicknessRatio Ratio default: 0.3: The maximum thickness of the axis, as a ratio of the chart's width or height depending on axis direction. Used to prevent the axis from growing too large when labels or content are oversized.
title AgCartesianAxisCaptionOptions: Configuration for the title shown next to the axis.
crosshair AgCrosshairOptions: Configuration for the axis crosshair.
listeners AgAxisListeners: A map of event names to event listeners.
context ContextDefault: Context object to use in callbacks.
reverse boolean: Reverse the axis scale domain if `true`.
line AgAxisLineOptions: Configuration for the axis line.
gridLine AgAxisGridLineOptions: Configuration for the axis grid lines.
label AgCartesianAxisLabelOptions: Configuration for the axis labels, shown next to the ticks.
tick AgAxisBaseTickOptions: Configuration for the axis ticks.
nice boolean: If `true`, the range will be rounded up to ensure nice equal spacing between the ticks. __Note:__ This does not override the `min` or `max` options.
interval AgAxisContinuousIntervalOptions: Configuration for the axis ticks interval. A unit keyword (or number), or an object describing the interval.
min AgNumericValue: The min value for the axis domain.
max AgNumericValue: The max value for the axis domain.
preferredMin AgNumericValue: The min value for the axis, unless extended by the series data or `nice` option.
preferredMax AgNumericValue: The max value for the axis, unless extended by the series data or `nice` option.

Properties available on the AgLogAxisOptions interface.

type 'log': Axis type identifier.
base number: The base of the logarithm used.
crossLines AgCartesianCrossLineOptions[]: Add cross-lines or regions corresponding to data values.
position AgCartesianAxisPosition: The position on the chart where the axis should be rendered.
crossAt AgCartesianAxisCrossAt: Value on the first perpendicular axis' domain where this axis should intersect.
thickness PixelSize: Sets the axis thickness regardless of its content.
maxThicknessRatio Ratio default: 0.3: The maximum thickness of the axis, as a ratio of the chart's width or height depending on axis direction. Used to prevent the axis from growing too large when labels or content are oversized.
title AgCartesianAxisCaptionOptions: Configuration for the title shown next to the axis.
crosshair AgCrosshairOptions: Configuration for the axis crosshair.
listeners AgAxisListeners: A map of event names to event listeners.
context ContextDefault: Context object to use in callbacks.
reverse boolean: Reverse the axis scale domain if `true`.
line AgAxisLineOptions: Configuration for the axis line.
gridLine AgAxisGridLineOptions: Configuration for the axis grid lines.
label AgCartesianAxisLabelOptions: Configuration for the axis labels, shown next to the ticks.
tick AgAxisBaseTickOptions: Configuration for the axis ticks.
nice boolean: If `true`, the range will be rounded up to ensure nice equal spacing between the ticks. __Note:__ This does not override the `min` or `max` options.
interval AgAxisContinuousIntervalOptions: Configuration for the axis ticks interval. A unit keyword (or number), or an object describing the interval.
min AgNumericValue: The min value for the axis domain.
max AgNumericValue: The max value for the axis domain.
preferredMin AgNumericValue: The min value for the axis, unless extended by the series data or `nice` option.
preferredMax AgNumericValue: The max value for the axis, unless extended by the series data or `nice` option.

Properties available on the AgUnitTimeAxisOptions interface.

type 'unit-time': Axis type identifier.
crossLines AgCartesianCrossLineOptions[]: Add cross-lines or regions corresponding to data values.
parentLevel AgTimeAxisParentLevel: Options for labels and ticks for the parent level intervals.
unit AgTimeInterval | AgTimeIntervalUnit: The size of each band. A unit keyword (or number), or an object describing the interval.
interval AgAxisDiscreteTimeIntervalOptions: Configuration for the axis ticks interval.
paddingInner Ratio: 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 Ratio: 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 Ratio: 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.
bandHighlight AgBandHighlightOptions: Configuration for the axis band highlight.
bandAlignment AgBandAlignment default: 'justify': The alignment of bands when used with bar-like series with fixed widths.
skipNullBars boolean default: false: Set to `true` to prevent bars with `null`, `undefined` or missing values from taking up space in each category.
position AgCartesianAxisPosition: The position on the chart where the axis should be rendered.
crossAt AgCartesianAxisCrossAt: Value on the first perpendicular axis' domain where this axis should intersect.
thickness PixelSize: Sets the axis thickness regardless of its content.
maxThicknessRatio Ratio default: 0.3: The maximum thickness of the axis, as a ratio of the chart's width or height depending on axis direction. Used to prevent the axis from growing too large when labels or content are oversized.
title AgCartesianAxisCaptionOptions: Configuration for the title shown next to the axis.
crosshair AgCrosshairOptions: Configuration for the axis crosshair.
listeners AgAxisListeners: A map of event names to event listeners.
context ContextDefault: Context object to use in callbacks.
reverse boolean: Reverse the axis scale domain if `true`.
line AgAxisLineOptions: Configuration for the axis line.
gridLine AgAxisGridLineOptions: Configuration for the axis grid lines.
label AgCartesianTimeAxisLabelOptions: Configuration for the axis labels, shown next to the ticks.
tick AgAxisBaseTickOptions: Configuration for the axis ticks.
min AgTimeValue: The min value for the axis domain.
max AgTimeValue: The max value for the axis domain.
preferredMin AgTimeValue: The min value for the axis, unless extended by the series data or `nice` option.
preferredMax AgTimeValue: The max value for the axis, unless extended by the series data or `nice` option.

Properties available on the AgOrdinalTimeAxisOptions interface.

type 'ordinal-time': Axis type identifier.
crossLines AgCartesianCrossLineOptions[]: Add cross-lines or regions corresponding to data values.
parentLevel AgTimeAxisParentLevel: Options for labels and ticks for the parent level intervals.
interval AgAxisDiscreteTimeIntervalOptions: Configuration for the axis ticks interval.
paddingInner Ratio: 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 Ratio: 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 Ratio: 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.
bandHighlight AgBandHighlightOptions: Configuration for the axis band highlight.
bandAlignment AgBandAlignment default: 'justify': The alignment of bands when used with bar-like series with fixed widths.
skipNullBars boolean default: false: Set to `true` to prevent bars with `null`, `undefined` or missing values from taking up space in each category.
position AgCartesianAxisPosition: The position on the chart where the axis should be rendered.
crossAt AgCartesianAxisCrossAt: Value on the first perpendicular axis' domain where this axis should intersect.
thickness PixelSize: Sets the axis thickness regardless of its content.
maxThicknessRatio Ratio default: 0.3: The maximum thickness of the axis, as a ratio of the chart's width or height depending on axis direction. Used to prevent the axis from growing too large when labels or content are oversized.
title AgCartesianAxisCaptionOptions: Configuration for the title shown next to the axis.
crosshair AgCrosshairOptions: Configuration for the axis crosshair.
listeners AgAxisListeners: A map of event names to event listeners.
context ContextDefault: Context object to use in callbacks.
reverse boolean: Reverse the axis scale domain if `true`.
line AgAxisLineOptions: Configuration for the axis line.
gridLine AgAxisGridLineOptions: Configuration for the axis grid lines.
label AgCartesianTimeAxisLabelOptions: Configuration for the axis labels, shown next to the ticks.
tick AgAxisBaseTickOptions: Configuration for the axis ticks.

Properties available on the AgTimeAxisOptions interface.

type 'time': Axis type identifier.
parentLevel AgTimeAxisParentLevel: Options for labels and ticks for the parent level intervals.
crossLines AgCartesianCrossLineOptions[]: Add cross-lines or regions corresponding to data values.
position AgCartesianAxisPosition: The position on the chart where the axis should be rendered.
crossAt AgCartesianAxisCrossAt: Value on the first perpendicular axis' domain where this axis should intersect.
thickness PixelSize: Sets the axis thickness regardless of its content.
maxThicknessRatio Ratio default: 0.3: The maximum thickness of the axis, as a ratio of the chart's width or height depending on axis direction. Used to prevent the axis from growing too large when labels or content are oversized.
title AgCartesianAxisCaptionOptions: Configuration for the title shown next to the axis.
crosshair AgCrosshairOptions: Configuration for the axis crosshair.
listeners AgAxisListeners: A map of event names to event listeners.
context ContextDefault: Context object to use in callbacks.
reverse boolean: Reverse the axis scale domain if `true`.
line AgAxisLineOptions: Configuration for the axis line.
gridLine AgAxisGridLineOptions: Configuration for the axis grid lines.
label AgCartesianTimeAxisLabelOptions: Configuration for the axis labels, shown next to the ticks.
tick AgAxisBaseTickOptions: Configuration for the axis ticks.
nice boolean: If `true`, the range will be rounded up to ensure nice equal spacing between the ticks. __Note:__ This does not override the `min` or `max` options.
interval AgAxisContinuousIntervalOptions: Configuration for the axis ticks interval. A unit keyword (or number), or an object describing the interval.
min AgTimeValue: The min value for the axis domain.
max AgTimeValue: The max value for the axis domain.
preferredMin AgTimeValue: The min value for the axis, unless extended by the series data or `nice` option.
preferredMax AgTimeValue: The max value for the axis, unless extended by the series data or `nice` option.

Getting started

AI Features

Core features

Specialised Charts

Series

Gauges

JavaScript ChartsAxis Types

Category Copy Link

Grouped Category Copy Link

Number Copy Link

Log Copy Link

Time Copy Link

API Reference Copy Link