TimeAxis

import { TimeAxis } from 'cx/charts';

The TimeAxis component maps date/time data along the horizontal or vertical axis of a chart. It automatically selects appropriate tick intervals and label formats based on the time range being displayed.

This example shows monthly data over two years using a column graph. The axis automatically formats labels to show months and years.

 <div controller={PageController}>
  <Svg style="width: 500px; height: 300px; border: 1px dashed #ddd">
    <Chart
      margin="60 20 40 60"
      axes={{
        x: <TimeAxis />,
        y: <NumericAxis vertical />,
      }}
    >
      <Rectangle fill="white" />
      <Gridlines />
      <ColumnGraph
        data={m.data}
        size={30 * 24 * 60 * 60 * 1000}
        offset={15 * 24 * 60 * 60 * 1000}
        xField="date"
        yField="value"
        colorIndex={0}
      />
    </Chart>
  </Svg>
</div> 
 class PageController extends Controller {
  onInit() {
    this.store.set(
      m.data,
      Array.from({ length: 24 }, (_, i) => ({
        date: new Date(2023, i, 1),
        value: Math.round(Math.random() * 1000),
      })),
    );
  }
} 
 interface Model {
  data: { date: Date; value: number }[];
}

const m = createModel<Model>(); 
 import { Svg, Rectangle } from "cx/svg";
import {
  Chart,
  NumericAxis,
  TimeAxis,
  Gridlines,
  ColumnGraph,
} from "cx/charts";
import { createModel } from "cx/data";
import { Controller, enableCultureSensitiveFormatting } from "cx/ui";
enableCultureSensitiveFormatting(); 

Configuration

Property	Type	Description
`min`	`date`	Minimum value.
`max`	`date`	Maximum value.
`vertical`	`boolean`	Set to `true` for a vertical (Y) axis.
`secondary`	`boolean`	Set to `true` to position the axis on the opposite side.
`inverted`	`boolean`	Set to `true` to invert the axis direction.
`snapToTicks`	`number`	Range alignment: `0` = lowest ticks (default), `1` = medium ticks, `2` = major ticks.
`format`	`string`	Label format override. If not set, format is selected based on the time range.
`deadZone`	`number`	Size of a zone reserved for labels at both ends of the axis.
`upperDeadZone`	`number`	Size of a zone reserved for labels near the upper end of the axis.
`lowerDeadZone`	`number`	Size of a zone reserved for labels near the lower end of the axis.