# Basic Axis Settings in FlexChart

Learn how to configure the axis settings of Wijmo's chart components in this documentation topic

## Content


An axis is composed of several elements, such as labels, line, tick marks and titles. There are several properties available in FlexChart that let you customize these elements, for both X and Y axes. 

Chart axes have two main purposes:

* __scaling__: Axes set the range of values shown on the chart. By default, this range is calculated automatically by the chart. The ranges are used even if the axes are hidden from view.
* __context__: Axes display tickmarks and labels that help identify the values being displayed (e.g. "what country and value does this bar represent?").

By default, the FlexChart uses horizontal lines to show the x-axis and major gridlines along the y-axis. This makes charts clean and easy-to-read. When you bind to a FlexChart the X and Y axes are generated automatically. 

You can access the axis in code through the __axisX__ and __axisY__ properties. Some of the basic axis tasks are listed below.

## Setting the Axis Title

The following is an example for setting the axis title.

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

var myChart = new chart.FlexChart('#myChart');
myChart.axisX.title = 'Axis X Title';
myChart.axisY.title = 'Axis Y Title';
```

## Setting the Axis Range

When FlexChart is bound, the axes will automatically calculate the best range for the data set. Explicitly control the axis range by settting the __min__ and __max__ properties.

```JavaScript
myChart.axisY.min = 150000;
myChart.axisY.max = 160000;
```

## Reverse the Axis

By default, the X axis increments from left to right, and the Y axis increments from bottom to top. Revserse this direction for either axis by setting the __reversed__ property.

```JavaScript
myChart.axisY.reversed = true;
```

## Axis Position & Origin

By default, the X axis is positioned at the bottom of the plot, an the Y axis is positioned at the left of the plot. You can position either axis at the opposite edge of the plot by setting the __position__ property.

```JavaScript
myChart.axisX.position = 'Top';
myChart.axisY.position = 'Right';
```

Additionally, configure where either axis intersects the other axis by setting the __origin__ property. By default, the axes will intersect at the minimum values even if they are negative. Use the __origin__ property to create a quadrant chart by forcing the axes to intersect at 0.

```JavaScript
myChart.axisX.origin = 0;
myChart.axisY.origin = 0;
```

When you set __origin__, the __position__ property can be used to determine which side of the axis line the ticks and labels will display.

![Axis Origin](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/chart/chart-axis-origin.png)

## Removing the Axes

You can remove the axes completely by setting their __position__ property to 'None'. The result is the cleanest possible chart, with a high data-to-ink ratio. 

```JavaScript
myChart.axisX.position = 'None';
myChart.axisY.position = 'None';
```

The 'None' position also hides the gridlines. To hide just the axis line, title and labels but keep the gridlines, set the __axisLine__, __labels__, and __title__ properties separately.

Example:

```JavaScript
// hide the X axis line, labels and title
myChart.axisX.axisLine = false;
myChart.axisX.labels = false;
myChart.axisX.title = '';
```