Gantt chart in height of auto-fit chart based on a series of data items.
I'm using https://www.amcharts.com/demos/gantt-chart/, for an internal application. And I need it to adjust itself by the items, according to this link: https://www.amcharts.com/docs/v4/tutorials/auto-adjusting-chart-height-based-on-a-number-of- date-items/
Only on the Gantt chart, try in different ways, but nothing came of it. I will post my configuration, so that you take a base of what is now:
Config:
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.colors.saturation = 0.8;
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
chart.tooltip.label.maxWidth = 150;
chart.tooltip.label.wrap = true;
chart.paddingRight = 30;
chart.dateFormatter.inputDateFormat = "yyyy-MM-dd HH:mm";
chart.dataSource.url = "data.php";
var colorSet = new am4core.ColorSet();
colorSet.saturation = 0.4;
chart.dateFormatter.dateFormat = "yyyy-MM-dd HH:mm";
chart.dateFormatter.inputDateFormat = "yyyy-MM-dd HH:mm";
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.inversed = true;
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 70;
dateAxis.baseInterval = { count: 1, timeUnit: "minute" };
// dateAxis.max = new Date(2018, 0, 1, 24, 0, 0, 0).getTime();
//dateAxis.strictMinMax = true;
dateAxis.renderer.tooltipLocation = 0;
var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.columns.template.width = am4core.percent(80);
series1.columns.template.tooltipText = "{task}: [bold]{openDateX}[/] - [bold]{dateX}[/]";
series1.dataFields.openDateX = "start";
series1.dataFields.dateX = "end";
series1.dataFields.categoryY = "category";