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.