amcharts-height

by amcharts

HTML

<!-- amCharts -->
<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>

<div id="legendContainer">
</div>
<div id="container">
</div>
<div id="filterContainer">
</div>

CSS

#container {
  width: 940px;
  height: 350px;
  /* We need the height of the y axis from 0 to 100 to be approximately 235px */
}

div {
  border-style: solid;
}

#filterContainer{
  height: 400px;
}

JavaScript

class LineChart {

  constructor(div, legendDiv, filterDiv, data, series, ranges, hasFilter, filterTitle, filters) {
    am4core.useTheme(am4themes_animated);
    am4core.options.commercialLicense = true;

    var chart = am4core.create(div, am4charts.XYChart);	
    this.chart = chart;
    this.chart.cursor = new am4charts.XYCursor();

	this.legendContainer = am4core.create(legendDiv, am4core.Container);
	this.legendContainer.width = am4core.percent(100);
	this.legendContainer.height = am4core.percent(100);

    this.chart.legend = new am4charts.Legend();
    this.chart.legend.position = "top";
    this.chart.legend.fontSize = 12;
    this.chart.legend.position = "top";
    this.chart.legend.contentAlign = "left";
    this.chart.legend.paddingBottom = 10;
    this.chart.numberFormatter.numberFormat = "#.";
	
	this.chart.legend.parent = this.legendContainer;	

	
    var valueAxis = this.chart.yAxes.push(new am4charts.ValueAxis());
    valueAxis.tooltip.disabled = false;
    valueAxis.min = 0;
    valueAxis.max = 100;
    valueAxis.renderer.minGridDistance = 1;
    valueAxis.renderer.fontSize = 11;
    valueAxis.renderer.grid.template.stroke = "#cccccc";
    valueAxis.renderer.grid.template.strokeWidth = 1;
    valueAxis.renderer.grid.template.strokeOpacity = 1;

    // Axis tooltip
    valueAxis.tooltip.fontSize = 12;
    valueAxis.tooltip.background.cornerRadius = 3;
    valueAxis.tooltip.background.fill = am4core.color("#cccccc");
    valueAxis.tooltip.background.stroke = am4core.color("#fff");
    valueAxis.tooltip.label.fill = am4core.color("#000");

    this.categoryAxis = this.chart.xAxes.push(new am4charts.CategoryAxis());
    this.categoryAxis.dataFields.category = "timeframe";
    this.categoryAxis.renderer.labels.template.rotation = 90;
    this.categoryAxis.renderer.labels.template.rotation = 90;
    this.categoryAxis.renderer.grid.template.disabled = true;
    this.categoryAxis.renderer.fontSize = 11;
   ...