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

import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
import am4themes_dark from "@amcharts/amcharts4/themes/dark";

am4core.useTheme(am4themes_animated);
am4core.useTheme(am4themes_dark);

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

let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;

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

let series = chart.series.push(new am4charts.OHLCSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "close";
series.dataFields.openValueY = "open";
series.dataFields.lowValueY = "low";
series.dataFields.highValueY = "high";
series.tooltipText = "Open:${openValueY.value}\nLow:${lowValueY.value}\nHigh:${highValueY.value}\nClose:${valueY.value}";

// important!
// ohlc series colors are set in states. 
// series.riseFromOpenState.properties.fill = am4core.color("#00ff00");
// series.dropFromOpenState.properties.fill = am4core.color("#FF0000");
// series.riseFromOpenState.properties.stroke = am4core.color("#00ff00");
// series.dropFromOpenState.properties.stroke = am4core.color("#FF0000");

// uncomment this line if you want to change order of axes
      // chart.bottomAxesContainer.reverseOrder = true

      let dateAxis = chart.xAxes.push(new am4charts.DateAxis())
      dateAxis.renderer.grid.template.location = 0
      dateAxis.renderer.ticks.template.length = 8
      dateAxis.renderer.ticks.template.strokeOpacity = 0.1
      dateAxis.renderer.grid.template.disabled = true
      dateAxis.renderer.ticks.template.disabled = false
      dateAxis.renderer.ticks.template.strokeOpacity = 0.2

      // these two lines makes the axis to be initially zoomed-in
      // dateAxis.start = 0.7
      // dateAxis.keepSelection = true

      let valueAxis = chart.yAxes.push(new am4charts.ValueAxis())
      valueAxis.tooltip.disabled = true
      valueAxis.zIndex = 2
      valueAxis.renderer.baseGrid.disabled = true
      valueAxis.renderer.inside = true
      // height of axis
      valueAxis.height = am4core.percent(80)
      valueAxis.renderer.labels.template.verticalCenter = 'bottom'
      valueAxis.renderer.labels.template.padding(2, 2, 2, 2)
      // valueAxis.renderer.maxLabelPosition = 0.95
      valueAxis.renderer.fontSize = '0.8em'

      // uncomment these lines to fill plot area of this axis with some color
      valueAxis.renderer.gridContainer.background.fill = interfaceColors.getFor('alternativeBackground')
      valueAxis.renderer.gridContainer.background.fillOpacity = 0.05

      let series = chart.series.push(new am4charts.LineSeries())

}];


// 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
columnTemplate.column.tooltipText = "Series: {name}\nCategory: {categoryX}\nValue: {valueY}";
columnTemplate.column.tooltipY = 0;
columnTemplate.column.cornerRadiusTopLeft = 20;
columnTemplate.column.cornerRadiusTopRight = 20;

// uncomment this line if you want to change order of axes
//chart.bottomAxesContainer.reverseOrder = true;

let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
dateAxis.renderer.ticks.template.length = 8;
dateAxis.renderer.ticks.template.strokeOpacity = 0.1;
dateAxis.renderer.grid.template.disabled = true;
dateAxis.renderer.ticks.template.disabled = false;
dateAxis.renderer.ticks.template.strokeOpacity = 0.2;

// these two lines makes the axis to be initially zoomed-in
dateAxis.start = 0.7;
dateAxis.keepSelection = true;

let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.zIndex = 1;
valueAxis.renderer.baseGrid.disabled = true;
// height of axis
valueAxis.height = am4core.percent(65);

valueAxis.renderer.gridContainer.background.fill = am4core.color("#000000");
valueAxis.renderer.gridContainer.background.fillOpacity = 0.05;
valueAxis.renderer.inside = true;
valueAxis.renderer.labels.template.verticalCenter = "bottom";
valueAxis.renderer.labels.template.padding(2,2,2,2);
//valueAxis.renderer.maxLabelPosition = 0.95;
valueAxis.renderer.fontSize = "0.8em"

let series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "date";

createAxisX(axisType, category) {
        let axis;
        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;

let data = [];
let open = 100;
let close = 250;

for (let i = 1; i < 366; i++) {
	open += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 50);
	close += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 50);
	data.push({ date: new Date(2018, 0, i), open: open, close: close });
}

chart.data = data;

let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;

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

let series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "date";
series.dataFields.openValueY = "open";
series.dataFields.valueY = "close";
series.tooltipText = "open: {openValueY.value} close: {valueY.value}";
series.sequencedInterpolation = true;
series.fillOpacity = 0.3;
series.defaultState.transitionDuration = 1000;

let series2 = chart.series.push(new am4charts.LineSeries());
series2.dataFields.dateX = "date";
series2.dataFields.valueY = "open";
series2.sequencedInterpolation = true;
series2.defaultState.transitionDuration = 1500;

}, {
  "direction": "W",
  "value": 11.1
}, {
  "direction": "NW",
  "value": 10
}]

chart.padding(10, 10, 10, 10);

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

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

let series = chart.series.push(new charts.RadarSeries());
series.dataFields.categoryX = "direction";
series.dataFields.valueY = "value";
series.tooltipText = "{valueY.value}"
series.fillOpacity = 0.4;

chart.cursor = new charts.RadarCursor();

chart.paddingRight = 20;

let data = [];
let visits = 10;
for (let i = 1; i < 366; i++) {
    visits += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
    data.push({ date: new Date(2018, 0, i), value: visits });
}

chart.data = data;

let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;

let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.renderer.minWidth = 35;

let series = chart.series.push(new am4charts.StepLineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "value";

series.tooltipText = "{valueY.value}";
chart.cursor = new am4charts.XYCursor();

let scrollbarX = new am4charts.XYChartScrollbar();
scrollbarX.series.push(series);
chart.scrollbarX = scrollbarX;

function makeChart() {
  let chart = container.createChild(am4charts.XYChart);
  charts.push(chart);

  chart.data = generateData();
  chart.zoomOutButton.disabled = true;
  chart.padding(10, 15, 10, 15);

  let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
  dateAxis.renderer.grid.template.location = 0;
  dateAxis.renderer.labels.template.disabled = true;
  dateAxis.tooltip.animationDuration = 0;
  dateAxis.cursorTooltipEnabled = false;

  let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
  valueAxis.tooltip.disabled = true;
  valueAxis.tooltip.disabled = true;
  valueAxis.renderer.minWidth = 60;

  let series = chart.series.push(new am4charts.LineSeries());
  series.dataFields.dateX = "date";
  series.dataFields.valueY = "value";
  series.interpolationDuration = 0;

  series.tooltipText = "{valueY.value}";

  let cursor = new am4charts.XYCursor();
  cursor.lineY.disabled = true;
  cursor.xAxis = dateAxis;
  chart.cursor = cursor;

createAxisY(textLabels) {
        let axis;
        axis = this.chart.yAxes.push(new am4charts.ValueAxis());
        axis.tooltip.disabled = false;
        axis.renderer.opposite = Boolean(this.yAxesCount % 2);

        //TextRender
        if (textLabels !== undefined) {
            if (textLabels.size > 0) {
                axis.renderer.labels.template.adapter.add("text", function (text) {
                    if (textLabels.get(text) !== undefined) {
                        return textLabels.get(text);
                    } else {
                        return "";
                    }
                })
            }
        }
        this.yAxesCount = this.yAxesCount + 1;