Setting position of the chart scrollbars – amCharts 4 Documentation

Normally, scrollbars on an XY chart are placed on the top and right side. This tutorial will show how you can change their default position.

Prerequisites

This tutorial will refer to chart's built-in containers a lot. Before you go further, make sure you read this: "Pre-defined chart containers".

Horizontal scrollbar is usually placed on the top of the chart, or more specifically in the topAxesContainer.

Naturally, if we want the scrollbar to go to the bottom, we'd need to move it to the bottomAxesContainer.

This is done by setting scrollbar's parent:

chart.scrollbarX = new am4core.Scrollbar();
chart.scrollbarX.parent = chart.bottomAxesContainer;

chart.scrollbarX = new am4core.Scrollbar();
chart.scrollbarX.parent = chart.bottomAxesContainer;

NOTE JSON-based configs do not yet support this trick. Sorry.

Similarly, vertical scrollbars can be moved by switching their parent to a different container.

The default is rightAxesContainer. To move it to left, we'll need to use leftAxesContainer:

chart.scrollbarY = new am4core.Scrollbar();
chart.scrollbarY.parent = chart.leftAxesContainer;

chart.scrollbarY = new am4core.Scrollbar();
chart.scrollbarY.parent = chart.leftAxesContainer;

While doing the above tricks, you might end up with a chart that has both axis and a scrollbar crammed together.

While it's not bad in itself, you might also want to move the axis to the opposite side of the plot area.

You can do so easily by setting respective axis renderer's opposite property to true. (more info)

See the Pen amCharts V4: Switching places scrollbar and category axis by amCharts (@amcharts) on CodePen.