CODEWITHSUNDEEP
phpheightamchartsgantt-chart
jon james
jon james

Reputation: 35

How to change the height of a Gantt chart in amCharts?

We have a Gantt chart that has too many labels and they overlap. Can I change the height of the chart or parent container through the chart's attributes? Basically we have a Gantt chart that has one column with 80+ items in it, but every other column has about 20. This causes the labels attached to the smaller columns to overlap like they're being squashed together.

Unfortunately I can't include code as it's not mine, it's my company's.

I have tried adding a style tag to the div with the chart to increase the height, but nothing is changing.

Upvotes: 2

Views: 4046

Answers (2)

Ehasanul Hoque
Ehasanul Hoque

Reputation: 640

I am using following technique to adjust the height of gantt chart

<div id="chartdiv" style="width:100%; min-height:300px;"></div>

Here is the simple hack for adjusting height of gantt chart dynamically

var length = result.length; // number of category getting from backend via ajax call
 $("#chartdiv").height(length*25);

Upvotes: 0

stan chacon
stan chacon

Reputation: 768

Hi you can use a style tag to do that:

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

Also you can use a framework like boostrap to manage the size of the div, also amchart gives an example of how resize the cells of the char here is the code:

// Set cell size in pixels
var cellSize = 30;
chart.events.on("datavalidated", function(ev) {

  // Get objects of interest
  var chart = ev.target;
  var categoryAxis = chart.yAxes.getIndex(0);

  // Calculate how we need to adjust chart height
  var adjustHeight = chart.data.length * cellSize - categoryAxis.pixelHeight;

  // get current chart height
  var targetHeight = chart.pixelHeight + adjustHeight;

  // Set it on chart's container
  chart.svgContainer.htmlElement.style.height = targetHeight + "px";
});

finally here is the website if you have any question: https://www.amcharts.com/docs/v4/tutorials/auto-adjusting-chart-height-based-on-a-number-of-data-items/

Upvotes: 2

Related Questions