Category axis lables are overlapping and not showing in Gantt amcharts

Question

I have a pb where my lables are hiding when height is smaller than a value. For example, when

#chart {
height: 50vh;

}

The result:

But when the

#chart {
    height: 40vh;
}

The result:

As you can see, B and D labels in the category axis are hiddens. but thier values are shown.

How can I change size of others so I can always see all lables ?. Any suggestion pls ?.

Working code https://jsfiddle.net/davidliang2008/cse496zg/

Answer 1

Try like this: https://jsfiddle.net/2sce13n4/

  yAxes: [{
    type: "CategoryAxis",
    dataFields: {
      category: "name"
    },
    renderer: {
      minGridDistance: 1,
      ...
    }
  }],

By setting the y-axis minGridDistance to a value less than the default of 120, the grid lines are allowed to be closer together as the chart gets smaller.