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)')