# xAxis

Configure the horizontal axis type, categories, range, and formatting. For a category axis, match the categories order to the value array indices. Charts supporting multiple axes can accept an axis array.

Canonical: https://chart.syidax.com/docs/options/xAxis/

<a id="definition"></a>

## Definition

| Item | Value |
| --- | --- |
| JavaScript property | `xAxis` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `CartesianAxisInput \| ReadonlyArray<CartesianAxisInput>` |
| Default | `undefined` |
| Literals in the type | `auto`, `off` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

- [CartesianAxisInput](https://chart.syidax.com/docs/types/CartesianAxisInput.md) — Type definition

<a id="example"></a>

## Configuration example

```javascript
// Register sy-line-chart and create the element before configuring it.
chart.xAxis = {
  "kind": "category",
  "categories": [
    "Jan",
    "Feb",
    "Mar",
    "Apr",
    "May",
    "Jun",
    "Jul",
    "Aug",
    "Sep",
    "Oct",
    "Nov",
    "Dec"
  ]
};
```

- [Line · Complete examples and API](https://chart.syidax.com/docs/components/line.md)

<a id="related"></a>

## Related documentation

A property with the same name may have different types and defaults across charts. When using a direct tag, follow that chart's documentation below.

- [Shared facade and direct tags](https://chart.syidax.com/docs/concepts.md)
- [sy-line-chart](https://chart.syidax.com/docs/components/line.md#property-xAxis)
- [sy-area-chart](https://chart.syidax.com/docs/components/area.md#property-xAxis)
- [sy-column-chart](https://chart.syidax.com/docs/components/column.md#property-xAxis)
- [sy-bar-chart](https://chart.syidax.com/docs/components/bar.md#property-xAxis)
- [sy-scatter-chart](https://chart.syidax.com/docs/components/scatter.md#property-xAxis)
- [sy-bubble-chart](https://chart.syidax.com/docs/components/bubble.md#property-xAxis)
- [sy-lollipop-chart](https://chart.syidax.com/docs/components/lollipop.md#property-xAxis)
- [sy-dumbbell-chart](https://chart.syidax.com/docs/components/dumbbell.md#property-xAxis)
- [sy-variwide-chart](https://chart.syidax.com/docs/components/variwide.md#property-xAxis)
- [sy-waterfall-chart](https://chart.syidax.com/docs/components/waterfall.md#property-xAxis)
- [sy-pareto-chart](https://chart.syidax.com/docs/components/pareto.md#property-xAxis)
- [sy-histogram-chart](https://chart.syidax.com/docs/components/histogram.md#property-xAxis)
- [sy-box-plot-chart](https://chart.syidax.com/docs/components/box-plot.md#property-xAxis)
- [sy-error-bar-chart](https://chart.syidax.com/docs/components/error-bar.md#property-xAxis)
- [sy-heatmap](https://chart.syidax.com/docs/components/heatmap.md#property-xAxis)
- [sy-density-map](https://chart.syidax.com/docs/components/density-map.md#property-xAxis)
- [sy-spectrogram](https://chart.syidax.com/docs/components/spectrogram.md#property-xAxis)
- [sy-pictorial-chart](https://chart.syidax.com/docs/components/pictorial.md#property-xAxis)
- [sy-candlestick-chart](https://chart.syidax.com/docs/components/candlestick.md#property-xAxis)
- [sy-ohlc-chart](https://chart.syidax.com/docs/components/ohlc.md#property-xAxis)