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