I am trying to draw a XY-chart, having both Y-axis and X-axis as categoryAxis, and also having several LineSeries for that.

As shown in picture, the Y-axis labels are overlapping!!

how can I solve that?

Here is my code:

  let myData = [
    {
      title: "2",
      customer1: "Internet_BB",
      customer2: "Space",
      customer3: "Space",
    },
    {
      title: "1",
      customer1: "Cloud_transmission_BB",
      customer2: "Internet_BB",
      customer3: "COLOCATION",
    },
    {
      title: "rhs",
      customer1: "COLOCATION",
      customer2: "InternalData_BB_(NIN)",
      customer3: "Internet_BB",
    }
  ];

    am4core.useTheme(am4themes_animated);
    var chart = am4core.create("XYChartDiv", am4charts.XYChart);
    chart.data = myData;

    var xAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    xAxis.dataFields.category = "title";

    var yAxis = chart.yAxes.push(new am4charts.CategoryAxis());
    yAxis.renderer.minGridDistance =5;

    // Create series
    var series1 = chart.series.push(new am4charts.LineSeries());
    series1.dataFields.categoryY = "customer1";
    series1.dataFields.categoryX = "title";
    series1.name = "customer1";

    // same for series2 and ....

    const createLabel= (value) => {
      let range = yAxis.axisRanges.create();
      range.label.dataItem.text = value;
      range.contents.stroke = am4core.color("#396478");
      range.contents.fill = range.contents.stroke;
    }

    createLabel('Internet_BB');
    createLabel('Space');
    createLabel('Raw_space');
    createLabel('Cloud_transmission_BB');
    createLabel('Internal_IXP_BB');
    createLabel('COLOCATION');
    createLabel('InternalData_BB_(NIN)')