---
title: "Customizing the Axis in the JavaScript Chart Control"
published_at: "2015-05-22T13:52:00+00:00"
modified_at: "2019-07-26T09:47:44+00:00"
url: "https://www.syncfusion.com/blogs/post/customizing-the-axis-in-the-essential-studio-for-javascript-chart-control"
excerpt: "The Essential Studio® for JavaScript Chart control is a data visualization component for creating stunning charts. In this post, we will see how to customize the appearance of the chart axis, how to use multiple axes, and how to use..."
taxonomy_category:
  - "Company"
---

# Customizing the Axis in the JavaScript Chart Control

[Syncfusion Guest Blogger](https://www.syncfusion.com/blogs/author/syncfusion-guest-blogger)

![Image](https://www.syncfusion.com/blogs/wp-content/uploads/2018/08/customize_escontrol.png)

The **Essential Studio® for JavaScript Chart** ** control**is a data visualization component for creating stunning charts. In this post, we will see how to customize the appearance of the chart axis, how to use multiple axes, and how to use multiple layouts in this easy-to-use control. The following image describes the components of a chart axis, the axis line, tick lines, labels, and title:

![clip_image001\[7\]](https://blog.syncfusion.com/wp-content/uploads/2018/08/image-418.png "clip_image001[7]")

*Basic components of an axis*

#### Customizing the appearance of the chart axis

The Chart control is highly customizable and allows for customizing all the components of an axis. Let’s see how different components of the axis can be customized.

First, let’s compare a chart before and after customizing the components of the axis. The following image displays a chart without any customization of the axis:

![clip_image003\[7\]](https://blog.syncfusion.com/wp-content/uploads/2018/08/image-419.png "clip_image003[7]")

*Chart before customizing the axis*

The following code snippet illustrates customizing the major grid lines and axis line of primary x- and y-axes:

| [JavaScript] $(“#ChartContainer”).ejChart({ primaryXAxis: { axisLine: { width: 2, dashArray: ”, visible: true, opacity: 0.6, color: ‘green’ }, majorGridLines: { width: 2, dashArray: ”, visible: true, opacity: 0.6, color: ‘green’ }, . . . . . }, primaryYAxis:{ axisLine: { width: 2, dashArray: ”, visible: true, opacity: 0.6, color: ‘green’ }, majorGridLines: { width: 2, dashArray: ”, visible: true, opacity: 0.6, color: ‘green’ }, . . . . . }, . . . . . . . . . . } |
| --- |

![clip_image005\[6\]](https://blog.syncfusion.com/wp-content/uploads/2018/08/image-420.png "clip_image005[6]")

*Chart after customizing the grid lines and axis line*

The following code snippet illustrates customizing the color of grid bands at odd positions of the primary x-axis (positioning starts at 0):

| [JavaScript] $(“#ChartContainer”).ejChart({ primaryXAxis: { alternateGridBand: { odd: { fill: ‘pink’, opacity: 1 }, . . . . . } . . . . . }, . . . . . . . . . . } |
| --- |

![clip_image007\[6\]](https://blog.syncfusion.com/wp-content/uploads/2018/08/image-421.png "clip_image007[6]")

*Chart after setting color for primary x-axis grid bands at an odd position*

The following code snippet illustrates customizing the grid bands of the primary x-axis at even positions (positioning starts at 0):

| [JavaScript] $(“#ChartContainer”).ejChart({ primaryXAxis: { alternateGridBand: { even: { fill: ‘orange’, opacity: 1 }, . . . . . }, . . . . . }, . . . . . . . . . . . . }); |
| --- |

![clip_image009\[6\]](https://blog.syncfusion.com/wp-content/uploads/2018/08/image-422.png "clip_image009[6]")

*Chart after setting color for primary x-axis grid bands at an even position*

The following code snippet illustrates setting the color for grid bands of the primary x-axis at both odd and even positions:

| [JavaScript] $(“#ChartContainer”).ejChart({ primaryXAxis: { alternateGridBand: { odd: { fill: ‘pink’, opacity: 1 }, even: { fill: ‘orange’, opacity: 1 } }, . . . . . }, . . . . . }); |
| --- |

![clip_image011\[6\]](https://blog.syncfusion.com/wp-content/uploads/2018/08/image-423.png "clip_image011[6]")

*Chart axis with customized appearance*

#### Multiple axes

The Chart control allows us to add and customize the required number of additional or secondary axes. There are two steps in adding a secondary axis to the chart.

##### 1. Add a secondary axis to the chart axes collection

Every additional axis must be added to the secondary axes collection. The following code snippet illustrates adding an additional axis:

| [JavaScript] $(“#ChartContainer”).ejChart({ . . . . . . //Adding additional axes to the Chart axes: [ //Adding a secondary axis { //Naming the secondary axis. Use a unique name because this name will be used to bind this axis with a series name: ‘SecondaryY’, orientation: ‘vertical’, opposedPosition: true, title: { text: ‘Secondary y-axis’ }, majorGridLines: { visible:false } } ], . . . . . }); |
| --- |

The following image displays chart with a secondary axis before binding to a series

![clip_image013\[6\]](https://blog.syncfusion.com/wp-content/uploads/2018/08/image-424.png "clip_image013[6]")

*Chart with a secondary axis not bound to any series*

##### 2. Binding a series with an axis

After creating an axis, we should bind it to a series because we have created an axis with default range that does not represent any series or plots. To bind a series with vertical axis, the property **yAxisName** of the series should be assigned the value of vertical axis name. Similarly, to bind a series with horizontal axis, the property ** xAxisName**of the series should be assigned the value of the horizontal axis name. The following code snippet illustrates binding a series with an axis:

| [JavaScript] $(“#ChartContainer”).ejChart({ . . . . . //Adding additional axes to the Chart control axes: [ //Adding a secondary axis { //Naming the secondary axis. Use a unique name because this name will be used to bind this axis with a series name: ‘SecondaryY’, orientation: ‘vertical’, opposedPosition: true, title: { text: ‘Secondary y-axis’ }, majorGridLines: { visible:false } } ], series: [ //Series using primary y-axis { points: [{ x: ‘Australia’, y: 25 }, { x: ‘France’, y: 32 }, { x: ‘Italy’, y: 46 }, { x: ‘Russia’, y: 71 }, {x: ‘Japan’, y:57}] }, //Series using secondary y-axis { points: [{ x: ‘Australia’, y: 56 }, { x: ‘France’, y: 78 }, { x: ‘Italy’, y: 83 }, { x: ‘Russia’, y: 101 }, { x: ‘Japan’, y: 39 }], type: ‘line’, marker: { visible: true }, fill: “rgb(0,127,255)”, //Binding a line series to a vertical axis yAxisName: ‘SecondaryY’ } ], . . . . . }); |
| --- |

The following image displays a series bound with a secondary axis:

*![clip_image015\[6\]](https://blog.syncfusion.com/wp-content/uploads/2018/08/image-425.png "clip_image015[6]")*

*Chart with a secondary axis bound to a line series*

#### Multiple layouts

With multiple layouts, we can show more than one plot in the Chart control. For example, we can show line plot in a layout and column plot in another layout.

##### 1. Creating layouts

The **columnDefinitions** property is used for creating side-by-side layouts, and the ** rowDefinitions** property is used to create stacked layouts. The following code snippet illustrates how to create two layouts stacked with each other:

| [JavaScript] $(“#ChartContainer”).ejChart({ rowDefinitions: [ { rowHeight: 50, lineColor: ‘transparent’, unit: ‘percentage’ }, { rowHeight: 50, lineColor: ‘transparent’, unit: ‘percentage’ } ], . . . . . }); |
| --- |

The following image displays chart with two layouts, one is empty, and the other has series and axes:

![clip_image017\[6\]](https://blog.syncfusion.com/wp-content/uploads/2018/08/image-426.png "clip_image017[6]")

*Chart with an empty layout and a layout with axes and series*

##### 2. Adding series or plots to the layout

The previous code snippet will create two layouts, one with series and one with an empty layout. To add a series or plot in a layout, the property **rowIndex** of the axisfor a stacked layout or **columnIndex** of the axis for a side-by-side layout should be assigned a value representing the index of the layout. This will add the axis and the series represented by the axis into the empty layout. The index of the first layout is always zero. The following code snippet illustrates adding a series into an empty layout:

| [JavaScript] $(“#ChartContainer”).ejChart({ . . . . . //Adding additional axes to the chart axes: [ //Adding a secondary axis { //Using the rowIndex property to place the axis and its corresponding series //in the second layout rowIndex:1, name: ‘SecondaryY’, orientation: ‘vertical’, title: { text: ‘Secondary y-axis’ }, majorGridLines: { visible:false } } ], . . . . . }); |
| --- |

The following image displays a chart showing line and column plots in different layouts:

![clip_image019\[6\]](https://blog.syncfusion.com/wp-content/uploads/2018/08/image-427.png "clip_image019[6]")

*Chart with multiple layouts*

#### Conclusion

In this post, we have seen how to customize the appearance of the axis, adding secondary axes and using multiple layouts in the Essential Studio® for JavaScript Chart control. This article does not describe all the features available in this control and its axes. The Chart control is a feature-rich charting component, and you can find all the information about available features in the **Concept and Features** section of the [Online Documentation](http://help.syncfusion.com/ug/js/index.html#!Documents/conceptsandfeatures8.htm)
.

*Content contributor: Anandaraj T.*