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

chart.xAxis().orientation("bottom");
chart.yAxis().orientation("left");
chart.xScale().inverted(false);
chart.yScale().inverted(false);

Playground

chart.xAxis().orientation("bottom");
chart.yAxis().orientation("left");
chart.xScale().inverted(true);
chart.yScale().inverted(false);

Playground

chart.xAxis().orientation("top");
chart.yAxis().orientation("left");
chart.xScale().inverted(false);
chart.yScale().inverted(false);

Playground

chart.xAxis().orientation("top");
chart.yAxis().orientation("left");
chart.xScale().inverted(true);
chart.yScale().inverted(false);

Playground

chart.xAxis().orientation("bottom");
chart.yAxis().orientation("left");
chart.xScale().inverted(true);
chart.yScale().inverted(false);

Playground

chart.xAxis().orientation("bottom");
chart.yAxis().orientation("left");
chart.xScale().inverted(true);
chart.yScale().inverted(true);

Playground

chart.xAxis().orientation("top");
chart.yAxis().orientation("left");
chart.xScale().inverted(false);
chart.yScale().inverted(true);

Playground

chart.xAxis().orientation("top");
chart.yAxis().orientation("left");
chart.xScale().inverted(true);
chart.yScale().inverted(true);

Playground

chart.xAxis().orientation("bottom");
chart.yAxis().orientation("right");
chart.xScale().inverted(false);
chart.yScale().inverted(false);

Playground

chart.xAxis().orientation("bottom");
chart.yAxis().orientation("right");
chart.xScale().inverted(true);
chart.yScale().inverted(false);

Playground

chart.xAxis().orientation("top");
chart.yAxis().orientation("right");
chart.xScale().inverted(false);
chart.yScale().inverted(false);

Playground

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

Playground

chart.xAxis().orientation("bottom");
chart.yAxis().orientation("right");
chart.xScale().inverted(false);
chart.yScale().inverted(true);

Playground

chart.xAxis().orientation("bottom");
chart.yAxis().orientation("right");
chart.xScale().inverted(true);
chart.yScale().inverted(true);

Playground

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

Playground

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
Playground

chart.xAxis().orientation("bottom");
chart.yAxis().orientation("left");
chart.xScale().inverted(false);
chart.yScale().inverted(false);

Playground

chart.xAxis().orientation("bottom");
chart.yAxis().orientation("left");
chart.xScale().inverted(true);
chart.yScale().inverted(true);

Playground

chart.xAxis().orientation("top");
chart.yAxis().orientation("right");
chart.xScale().inverted(false);
chart.yScale().inverted(false);

Playground

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

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