Customizing the Axis in the Essential Studio for JavaScript Chart Control

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]

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]

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]

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]

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]

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]

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]

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]

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]

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 axis for 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]

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.

Content contributor: Anandaraj T.

Comments (1) -

  • j.nord
    May 23, 2015

    you make a very good job. We use the chart and had change the names of the y-axis. Perfect!

Pingbacks and trackbacks (1)+

Loading