Angular ChartsTime Axis

Version 14.2.0

Time axes are used to display time-based data in a chart. They can be used to show data at different levels of granularity, such as years, months, days, or even hours and minutes.

Time can be provided as a Date object, a number which is interpreted as timestamps derived from Unix time or an ISO 8601 string.

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 Time Axis is demonstrated in the following example:

app.component.ts

import { Component } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
import {
  AgCartesianChartOptions,
  AnimationModule,
  BarSeriesModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  OrdinalTimeAxisModule,
  TimeAxisModule,
  UnitTimeAxisModule,
} from "ag-charts-enterprise";
import clone from "clone";

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

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgCharts],
  template: `<div class="example-controls">
    <div class="controls-row">
        <div class="button-group" role="group" aria-label="Axis Type">
            <input type="radio" id="axis-type-unit-time" name="axis-type" value="unit-time" checked="" (change)="axisTypeChange($event)">
            <label for="axis-type-unit-time">Unit Time Axis</label>
            <input type="radio" id="axis-type-ordinal-time" name="axis-type" value="ordinal-time" (change)="axisTypeChange($event)">
            <label for="axis-type-ordinal-time">Ordinal Time Axis</label>
            <input type="radio" id="axis-type-time" name="axis-type" value="time" (change)="axisTypeChange($event)">
            <label for="axis-type-time">Continuous Time Axis</label>
        </div>
    </div>
</div>
<ag-charts
        [options]="options"
    ></ag-charts>
`,
})
export class AppComponent {
  public options;

  constructor() {
    this.options = {
      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" },
        },
      },
    };
  }

  axisTypeChange = (event: Event) => {
    const options = clone(this.options);

    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;
    }

    this.options = options;
  };
}

main.ts

// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);

Unit Time Copy Link

The Unit Time Axis will plot time values with evenly spaced bands for each unit of time in the domain, regardless of the actual time span between them or missing data.

For example, with a month unit, dates of 01 Jan and 30 Mar will appear as three evenly spaced items representing "January", "February" and "March".

{
    axes: {
        x: { type: 'unit-time' },
    },
}

The Unit Time Axis does not aggregate data, so you should ensure that each series only has one value per unit.

Custom Unit Copy Link

The Unit Time Axis assumes that data is provided with one item per unit, and will infer a unit based on the data.

For some scenarios - such as datasets with missing data points - it may be necessary to specify the unit explicitly. To explicitly set the unit, provide an AgTimeIntervalUnit string or AgTimeInterval object.

{
    axes: {
        x: {
            type: 'unit-time',
            unit: 'day', // every day
        },
    },
}

In this configuration:

unit must be one of millisecond, second, minute, hour, day, month, or year.

The axes[].unit property controls how time is bucketed for display. See Time Interval to control the spacing of ticks, grid lines, and labels.

Weekly Data Example Copy Link

The AgTimeIntervalUnit object supports advanced configuration for more complex unit requirements such as weekly data.

app.component.ts

import { Component } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
import {
  AgCartesianChartOptions,
  AnimationModule,
  BarSeriesModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  NavigatorModule,
  NumberAxisModule,
  UnitTimeAxisModule,
  ZoomModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

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

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgCharts],
  template: `<ag-charts
        [options]="options"
    ></ag-charts>
`,
})
export class AppComponent {
  public options;

  constructor() {
    this.options = {
      title: {
        text: "Influenza Cases",
      },
      subtitle: {
        text: "Recorded Data for 2024",
      },
      data: getData(),
      series: [
        {
          type: "bar",
          xKey: "date",
          xName: "Time",
          yKey: "total_cases",
          yName: "Total Cases",
          stacked: true,
        },
        {
          type: "bar",
          xKey: "date",
          xName: "Time",
          yKey: "hospitalizations",
          yName: "Hospitalizations",
          stacked: true,
        },
        {
          type: "bar",
          xKey: "date",
          xName: "Time",
          yKey: "deaths",
          yName: "Deaths",
          stacked: true,
        },
      ],
      axes: {
        x: {
          type: "unit-time",
          unit: {
            unit: "day",
            step: 7,
            epoch: new Date(2024, 0, 1),
          },
          parentLevel: {
            enabled: false,
          },
        },
      },
      zoom: {
        enabled: true,
      },
      navigator: {
        enabled: true,
      },
      initialState: { zoom: { ratioX: { start: 0.8 } } },
      tooltip: {
        mode: "shared",
      },
      formatter: {
        x(params) {
          if (
            params.type === "date" &&
            params.unit === "day" &&
            params.step === 7 &&
            params.epoch != null
          ) {
            const { value, epoch } = params;
            const weekDuration = 7 * 24 * 60 * 60 * 1000;
            const week = Math.floor(
              (value.getTime() - epoch.getTime()) / weekDuration,
            );
            return `Week ${week + 1}`;
          }
        },
      },
    };
  }
}

data.ts

export function getData() {
  return [
    {
      date: new Date(2024, 1 - 1, 1),
      total_cases: 5432,
      hospitalizations: 212,
      deaths: 11,
    },
    {
      date: new Date(2024, 1 - 1, 15),
      total_cases: 4873,
      hospitalizations: 198,
      deaths: 8,
    },
    {
      date: new Date(2024, 1 - 1, 22),
      total_cases: 5561,
      hospitalizations: 231,
      deaths: 12,
    },
    {
      date: new Date(2024, 2 - 1, 5),
      total_cases: 4684,
      hospitalizations: 209,
      deaths: 7,
    },
    {
      date: new Date(2024, 2 - 1, 12),
      total_cases: 5910,
      hospitalizations: 287,
      deaths: 13,
    },
    {
      date: new Date(2024, 3 - 1, 25),
      total_cases: 4953,
      hospitalizations: 207,
      deaths: 9,
    },
    {
      date: new Date(2024, 4 - 1, 1),
      total_cases: 4631,
      hospitalizations: 190,
      deaths: 6,
    },
    {
      date: new Date(2024, 4 - 1, 8),
      total_cases: 5470,
      hospitalizations: 260,
      deaths: 14,
    },
    {
      date: new Date(2024, 4 - 1, 22),
      total_cases: 4238,
      hospitalizations: 177,
      deaths: 8,
    },
    {
      date: new Date(2024, 4 - 1, 29),
      total_cases: 5117,
      hospitalizations: 238,
      deaths: 11,
    },
    {
      date: new Date(2024, 5 - 1, 6),
      total_cases: 4856,
      hospitalizations: 222,
      deaths: 7,
    },
    {
      date: new Date(2024, 5 - 1, 13),
      total_cases: 5610,
      hospitalizations: 273,
      deaths: 13,
    },
    {
      date: new Date(2024, 5 - 1, 20),
      total_cases: 4745,
      hospitalizations: 201,
      deaths: 9,
    },
    {
      date: new Date(2024, 6 - 1, 3),
      total_cases: 5056,
      hospitalizations: 232,
      deaths: 11,
    },
    {
      date: new Date(2024, 6 - 1, 10),
      total_cases: 4883,
      hospitalizations: 210,
      deaths: 8,
    },
    {
      date: new Date(2024, 6 - 1, 17),
      total_cases: 5407,
      hospitalizations: 259,
      deaths: 12,
    },
    {
      date: new Date(2024, 7 - 1, 15),
      total_cases: 4640,
      hospitalizations: 192,
      deaths: 8,
    },
    {
      date: new Date(2024, 7 - 1, 22),
      total_cases: 4905,
      hospitalizations: 210,
      deaths: 10,
    },
    {
      date: new Date(2024, 7 - 1, 29),
      total_cases: 5083,
      hospitalizations: 222,
      deaths: 11,
    },
    {
      date: new Date(2024, 8 - 1, 12),
      total_cases: 4756,
      hospitalizations: 195,
      deaths: 9,
    },
    {
      date: new Date(2024, 8 - 1, 19),
      total_cases: 4932,
      hospitalizations: 210,
      deaths: 8,
    },
    {
      date: new Date(2024, 9 - 1, 2),
      total_cases: 5201,
      hospitalizations: 240,
      deaths: 12,
    },
    {
      date: new Date(2024, 9 - 1, 9),
      total_cases: 5384,
      hospitalizations: 250,
      deaths: 13,
    },
    {
      date: new Date(2024, 9 - 1, 16),
      total_cases: 4990,
      hospitalizations: 225,
      deaths: 10,
    },
    {
      date: new Date(2024, 9 - 1, 30),
      total_cases: 5102,
      hospitalizations: 230,
      deaths: 9,
    },
    {
      date: new Date(2024, 10 - 1, 7),
      total_cases: 5321,
      hospitalizations: 245,
      deaths: 11,
    },
    {
      date: new Date(2024, 10 - 1, 21),
      total_cases: 5156,
      hospitalizations: 238,
      deaths: 10,
    },
    {
      date: new Date(2024, 10 - 1, 28),
      total_cases: 4870,
      hospitalizations: 215,
      deaths: 9,
    },
    {
      date: new Date(2024, 11 - 1, 4),
      total_cases: 5012,
      hospitalizations: 221,
      deaths: 8,
    },
    {
      date: new Date(2024, 11 - 1, 18),
      total_cases: 4805,
      hospitalizations: 207,
      deaths: 7,
    },
    {
      date: new Date(2024, 11 - 1, 25),
      total_cases: 4940,
      hospitalizations: 220,
      deaths: 9,
    },
    {
      date: new Date(2024, 12 - 1, 2),
      total_cases: 5073,
      hospitalizations: 234,
      deaths: 11,
    },
    {
      date: new Date(2024, 12 - 1, 16),
      total_cases: 5234,
      hospitalizations: 243,
      deaths: 12,
    },
    {
      date: new Date(2024, 12 - 1, 23),
      total_cases: 5389,
      hospitalizations: 255,
      deaths: 13,
    },
  ];
}

main.ts

// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);

{
    axes: {
        x: {
            type: 'unit-time',
            unit: {
                unit: 'day',
                step: 7, //every 7 days (weekly)
                epoch: new Date(2024, 0, 1), //start the week on Monday
            },
        },
    },
}

In this example:

step specifies the multiple of the unit to use. In this example, step: 7 combined with unit: 'day' will display one data point for any provided date within each week.
epoch is an optional Date that specifies the starting point for the unit. In this example, the week runs from Monday to Monday.
In this example, a Formatter is used to format the labels as numbered weeks of the year.

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

Ordinal Time Copy Link

Data points plotted along an Ordinal Time Axis will be arranged according to their position in time, ignoring the time intervals between them. This is unlike the Unit Time and Continuous Time Axis, which represent time with consistent intervals.

For example, if the Ordinal Time Axis is used to plot daily values but there are no data points for the weekend, values for Friday and Monday will be equally spaced, without gaps for Saturday and Sunday.

Ordinal Time axes are commonly used for financial data on the x-axis, usually placed at the bottom of a chart.

A basic Ordinal Time Axis configuration looks like this:

{
    axes: {
        x: {
            type: 'ordinal-time',
        },
    },
}

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

Continuous Time Copy Link

The time axis is similar to the number axis in the sense that it is also used to plot continuous values.

Time axes are typically used as x-axes and placed at the bottom of a chart. The simplest time axis config looks like this:

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

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

Time Intervals Copy Link

The Axis Interval of Time Axes labels, grid lines and ticks can be customised with the interval.step parameter, which should be a AgTimeInterval or AgTimeIntervalUnit.

app.component.ts

import { Component } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
import {
  AgCartesianChartOptions,
  AgUnitTimeAxisThemeOptions,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
  TimeAxisModule,
} from "ag-charts-community";
import clone from "clone";

ModuleRegistry.registerModules([
  LegendModule,
  LineSeriesModule,
  NumberAxisModule,
  TimeAxisModule,
]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgCharts],
  template: `<div class="example-controls">
    <div class="controls-row">
        <div class="button-group" role="group" aria-label="Time Interval">
            <input type="radio" id="interval-week" name="time-interval" value="week" checked="" (change)="intervalChange($event)">
            <label for="interval-week">1 Week Interval</label>
            <input type="radio" id="interval-month" name="time-interval" value="month" (change)="intervalChange($event)">
            <label for="interval-month">1 Month Interval</label>
            <input type="radio" id="interval-two-months" name="time-interval" value="two-months" (change)="intervalChange($event)">
            <label for="interval-two-months">2 Month Interval</label>
        </div>
    </div>
</div>
<ag-charts
        [options]="options"
    ></ag-charts>
`,
})
export class AppComponent {
  public options;

  constructor() {
    this.options = {
      title: {
        text: "Monthly average daily temperatures in the UK",
      },
      series: [
        {
          type: "line",
          xKey: "date",
          yKey: "temp",
        },
      ],
      axes: {
        x: {
          type: "time",
          nice: false,
          interval: {
            step: { unit: "day", step: 7, epoch: new Date("2025-01-01") },
          },
          label: {
            autoRotate: true,
          },
        },
        y: {
          type: "number",
          label: {
            format: "#{~f} °C",
          },
        },
      },
      data: [
        { date: new Date("2025-01-01"), temp: 4.2 },
        { date: new Date("2025-01-08"), temp: 4.9 },
        { date: new Date("2025-01-15"), temp: 5.1 },
        { date: new Date("2025-01-22"), temp: 6.9 },
        { date: new Date("2025-01-29"), temp: 7.2 },
        { date: new Date("2025-02-05"), temp: 7.5 },
        { date: new Date("2025-02-12"), temp: 7.9 },
        { date: new Date("2025-02-19"), temp: 8.7 },
        { date: new Date("2025-02-26"), temp: 8.8 },
        { date: new Date("2025-03-05"), temp: 9.1 },
        { date: new Date("2025-03-12"), temp: 9.2 },
        { date: new Date("2025-03-19"), temp: 9.3 },
        { date: new Date("2025-03-26"), temp: 9.5 },
        { date: new Date("2025-04-02"), temp: 9.8 },
        { date: new Date("2025-04-09"), temp: 10.2 },
        { date: new Date("2025-04-16"), temp: 10.7 },
        { date: new Date("2025-04-23"), temp: 10.8 },
        { date: new Date("2025-04-30"), temp: 11.2 },
        { date: new Date("2025-05-07"), temp: 11.3 },
      ],
    };
  }

  intervalChange = (event: Event) => {
    const options = clone(this.options);

    const axis = options.axes!.x as AgUnitTimeAxisThemeOptions;
    switch ((event.target as HTMLInputElement).value) {
      case "month":
        axis.interval!.step = "month";
        break;
      case "two-months":
        axis.interval!.step = { unit: "month", step: 2 };
        break;
      default:
        axis.interval!.step = {
          unit: "day",
          step: 7,
          epoch: new Date("2025-01-01"),
        };
        break;
    }

    this.options = options;
  };
}

main.ts

// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);

{
    interval: {
        step: 'month',
    },
}

{
    interval: {
        step: {
            unit: 'day',
            step: 7, // every 7 days (weekly)
            epoch: new Date('2024-01-01'), //start the week on a Monday
        },
    },
}

In this configuration:

unit must be one of millisecond, second, minute, hour, day, month, or year.
step is an optional number that specifies the multiple of the unit to use.
epoch is an optional Date that specifies the starting point for the interval.

The interval.step property controls the spacing of ticks, grid lines, and labels. Use a Unit Time Axis to control how time is bucketed for display.

See Time Interval for more information on the interval.step property.

Parent Levels Copy Link

The parentLevel option allows displaying labels and ticks for the parent level of the time axes. For example, if the axis is showing monthly data, the parent level would be the years. These levels are based on the data displayed, and adjust dynamically as the user zooms in and out.

It is enabled by default for the Unit Time Axis, and can be opted into for the Continuous Time Axis and Ordinal Time Axis.

app.component.ts

import { Component, ViewChild } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
import {
  AgCartesianChartOptions,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NavigatorModule,
  NumberAxisModule,
  UnitTimeAxisModule,
  ZoomModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
import clone from "clone";

ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  LegendModule,
  LineSeriesModule,
  NavigatorModule,
  NumberAxisModule,
  UnitTimeAxisModule,
  ZoomModule,
  ContextMenuModule,
]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgCharts],
  template: `<div class="example-controls">
    <div class="controls-row">
        <button (click)="zoomOut()">Zoom All Data</button>
        <button (click)="zoomMonth()">Zoom Last Month</button>
    </div>
</div>
<ag-charts
        [options]="options"
    ></ag-charts>
`,
})
export class AppComponent {
  public options;

  @ViewChild(AgCharts)
  public agCharts!: AgCharts;

  constructor() {
    this.options = {
      data: getData(800),
      series: [
        {
          type: "line",
          xKey: "date",
          yKey: "price",
          marker: {
            enabled: false,
          },
        },
      ],
      axes: {
        x: {
          type: "unit-time",
          parentLevel: {
            enabled: true,
          },
        },
      },
      zoom: {
        enabled: true,
      },
      navigator: {
        enabled: true,
      },
      initialState: {
        zoom: {
          ratioX: { start: 0.95, end: 1 },
        },
      },
    };
  }

  zoomOut = () => {
    this.agCharts.chart!.setState({
      version: "11.0.0",
      zoom: {
        ratioX: { start: 0, end: 1 },
      },
    });
  };

  zoomMonth = () => {
    this.agCharts.chart!.setState({
      version: "11.0.0",
      zoom: {
        ratioX: { start: 0.95, end: 1 },
      },
    });
  };
}

data.ts

const startPrice = 100;
const maxDailyPriceChange = 1;

function seedRandom(seed = 1337): () => number {
  return function random() {
    seed = (seed * 16807) % 2147483647;
    return (seed - 1) / 2147483646;
  };
}

export function getData(days: number) {
  let currentPrice = startPrice;
  const random = seedRandom();
  return Array.from({ length: days }, (_, i) => {
    const price = currentPrice;
    currentPrice += (random() * 2 - 1) * maxDailyPriceChange;

    const date = new Date(2024, 0, -i);

    return { date, price };
  }).reverse();
}

main.ts

// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);

{
    parentLevel: {
        enabled: true,
    },
}

In this example:

The data is shown with a 'day' unit, and the parent level of 'month' is shown in bold.
As you zoom out, the labels will change to 'month', with a parent level of 'year'.

Customisation Copy Link

Parent level labels and ticks options are inherited from the axes label and tick options, but can be customised with the parentLevel options.

app.component.ts

import { Component, ViewChild } from "@angular/core";
import { AgCharts } from "ag-charts-angular";
import {
  AgChartOptions,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NavigatorModule,
  NumberAxisModule,
  UnitTimeAxisModule,
  ZoomModule,
} from "ag-charts-enterprise";
import { getData } from "./data";
import clone from "clone";

ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  LegendModule,
  LineSeriesModule,
  NavigatorModule,
  NumberAxisModule,
  UnitTimeAxisModule,
  ZoomModule,
  ContextMenuModule,
]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgCharts],
  template: `<div class="example-controls">
    <div class="controls-row">
        <button (click)="zoomOut()">Zoom All Data</button>
        <button (click)="zoomMonth()">Zoom Last Month</button>
    </div>
</div>
<ag-charts
        [options]="options"
    ></ag-charts>
`,
})
export class AppComponent {
  public options;

  @ViewChild(AgCharts)
  public agCharts!: AgCharts;

  constructor() {
    this.options = {
      data: getData(800),
      series: [
        {
          type: "line",
          xKey: "date",
          yKey: "price",
          marker: {
            enabled: false,
          },
        },
      ],
      axes: {
        x: {
          type: "unit-time",
          label: {
            spacing: 8,
            format: {
              day: "%e",
              month: "%b",
            },
          },
          parentLevel: {
            enabled: true,
            tick: {
              width: 1,
              size: 4,
            },
            label: {
              spacing: 4,
              format: {
                month: "%e\n%b",
                year: "%b\n%Y",
              },
            },
          },
        },
      },
      zoom: {
        enabled: true,
      },
      navigator: {
        enabled: true,
      },
      initialState: {
        zoom: {
          ratioX: { start: 0.95, end: 1 },
        },
      },
    };
  }

  zoomOut = () => {
    this.agCharts.chart!.setState({
      version: "11.0.0",
      zoom: {
        ratioX: { start: 0, end: 1 },
      },
    });
  };

  zoomMonth = () => {
    this.agCharts.chart!.setState({
      version: "11.0.0",
      zoom: {
        ratioX: { start: 0.95, end: 1 },
      },
    });
  };
}

data.ts

const startPrice = 100;
const maxDailyPriceChange = 1;

function seedRandom(seed = 1337): () => number {
  return function random() {
    seed = (seed * 16807) % 2147483647;
    return (seed - 1) / 2147483646;
  };
}

export function getData(days: number) {
  let currentPrice = startPrice;
  const random = seedRandom();
  return Array.from({ length: days }, (_, i) => {
    const price = currentPrice;
    currentPrice += (random() * 2 - 1) * maxDailyPriceChange;

    const date = new Date(2024, 0, -i);

    return { date, price };
  }).reverse();
}

main.ts

// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);

{
    tick: {
        width: 0,
    },
    label: {
        format: {
            day: '%e',
            month: '%b',
        },
    },
    parentLevel: {
        enabled: true,
        tick: {
            width: 1,
        },
        label: {
            format: {
                month: '%e\n%b',
                year: '%b\n%Y',
            },
        },
    },
}

In this configuration:

The label format is set to show the day and month for the day level, and the month for the month level.
The parent level tick is given a width of 1 to show the parent level ticks.
The parent level label format is set to show the day and month on separate lines for the month level, and the month and year on separate lines for the year level.

See Axis Labels and the Formatters pages for more information on formatting labels.

API Reference Copy Link

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.

Properties available on the AgTimeInterval interface.

unit required AgTimeIntervalUnit: The base duration of the time interval.
step number: A multiplier of the `unit`. For example, a unit of `'week'` and a step of `2` would be every two weeks.
epoch Date: Defines the alignment of time interval. For example, a unit of `'week'` with an epoch date of a Monday would be every Monday.
utc boolean: Whether all dates should be in UTC, or local time.

Getting started

AI Features

Core features

Specialised Charts

Series

Gauges

Angular ChartsTime Axis

Unit Time Copy Link

Custom Unit Copy Link

Weekly Data Example Copy Link

Ordinal Time Copy Link

Continuous Time Copy Link

Time Intervals Copy Link

Parent Levels Copy Link

Customisation Copy Link

API Reference Copy Link