Scroll amchart diagram inside div

Viewed 211

I'm coding an angular 9 web app with a page that displays an am4chart Chord diagram. The diagram is included in a am4chart container, which is itself in an html div.

I added buttons to zoom on the chart (basically increases/decreases the chart's height property). The thing is : I would want that when the chart overlapps the container because of its size, a scrollbar would allow the user to scroll on the chart vertically.

I tried messing around with overflow propertie in the html/css div containing the chart's container. I also tried setting a fixed size for the div. Nothing worked. The best case is when I set overflow-y propertie to "scroll". A scrollbar appears but I can't scroll it.

Here's the typescript part where I create and setup the chart and container :

const container = am4core.create('container', am4core.Container);
  this.container = container;
  this.container.width = am4core.percent(100);
  this.container.height = am4core.percent(100);
  this.chart = this.container.createChild(am4charts.ChordDiagram);
  this.chartHeightScale = 400;
  this.chart.horizontalCenter = 'left';
  this.chart.verticalCenter = 'top';
  this.chart.width = am4core.percent(100);
  this.chart.height = this.chartHeightScale;
  this.chart.fontSize = '15px';
  this.chart.align = 'center';
  this.chart.valign = 'middle';

Here is the css :

body {
  font-family: Arial;
}
#container {
  border: 1px dotted #ddd;
  width: 100%;
  height: 450px;
  margin: 1em auto;
}

And the html :

<!-- Resources -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

<!-- HTML -->
<div id="container" style="overflow-y: scroll"></div>
  <!--<button id="btnFullscreen" type="button">Fullscreen</button>-->
<button type="button" class="btn btn-danger" (click)="onZoomIn()">
  Zoom +
</button>

<button type="button" class="btn btn-danger" (click)="onZoomOut()">
  Zoom -
</button>

I think it has to do with the fact that am4charts are in svg elements.

0 Answers
Related