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);
|
Vertical Mode
Here are some samples of Vertical charts 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);
|