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:
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:
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’ }, . . . . . }, . . . . . . . . . . }
|
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 }, . . . . . } . . . . .
}, . . . . . . . . . . }
|
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 }, . . . . . }, . . . . . }, . . . . . . . . . . . . }); |
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 } }, . . . . . }, . . . . . });
|
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.
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
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:
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.
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:
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:
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.