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
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);

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);

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);

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);

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);

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);

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);

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);

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);

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);

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);

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);

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);

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);

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);

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

Preview JS Settings
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);

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);

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);

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);

You are looking at an outdated v7 version of this document. Switch to the v8 version to see the up to date information.