AmCharts watermark overlays "Show all" button

Question

When you zoom in AmCharts scroll bar, "Show all" button appears and overlays with link to AmCharts website. Is there a way to force AmCharts link or "Show all" button to be shown in left corner?

Found nothing in docs.

Answer 1

Indeed, there are no config options to move the "Show all" button.

However, you can set the position of branding link using creditsPosition

I.e.:

AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "creditsPosition": "bottom-left",
  ...
});

Answer 2

It's possible to hide "Show all" button by setting chart's zoomOutText property to empty string:

var chart = AmCharts.makeChart('chartdiv', {
    type: 'serial',
    zoomOutText: ''
    ...
});

and place your own custom button anywhere you wish:

HTML

<div class="container">
    <div id="chartdiv"></div>
    <button class="show-all-button">Show all</button>
</div>

CSS

.container {
    position: relative;
    ...
}

#chartdiv {
    position: relative;
    width: 100%;
    height: 100%;
}

.show-all-button {
    position: absolute;
    top: 15px;
    left: 15px;
    ...
}

To make the button working add the following click event handler:

var showAllButton = document.querySelector('.show-all-button');
showAllButton.addEventListener('click', function() {
    chart.zoomOut();
});

This approach is useful when you need to add custom controls over your chart.