How to use the @amcharts/amcharts4/charts.CategoryAxis function in @amcharts/amcharts4

value3: 6,
          value4: 2,
        },
        {
          category: 'Eight',
          value1: 6,
          value2: 16,
          value3: 5,
          value4: 1,
        },
      ];

      chart.padding(20, 20, 20, 20);

      // NOTE: Not sure why the following `as any`s are needed. This code comes directly from AMCharts docs.
      const categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis() as any);
      categoryAxis.dataFields.category = 'category';
      categoryAxis.renderer.labels.template.location = 0.5;
      categoryAxis.renderer.tooltipLocation = 0.5;

      const valueAxis = chart.yAxes.push(new am4charts.ValueAxis() as any);
      valueAxis.tooltip.disabled = true;
      valueAxis.renderer.labels.template.horizontalCenter = 'left';
      valueAxis.min = 0;

      const series1 = chart.series.push(new am4charts.RadarColumnSeries());
      series1.columns.template.width = am4core.percent(80);
      series1.name = 'Series 1';
      series1.dataFields.categoryX = 'category';
      series1.dataFields.valueY = 'value2';
      series1.stacked = true;

"country": "Netherlands",
	"visits": 665
}, {
	"country": "Russia",
	"visits": 580
}, {
	"country": "South Korea",
	"visits": 443
}, {
	"country": "Canada",
	"visits": 441
}];

chart.padding(40, 40, 40, 40);

let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.minGridDistance = 60;


let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.max = 24000;
valueAxis.strictMinMax = true;
valueAxis.renderer.minGridDistance = 30;

valueAxis.renderer.labels.template.hiddenState.transitionDuration = 2000;
valueAxis.renderer.labels.template.defaultState.transitionDuration = 2000;

// axis break
let axisBreak = valueAxis.axisBreaks.create();

}, {
		"value": 70,
		"title": "Cat #3"
	}]
}];


// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);


// Add data
chart.data = data;

// Create axes
let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.grid.template.location = 0;

let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = "Units sold (M)";
valueAxis.min = 0;

// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "units";
series.dataFields.categoryX = "country";
series.tooltip.pointerOrientation = "vertical";


let columnTemplate = series.columns.template;
// add tooltip on column, not template, so that slices could also have tooltip

am4core.useTheme(am4themes_dark);

let chart = am4core.create("chartdiv", am4charts.XYChart);

// using math in the data instead of final values just to illustrate the idea of Waterfall chart
// a separate data field for step series is added because we don't need last step (notice, the last data item doesn't have stepValue)
chart.data = [
    { category: "Net revenue", value: 8786, open: 0, stepValue: 8786, color:chart.colors.getIndex(13), displayValue:8786},
    { category: "Cost of sales", value: 8786 - 2786, open: 8786, stepValue: 8786 - 2786, color:chart.colors.getIndex(8), displayValue:2786},
    { category: "Operating expenses", value: 8786 - 2786 - 1786, open: 8786 - 2786, stepValue: 8786 - 2786 - 1786, color:chart.colors.getIndex(9), displayValue:1786 },
    { category: "Amortisation", value: 8786 - 2786 - 1786 - 453, open: 8786 - 2786 - 1786, stepValue: 8786 - 2786 - 1786 - 453, color:chart.colors.getIndex(10), displayValue:453},
    { category: "Income from equity", value: 8786 - 2786 - 1786 - 453 + 1465, open: 8786 - 2786 - 1786 - 453, stepValue: 8786 - 2786 - 1786 - 453 + 1465, color:chart.colors.getIndex(16), displayValue:1465 },
    { category: "Operating income", value: 8786 - 2786 - 1786 - 453 + 1465, open: 0, color:chart.colors.getIndex(17), displayValue:8786 - 2786 - 1786 - 453 + 1465}
];

let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";

let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

let columnSeries = chart.series.push(new am4charts.ColumnSeries());
columnSeries.dataFields.categoryX = "category";
columnSeries.dataFields.valueY = "value";
columnSeries.dataFields.openValueY = "open";
columnSeries.fillOpacity = 0.8;
columnSeries.sequencedInterpolation = true;
columnSeries.interpolationDuration = 1500;

let columnTemplate = columnSeries.columns.template;
columnTemplate.strokeOpacity = 0;
columnTemplate.propertyFields.fill = "color";

"visits": 441
}];

chart.padding(40, 40, 40, 40);
chart.maskBullets = false; // allow bullets to go out of plot area

let label = chart.plotContainer.createChild(am4core.Label);
label.text = "Drag column bullet to change it's value";
label.y = 92;
label.x = am4core.percent(100);
label.horizontalCenter = "right";
label.zIndex = 100;
label.fillOpacity = 0.7;

// category axis
let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.minGridDistance = 60;
categoryAxis.renderer.grid.template.disabled = true;
categoryAxis.renderer.line.disabled = true;

// value axis
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// we set fixed min/max and strictMinMax to true, as otherwise value axis will adjust min/max while dragging and it won't look smooth
valueAxis.min = 0;
valueAxis.max = 3500;
valueAxis.strictMinMax = true;
valueAxis.renderer.line.disabled = true;
valueAxis.renderer.minWidth = 40;

// series

"Suk",
  "Clair",
  "Olivia",
  "Hans",
  "Glennie",
];

for (var i = 0; i < names.length; i++) {
  open += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 5);
  close = open + Math.round(Math.random() * 10) + 3;
  data.push({ category: names[i], open: open, close: close });
}

chart.data = data;

var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.minGridDistance = 15;
categoryAxis.renderer.inversed = true;
categoryAxis.renderer.inside = true;
categoryAxis.renderer.grid.template.location = 0.5;
categoryAxis.renderer.grid.template.strokeDasharray = "1,3";

var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;

var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryY = "category";
series.dataFields.openValueX = "open";
series.dataFields.valueX = "close";
series.tooltipText = "open: {openValueX.value} close: {valueX.value}";

"value3": 10,
	"value4": 4
}, {
	"category": "Seven",
	"value1": 10,
	"value2": 8,
	"value3": 6,
	"value4": 4
}]

chart.padding(30, 30, 10, 30);
chart.legend = new charts.Legend();

chart.colors.step = 2;

let categoryAxis = chart.xAxes.push(new charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.minGridDistance = 60;
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.mouseEnabled = false;

let valueAxis = chart.yAxes.push(new charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.renderer.grid.template.strokeOpacity = 0.05;
valueAxis.renderer.minGridDistance = 20;
valueAxis.mouseEnabled = false;
valueAxis.min = 0;
valueAxis.renderer.minWidth = 35;

let series1 = chart.series.push(new charts.ColumnSeries());
series1.columns.template.width = amcharts4.percent(80);
series1.columns.template.tooltipText = "{name}: {valueY.value}";

value3: 6,
        value4: 2
    },
    {
        category: "Eight",
        value1: 6,
        value2: 16,
        value3: 5,
        value4: 1
    }
];

chart.padding(20, 20, 20, 20);
chart.colors.step = 4;

let categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.labels.template.location = 0.5;
categoryAxis.renderer.labels.template.horizontalCenter = "right";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.tooltipLocation = 0.5;
categoryAxis.renderer.grid.template.strokeOpacity = 0.07;
categoryAxis.interactionsEnabled = false;

let valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.renderer.labels.template.horizontalCenter = "left";
valueAxis.min = 0;
valueAxis.max = 60;
valueAxis.strictMinMax = true;
valueAxis.renderer.maxLabelPosition = 0.99;
valueAxis.renderer.minGridDistance = 10;

"Suk",
  "Clair",
  "Olivia",
  "Hans",
  "Glennie",
];

for (var i = 0; i < names.length; i++) {
  open += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 5);
  close = open + Math.round(Math.random() * 10) + 3;
  data.push({ category: names[i], open: open, close: close });
}

chart.data = data;

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.minGridDistance = 15;
categoryAxis.renderer.grid.template.location = 0.5;
categoryAxis.renderer.grid.template.strokeDasharray = "1,3";
categoryAxis.renderer.labels.template.rotation = -90;
categoryAxis.renderer.labels.template.horizontalCenter = "left";
categoryAxis.renderer.labels.template.verticalCenter = "middle";
categoryAxis.renderer.labels.template.location = 0.5;
categoryAxis.renderer.inside = true;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;

var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = "category";

if (axisType === "ValueAxis") {
            axis = this.chart.xAxes.push(new am4charts.ValueAxis());
            axis.min = 0;
            axis.max = 100;
            axis.renderer.grid.template.strokeOpacity = 0.3;
        } else if (axisType === "DateAxis") {
            axis = this.chart.xAxes.push(new am4charts.DateAxis());
            axis.dateFormats.setKey("second", "HH:mm:ss")
            axis.dateFormats.setKey("minute", "HH:mm:ss")
            axis.dateFormats.setKey("hour", "HH:mm")
            axis.dateFormats.setKey("day", "MMM dd")
            axis.periodChangeDateFormats.setKey("hour", "[bold]dd MMM HH:mm[/]");
            axis.periodChangeDateFormats.setKey("day", "[bold]MMM[/] dd");
            axis.periodChangeDateFormats.setKey("month", "[bold]yyyy[/] MMM");
        } else if (axisType === "CategoryAxis") {
            axis = this.chart.xAxes.push(new am4charts.CategoryAxis());
            axis.dataFields.category = category;
            axis.renderer.grid.template.location = 0;
            axis.renderer.minGridDistance = 30;
            axis.renderer.labels.template.horizontalCenter = "right";
            axis.renderer.labels.template.verticalCenter = "middle";
            axis.renderer.labels.template.rotation = 315;
            axis.tooltip.disabled = true;
            axis.renderer.minHeight = 110;
        }
    }