Still have questions?
Contact support
You are looking at an outdated 7.10.0 version of this document. Switch to the 7.13.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

PreviewJS Settings
JsFiddle Playground
  // set x axis position. This position is set by default
  var xAxis = chart.xAxis();
  xAxis.orientation("bottom");

  // set y axis position. This position is set by default
  var yAxis = chart.yAxis();
  yAxis.orientation("left");

  var xScale = chart.xScale();
  xScale.inverted(false);
  var yScale = chart.yScale();
  yScale.inverted(false);
 
JsFiddle Playground
  var xAxis = chart.xAxis();
  xAxis.orientation("bottom");
  var yAxis = chart.yAxis();
  yAxis.orientation("left");
  var xScale = chart.xScale();
  xScale.inverted(true);
  var yScale = chart.yScale();
  yScale.inverted(false);
 
JsFiddle Playground
  var xAxis = chart.xAxis();
  xAxis.orientation("top");
  var yAxis = chart.yAxis();
  yAxis.orientation("left");
  var xScale = chart.xScale();
  xScale.inverted(false);
  var yScale = chart.yScale();
  yScale.inverted(false);
 
JsFiddle Playground
  var xAxis = chart.xAxis();
  xAxis.orientation("top");
  var yAxis = chart.yAxis();
  yAxis.orientation("left");
  var xScale = chart.xScale();
  xScale.inverted(true);
  var yScale = chart.yScale();
  yScale.inverted(false);
 
JsFiddle Playground
  var xAxis = chart.xAxis();
  xAxis.orientation("bottom");
  var yAxis = chart.yAxis();
  yAxis.orientation("left");
  var xScale = chart.xScale();
  xScale.inverted(true);
  var yScale = chart.yScale();
  yScale.inverted(false);
 
JsFiddle Playground
  var xAxis = chart.xAxis();
  xAxis.orientation("bottom");
  var yAxis = chart.yAxis();
  yAxis.orientation("left");
  var xScale = chart.xScale();
  xScale.inverted(true);
  var yScale = chart.yScale();
  yScale.inverted(true);
 
JsFiddle Playground
  var xAxis = chart.xAxis();
  xAxis.orientation("top");
  var yAxis = chart.yAxis();
  yAxis.orientation("left");
  var xScale = chart.xScale();
  xScale.inverted(false);
  var yScale = chart.yScale();
  yScale.inverted(true);
 
JsFiddle Playground
  var xAxis = chart.xAxis();
  xAxis.orientation("top");
  var yAxis = chart.yAxis();
  yAxis.orientation("left");
  var xScale = chart.xScale();
  xScale.inverted(true);
  var yScale = chart.yScale();
  yScale.inverted(true);
 
JsFiddle Playground
  var xAxis = chart.xAxis();
  xAxis.orientation("bottom");
  var yAxis = chart.yAxis();
  yAxis.orientation("right");
  var xScale = chart.xScale();
  xScale.inverted(false);
  var yScale = chart.yScale();
  yScale.inverted(false);
 
JsFiddle Playground
  var xAxis = chart.xAxis();
  xAxis.orientation("bottom");
  var yAxis = chart.yAxis();
  yAxis.orientation("right");
  var xScale = chart.xScale();
  xScale.inverted(true);
  var yScale = chart.yScale();
  yScale.inverted(false);
 
JsFiddle Playground
  var xAxis = chart.xAxis();
  xAxis.orientation("top");
  var yAxis = chart.yAxis();
  yAxis.orientation("right");
  var xScale = chart.xScale();
  xScale.inverted(false);
  var yScale = chart.yScale();
  yScale.inverted(false);
 
JsFiddle Playground
  var xAxis = chart.xAxis();
  xAxis.orientation("top");
  var yAxis = chart.yAxis();
  yAxis.orientation("right");
  var xScale = chart.xScale();
  xScale.inverted(true);
  var yScale = chart.yScale();
  yScale.inverted(false);
 
JsFiddle Playground
  var xAxis = chart.xAxis();
  xAxis.orientation("bottom");
  var yAxis = chart.yAxis();
  yAxis.orientation("right");
  var xScale = chart.xScale();
  xScale.inverted(false);
  var yScale = chart.yScale();
  yScale.inverted(true);
 
JsFiddle Playground
  var xAxis = chart.xAxis();
  xAxis.orientation("bottom");
  var yAxis = chart.yAxis();
  yAxis.orientation("right");
  var xScale = chart.xScale();
  xScale.inverted(true);
  var yScale = chart.yScale();
  yScale.inverted(true);
 
JsFiddle Playground
  var xAxis = chart.xAxis();
  xAxis.orientation("top");
  var yAxis = chart.yAxis();
  yAxis.orientation("right");
  var xScale = chart.xScale();
  xScale.inverted(false);
  var yScale = chart.yScale();
  yScale.inverted(true);
 
JsFiddle Playground
  var xAxis = chart.xAxis();
  xAxis.orientation("top");
  var yAxis = chart.yAxis();
  yAxis.orientation("right");
  var xScale = chart.xScale();
  xScale.inverted(true);
  var yScale = chart.yScale();
  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

PreviewJS Settings
JsFiddle Playground
  var xAxis = chart.xAxis();
  xAxis.orientation("bottom");
  var yAxis = chart.yAxis();
  yAxis.orientation("left");
  var xScale = chart.xScale();
  xScale.inverted(false);
  var yScale = chart.yScale();
  yScale.inverted(false);
 
JsFiddle Playground
  var xAxis = chart.xAxis();
  xAxis.orientation("bottom");
  var yAxis = chart.yAxis();
  yAxis.orientation("left");
  var xScale = chart.xScale();
  xScale.inverted(true);
  var yScale = chart.yScale();
  yScale.inverted(true);
 
JsFiddle Playground
  var xAxis = chart.xAxis();
  xAxis.orientation("top");
  var yAxis = chart.yAxis();
  yAxis.orientation("right");
  var xScale = chart.xScale();
  xScale.inverted(false);
  var yScale = chart.yScale();
  yScale.inverted(false);

 
JsFiddle Playground
  var xAxis = chart.xAxis();
  xAxis.orientation("top");
  var yAxis = chart.yAxis();
  yAxis.orientation("right");
  var xScale = chart.xScale();
  xScale.inverted(true);
  var yScale = chart.yScale();
  yScale.inverted(true);