AmCharts: ChartScrollBar going out of chartdiv

问题

I am Using amCharts for displaying stock data. I have a scrollBar enabled and positioned at bottom. I have a chartholderdiv which has style:

#chartholderdiv{
  height:80%;
  width:80%;
  overflow:visible;
  background-color:#db946b;
}

For clarity, I have added a background color to see the limits of div in the following image.
I have a chartdiv (which is provided to AmCharts.makeChart) which has style:

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

HTML:

<div id="chartholderdiv">
    <div id="chartdiv"></div>   
</div>

There are no other style or tags in my file for which I have pasted output. If the browser is resized to smaller size, the issue will be clear. I have given all my code here except the <script> tag which has amCharts config and AmCharts.makeChart(chartdiv,chartobject);(this command is called within ajax onreadystatechange function). So more or less my script tage is:

<script>
 chartObject={......};

 var xhttp=new XMLHttpRequest();
 xhttp.onreadystatechange = function() {
   if (this.readyState == 4 && this.status == 200) {
     .....//parse json data for dataset of chart.
     .....//set chartObject dataProvider to dataset parsed above
     chart = AmCharts.makeChart("chartdiv", chartObject);
   }
  };
  xhttpHour.open("GET", dataUrlString, true);
  xhttpHour.send();

</script>

But when the chart is drawn, the scrollbar of chart goes out of the chartdiv/chartholderdiv. See image:

I have added the red background so that the problem is visible. I assume that when setting height, the two graphs take 70 and 30 as in chart config and the scrollbar is added after that which spills out of div but I want the chartholder div to resize to accommodate everything. I have tried many things, but the problem persists.

来源：https://stackoverflow.com/questions/48023787/amcharts-chartscrollbar-going-out-of-chartdiv

标签

javascript

html

css

amcharts