Axis customization in JavaScript Chart control
18 Nov 201824 minutes to read
Axis Crossing
An axis can be positioned dynamically within the chart area using the crossesAt and crossesInAxis properties. The crossesAt property specifies the value (date-time, numeric, or logarithmic) at which the axis line intersects another axis, while the crossesInAxis property defines the name of the axis with which the current axis should intersect. This customization is useful for emphasizing specific reference points or thresholds in the chart.
var stripData = [{x: 1, y: 20},{x: 2, y: 22},{x: 3, y: 0},{x: 4, y: 12},{x: 5, y: 5},
{x: 6, y: 15},{x: 7, y: 6},{x: 8, y: 12},{x: 9, y: 34},{x: 10, y: 7}];
var chart = new ej.charts.Chart({
primaryXAxis: {
crossesAt : 5
},
series:[{
dataSource: stripData,
xName: 'x', yName: 'y',
type: 'Column'
}]
}, '#element');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Title
A title can be added to an axis using the title property. Axis titles provide context and help users quickly understand the data represented along the axis.
var chartData = [
{ country: "USA", gold: 50, silver: 70, bronze: 45 },
{ country: "China", gold: 40, silver: 60, bronze: 55 },
{ country: "Japan", gold: 70, silver: 60, bronze: 50 },
{ country: "Australia", gold: 60, silver: 56, bronze: 40 },
{ country: "France", gold: 50, silver: 45, bronze: 35 },
{ country: "Germany", gold: 40, silver: 30, bronze: 22 },
{ country: "Italy", gold: 40, silver: 35, bronze: 37 },
{ country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
valueType: 'Category',
title: 'Countries'
},
primaryYAxis: {
minimum: 0, maximum: 80,
interval: 20, title: 'Medals',
labelFormat: '${value}K',
//Axis title text style
titleStyle: {
size: '16px', color: 'grey',
fontFamily : 'Segoe UI', fontWeight : 'bold'
}
},
series:[{
dataSource: chartData,
xName: 'country', yName: 'gold',
name: 'Gold', type: 'Column'
}, {
dataSource: chartData,
xName: 'country', yName: 'silver',
name: 'Silver', type: 'Column'
}, {
dataSource: chartData,
xName: 'country', yName: 'bronze',
name: 'Bronze', type: 'Column'
}],
title: 'Olympic Medals'
}, '#element');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Title Rotation
The orientation of the axis title can be adjusted using the titleRotation property. This property supports rotation values from 0 to 360 degrees, allowing better alignment based on the chart layout and available space.
var chartData = [
{ country: "USA", gold: 50, silver: 70, bronze: 45 },
{ country: "China", gold: 40, silver: 60, bronze: 55 },
{ country: "Japan", gold: 70, silver: 60, bronze: 50 },
{ country: "Australia", gold: 60, silver: 56, bronze: 40 },
{ country: "France", gold: 50, silver: 45, bronze: 35 },
{ country: "Germany", gold: 40, silver: 30, bronze: 22 },
{ country: "Italy", gold: 40, silver: 35, bronze: 37 },
{ country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
valueType: 'Category',
title: 'Countries', titleRotation: 90
},
primaryYAxis: {
minimum: 0, maximum: 80,
interval: 20, title: 'Medals',
labelFormat: '${value}K',
//Axis title text style
titleStyle: {
size: '16px', color: 'grey',
fontFamily : 'Segoe UI', fontWeight : 'bold'
}
},
series:[{
dataSource: chartData,
xName: 'country', yName: 'gold',
name: 'Gold', type: 'Column'
}, {
dataSource: chartData,
xName: 'country', yName: 'silver',
name: 'Silver', type: 'Column'
}, {
dataSource: chartData,
xName: 'country', yName: 'bronze',
name: 'Bronze', type: 'Column'
}],
title: 'Olympic Medals'
}, '#element');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Tick Lines Customization
The appearance of both major and minor tick lines can be customized using the majorTickLines and minorTickLines properties. These properties allow customization of the width, color, and size of tick lines to enhance chart readability.
var chartData= [
{ x: 'Jan', y: 60 }, { x: 'Feb', y: 50 }, { x: 'Mar', y: 64 },
{ x: 'Apr', y: 63 }, { x: 'May', y: 81 }, { x: 'Jun', y: 64 },
{ x: 'Jul', y: 82 }, { x: 'Aug', y: 96 }, { x: 'Sep', y: 78 },
{ x: 'Oct', y: 60 }, { x: 'Nov', y: 58 }, { x: 'Dec', y: 56 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
valueType: 'Category',
//Tick lines customization
majorTickLines : {
color : 'blue',
width : 5
},
minorTickLines : {
color : 'red',
width : 0
}
},
primaryYAxis: {
title: 'Temperature (Fahrenheit)',
//Grid lines customization
majorTickLines : {
color : 'blue',
width : 5
},
minorTickLines : {
color : 'red',
width : 0
}
},
series:[{
dataSource: chartData,
xName: 'x', yName: 'y',
name: 'Sales', type: 'Column'
}],
title: 'Temperature flow over months'
}, '#element');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Grid Lines Customization
Grid lines can be styled using the majorGridLines and minorGridLines properties. These options support customization of width, color, and dashArray, helping users distinguish data points and scales more effectively.
var chartData= [
{ x: 'Jan', y: 60 }, { x: 'Feb', y: 50 }, { x: 'Mar', y: 64 },
{ x: 'Apr', y: 63 }, { x: 'May', y: 81 }, { x: 'Jun', y: 64 },
{ x: 'Jul', y: 82 }, { x: 'Aug', y: 96 }, { x: 'Sep', y: 78 },
{ x: 'Oct', y: 60 }, { x: 'Nov', y: 58 }, { x: 'Dec', y: 56 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
valueType: 'Category',
//Grid lines customization
majorGridLines : {
color : 'blue',
width : 1
},
minorGridLines : {
color : 'red',
width : 0
}
},
primaryYAxis: {
title: 'Temperature (Fahrenheit)',
//Grid lines customization
majorGridLines : {
color : 'blue',
width : 1
},
minorGridLines : {
color : 'red',
width : 0
}
},
series:[{
dataSource: chartData,
xName: 'x', yName: 'y',
name: 'Sales', type: 'Column'
}],
title: 'Temperature flow over months'
}, '#element');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Multiple Axis
In addition to the primary X and Y axes, multiple additional axes can be added to a chart. Each series can be associated with a specific axis by mapping it to the axis using a unique axis name. This is useful for visualizing datasets with different units or scales within the same chart.
var chartData = [
{ x: 'Jan', y: 15, y1: 33 }, { x: 'Feb', y: 20, y1: 31 }, { x: 'Mar', y: 35, y1: 30 },
{ x: 'Apr', y: 40, y1: 28 }, { x: 'May', y: 80, y1: 29 }, { x: 'Jun', y: 70, y1: 30 },
{ x: 'Jul', y: 65, y1: 33 }, { x: 'Aug', y: 55, y1: 32 }, { x: 'Sep', y: 50, y1: 34 },
{ x: 'Oct', y: 30, y1: 32 }, { x: 'Nov', y: 35, y1: 32 }, { x: 'Dec', y: 35, y1: 31 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Months',
valueType: 'Category',
interval: 1
},
primaryYAxis: {
minimum: 0, maximum: 90, interval: 10,
lineStyle: { width: 0 },
title: 'Temperature (Fahrenheit)',
labelFormat: '{value}°F'
},
// Initializing multiple axis
axes:[
{
majorGridLines: { width: 0 },
rowIndex: 0, opposedPosition: true,
lineStyle: { width: 0 },
minimum: 24, maximum: 36, interval: 2,
name: 'yAxis', title: 'Temperature (Celsius)',
labelFormat: '{value}°C'
}
],
series:[{
dataSource: chartData,
xName: 'x', yName: 'y',
name: 'Germany', type: 'Column'
},{
dataSource: chartData, width:2,
xName: 'x', yName: 'y1', yAxisName: 'yAxis',
name: 'Japan', type: 'Line',
marker: { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } }
}],
title: 'Weather Condition'
}, '#element');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Inversed Axis
When an axis is inversed, the highest value is displayed closer to the origin, and the lowest value appears farther away. This behavior can be enabled by setting the isInversed property to true. Inversed axes are commonly used in scenarios such as ranking or inverted value representations.
var chart = new ej.charts.Chart({
//Initializing Primary X Axis
primaryXAxis: {
valueType: 'Category',
title: 'Years',
opposedPosition: true,
isInversed: true
},
//Initializing Primary Y Axis
primaryYAxis:
{
title: 'Exchange rate (INR per USD)',
edgeLabelPlacement: 'Shift',
labelIntersectAction: 'Rotate45',
isInversed: true
},
series: [
{
type: 'Column',
dataSource: [
{ x: 2008, y: 15.1 }, { x: 2009, y: 16 }, { x: 2010, y: 21.4 },
{ x: 2011, y: 18 }, { x: 2012, y: 16.2 }, { x: 2013, y: 11 },
{ x: 2014, y: 7.6 }, { x: 2015, y: 1.5 }
],
marker: { dataLabel: { visible: true }},
xName: 'x',
yName: 'y', name: 'Years',
},
],
title: 'Exchange rate',
}, '#element');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Opposed Position
An axis can be placed on the opposite side of its default position by setting the opposedPosition property to true. This option is useful when displaying multiple axes or when optimizing space usage in complex chart layouts.
var chart = new ej.charts.Chart({
//Initializing Primary X Axis
primaryXAxis: {
valueType: 'Category',
title: 'Years',
opposedPosition: true,
isInversed: true
},
//Initializing Primary Y Axis
primaryYAxis:
{
title: 'Exchange rate (INR per USD)',
edgeLabelPlacement: 'Shift',
labelIntersectAction: 'Rotate45',
isInversed: true
},
series: [
{
type: 'Column',
dataSource: [
{ x: 2008, y: 15.1 }, { x: 2009, y: 16 }, { x: 2010, y: 21.4 },
{ x: 2011, y: 18 }, { x: 2012, y: 16.2 }, { x: 2013, y: 11 },
{ x: 2014, y: 7.6 }, { x: 2015, y: 1.5 }
],
marker: { dataLabel: { visible: true }},
xName: 'x',
yName: 'y', name: 'Years',
},
],
title: 'Exchange rate',
}, '#element');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>