Still have questions?
Contact support
You are looking at an outdated 7.3.0 version of this document. Switch to the 7.12.0 version to see the up to date information.

Axes Orientation

Overview


Orientation depends on plot type and inversion of axes, below you will find all possible axes orientation and inverting JS Settings with demonstration preview.

Though these settings are demonstrated using Bar/Column charts - they work for all other chart types.

Column Mode

Preview JS Settings
chart.xAxis().orientation('bottom');
chart.yAxis().orientation('left');
chart.xScale().inverted(false);
chart.yScale().inverted(false);
 
chart.xAxis().orientation('bottom');
chart.yAxis().orientation('left');
chart.xScale().inverted(true);
chart.yScale().inverted(false);
 
chart.xAxis().orientation('top');
chart.yAxis().orientation('left');
chart.xScale().inverted(false);
chart.yScale().inverted(false);
 
chart.xAxis().orientation('top');
chart.yAxis().orientation('left');
chart.xScale().inverted(true);
chart.yScale().inverted(false);
 
chart.xAxis().orientation('bottom');
chart.yAxis().orientation('left');
chart.xScale().inverted(true);
chart.yScale().inverted(false);
 
chart.xAxis().orientation('bottom');
chart.yAxis().orientation('left');
chart.xScale().inverted(true);
chart.yScale().inverted(true);
 
chart.xAxis().orientation('top');
chart.yAxis().orientation('left');
chart.xScale().inverted(false);
chart.yScale().inverted(true);
 
chart.xAxis().orientation('top');
chart.yAxis().orientation('left');
chart.xScale().inverted(true);
chart.yScale().inverted(true);
 
chart.xAxis().orientation('bottom');
chart.yAxis().orientation('right');
chart.xScale().inverted(false);
chart.yScale().inverted(false);
 
chart.xAxis().orientation('bottom');
chart.yAxis().orientation('right');
chart.xScale().inverted(true);
chart.yScale().inverted(false);
 
chart.xAxis().orientation('top');
chart.yAxis().orientation('right');
chart.xScale().inverted(false);
chart.yScale().inverted(false);
 
chart.xAxis().orientation('top');
chart.yAxis().orientation('right');
chart.xScale().inverted(true);
chart.yScale().inverted(false);
 
chart.xAxis().orientation('bottom');
chart.yAxis().orientation('right');
chart.xScale().inverted(false);
chart.yScale().inverted(true);
 
chart.xAxis().orientation('bottom');
chart.yAxis().orientation('right');
chart.xScale().inverted(true);
chart.yScale().inverted(true);
 
chart.xAxis().orientation('top');
chart.yAxis().orientation('right');
chart.xScale().inverted(false);
chart.yScale().inverted(true);
 
chart.xAxis().orientation('top');
chart.yAxis().orientation('right');
chart.xScale().inverted(true);
chart.yScale().inverted(true);
 

Bar Mode

x-Axis isn't restricted in only by Top and Bottom orientation. It can by placed on the Left or Right sides. So can y-Axis be placed on the top or bottom. This option enabled by default in Bar charts.

Here are some samples of Bar chart Axes orientation

Preview JS Settings
chart.xAxis().orientation('bottom');
chart.yAxis().orientation('left');
chart.xScale().inverted(false);
chart.yScale().inverted(false);
 
chart.xAxis().orientation('bottom');
chart.yAxis().orientation('left');
chart.xScale().inverted(true);
chart.yScale().inverted(true);
 
chart.xAxis().orientation('top');
chart.yAxis().orientation('right');
chart.xScale().inverted(false);
chart.yScale().inverted(false);

 
chart.xAxis().orientation('top');
chart.yAxis().orientation('right');
chart.xScale().inverted(true);
chart.yScale().inverted(true);