# TimeAxis

```ts
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.

```tsx
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();

interface Model {
  data: { date: Date; value: number }[];
}

const m = createModel<Model>();

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

export default (
  <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>
);

```

## 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.                    |