# Axis Labels in FlexChart

Learn how to customize the axis labels of Wijmo's chart components in this documentation topic

## Content

Use the __axisX__ and __axisY__ properties to configure the axis label rotation, format, and alignment.

## Rotating the Axis Labels
The labels along the X axis are automatically rotated to avoid collisions. If you want to prevent that, set the __labelAngle__ property to a number 0-360 (degrees). Use negative values to rotate the labels counter-clockwise.
```JavaScript
// rotate axis X labels by 45 degrees clockwise
myChart.axisX.labelAngle = 45;
```
## Format the Axis Labels
Use the __format__ property to specify the format string applied to axis labels. The format string is based on the Globalization features found in the core guide (see the __Globalize__ class).

In this sample, we set the format of the Y axis labels to 'n0,', which scales the values to show thousands instead of the raw values. This is done by Wijmo's __Globalize__ class, which takes the current culture into account.

```JavaScript
import * as chart from '@mescius/wijmo.chart';

// create the chart with formatted Y axis
var myChart = new chart.FlexChart('#myChart', {
    axisY: {
        format: 'n0,',
        title: 'US$ (thousands)'
        }
  });
```
![Axis Label Format](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/chart/chart-axis-label-format.png)

The __format__ property also accepts date & time format strings.
```JavaScript
myChart.axisX.format = 'MMM dd';
```

## Label Alignment & Padding
By default, the labels are centered on the tick mark with 5 px padding between. Adjust the alignment and padding by setting the __labelAlign__ and __labelPadding__ properties.

```JavaScript
myChart.axisX.labelAlign = 'left'; // left, right, center
myChart.axisX.labelPadding = 10;
myChart.axisY.labelAlign = 'top'; // top, bottom, center
myChart.axisY.labelPadding = 10;
```

## Custom Axis Labels
The Axis class has an __itemFormatter__ property that allows you to customize the content and appearance of specific labels along the axes.

If specified, the __itemFormatter__ function takes two parameters:
1. __engine__: The IRenderEngine object used for rendering the labels.
2. __label__: An object that represents the label and has these properties: 
    * __value__: The value that the label represents.
    * __text__: The text content of the label (usually the formatted value).
    * __pos__: The position where the label will be rendered, in control coordinates.
    * __cls__: A CSS class to be applied to the label element.

Example:
```JavaScript
import * as chart from '@mescius/wijmo.chart';

// create the chart with axis itemFormatter
var myChart = new chart.FlexChart('#myChart', {
    axisY: {
        format: 'n0,',
        title: 'US$ (thousands)',
        itemFormatter: function(engine, label) {
            if (label.val >= 4000){
                label.cls = 'large-value';
                }
                return label;
                }
    }
  });
```
![Axis Custom Label](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/chart/chart-axis-custom-label.png)