# Complex Axis Labels



All axis types support the `onCreateLabelFormatter` callback for creating multi-line labels with custom styling. This is useful for highlighting specific values or adding additional context to axis labels.

In this example, January labels show the year in red on a second line.

```tsx
import { Svg, Rectangle } from "cx/svg";
import {
  Chart,
  TimeAxis,
  Gridlines,
  ColumnGraph,
  NumericAxis,
} 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 50 60"
        axes={{
          x: (
            <TimeAxis
              format="datetime;MMM yyyy"
              labelLineHeight={1.3}
              onCreateLabelFormatter={() => (formattedValue) => {
                let [month, year] = formattedValue.split(" ");
                if (month === "Jan")
                  return [
                    { text: month },
                    { text: year, style: { fill: "red" } },
                  ];
                return [{ text: month }];
              }}
            />
          ),
          y: { type: NumericAxis, vertical: true },
        }}
      >
        <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>
);

```

## How It Works

The `onCreateLabelFormatter` callback returns a formatter function that receives the formatted value and returns either a string or an array of text segments:

```tsx
onCreateLabelFormatter={() => (formattedValue, rawValue) => {
  // Return a string for simple labels
  return formattedValue;

  // Or return an array for multi-line/styled labels
  return [
    { text: "Line 1" },
    { text: "Line 2", style: { fill: "red" } },
  ];
}}
```

## Configuration

| Property                 | Type       | Description                                                              |
| ------------------------ | ---------- | ------------------------------------------------------------------------ |
| `onCreateLabelFormatter` | `function` | Callback that returns a formatter function for customizing axis labels.  |
| `labelLineHeight`        | `number`   | Line height multiplier for multi-line labels. Default is `1`.            |