How to make amchart population pyramid to display graph well and clearly on mobile view?

I am new to amcharts and js overall. In my project i want to show male and female population graph according to their age group and so far i have created the graph to show the data i have but it only works for bigger screen.When i run that project on smaller screen the graph shrinks to a line.So i want to show the labels in front of the graph like the example i have shown below.

[I want to display like in 10 to 14 ageGroup of this example][1]
[1]: https://i.stack.imgur.com/NPiYT.png

This is the graph i have
[And the graph is looking pretty decent on bigger screen][2]
[2]: https://i.stack.imgur.com/3uKE8.png

But the problem i have is [It shrinks to a single line on mobile view][3]
[3]: https://i.stack.imgur.com/e8Sh8.png

Here is the code i have,

am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
chart.responsive.enabled = true;

// Themes end

var mainContainer = am4core.create(“agewise”, am4core.Container);
mainContainer.width = am4core.percent(100);
mainContainer.height = am4core.percent(100);
mainContainer.layout = “horizontal”;

let myData = {!! json_encode($agewise) !!};
var usData = myData;

var maleChart = mainContainer.createChild(am4charts.XYChart);
maleChart.paddingRight = 0;
maleChart.data = JSON.parse(JSON.stringify(usData));

// Create axes
var maleCategoryAxis = maleChart.yAxes.push(new am4charts.CategoryAxis());
maleCategoryAxis.dataFields.category = “age_group”;
maleCategoryAxis.renderer.grid.template.location = 0;
//maleCategoryAxis.renderer.inversed = true;
maleCategoryAxis.renderer.minGridDistance = 15;

var maleValueAxis = maleChart.xAxes.push(new am4charts.ValueAxis());
// console.log(maleChart.xAxes);
maleValueAxis.renderer.inversed = true;
maleValueAxis.min = 0;
maleValueAxis.max = 15;
maleValueAxis.strictMinMax = true;

maleValueAxis.numberFormatter = new am4core.NumberFormatter();
maleValueAxis.numberFormatter.numberFormat = “#.#’%'”;

// Create series
var maleSeries = maleChart.series.push(new am4charts.ColumnSeries());
maleSeries.dataFields.valueX = “male”;
maleSeries.dataFields.valueXShow = “percent”;
maleSeries.calculatePercent = true;
maleSeries.dataFields.categoryY = “age_group”;
maleSeries.interpolationDuration = 1000;
maleSeries.columns.template.tooltipText =
“पुरूष, {categoryY}: {valueX} ({valueX.percent.formatNumber(‘#.0’)}%)”;
//maleSeries.sequencedInterpolation = true;

var femaleChart = mainContainer.createChild(am4charts.XYChart);
femaleChart.paddingLeft = 0;
femaleChart.data = JSON.parse(JSON.stringify(usData));

// Create axes
var femaleCategoryAxis = femaleChart.yAxes.push(new am4charts.CategoryAxis());
femaleCategoryAxis.renderer.opposite = true;
femaleCategoryAxis.dataFields.category = “age_group”;
femaleCategoryAxis.renderer.grid.template.location = 0;
femaleCategoryAxis.renderer.minGridDistance = 15;

var femaleValueAxis = femaleChart.xAxes.push(new am4charts.ValueAxis());
femaleValueAxis.min = 0;
femaleValueAxis.max = 15;
femaleValueAxis.strictMinMax = true;
femaleValueAxis.numberFormatter = new am4core.NumberFormatter();
femaleValueAxis.numberFormatter.numberFormat = “#.#’%'”;
femaleValueAxis.renderer.minLabelPosition = 0.01;

// Create series
var femaleSeries = femaleChart.series.push(new am4charts.ColumnSeries());
femaleSeries.dataFields.valueX = “female”;
femaleSeries.dataFields.valueXShow = “percent”;
femaleSeries.calculatePercent = true;
femaleSeries.fill = femaleChart.colors.getIndex(4);
femaleSeries.stroke = femaleSeries.fill;
//femaleSeries.sequencedInterpolation = true;
femaleSeries.columns.template.tooltipText =
“महिला, {categoryY}: {valueX} ({valueX.percent.formatNumber(‘#.0’)}%)”;
femaleSeries.dataFields.categoryY = “age_group”;
femaleSeries.interpolationDuration = 1000;

}); // end am4core.ready()

And sorry for my English..