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.

 <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> 
 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,
  TimeAxis,
  Gridlines,
  ColumnGraph,
  NumericAxis,
} from "cx/charts";
import { createModel } from "cx/data";
import { Controller, enableCultureSensitiveFormatting } from "cx/ui";
enableCultureSensitiveFormatting(); 

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:

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