How to use the igniteui-angular-charts/ES5/igx-bubble-series-component.IgxBubbleSeriesComponent function in igniteui-angular-charts

const yAxis = chart.actualAxes.filter(a => a.isNumeric)[1] as IgxNumericYAxisComponent;

        const series1 = new IgxBubbleSeriesComponent();
        series1.title = "High Income Country";
        series1.dataSource = SampleScatterStats.getCountriesWithHighIncome();
        series1.showDefaultTooltip = false;
        series1.xMemberPath = "population";
        series1.yMemberPath = "gdpTotal";
        series1.radiusMemberPath = "gdpPerCapita";
        series1.radiusScale = sizeScale1;
        series1.markerType = MarkerType.Circle;
        series1.xAxis = xAxis;
        series1.yAxis = yAxis;
        series1.tooltipTemplate = this.seriesTooltip;

        const series2 = new IgxBubbleSeriesComponent();
        series2.title = "Low Income Country";
        series2.dataSource = SampleScatterStats.getCountriesWithLowIncome();
        series2.showDefaultTooltip = false;
        series2.xMemberPath = "population";
        series2.yMemberPath = "gdpTotal";
        series2.radiusMemberPath = "gdpPerCapita";
        series2.radiusScale = sizeScale2;
        series2.markerType = MarkerType.Circle;
        series2.xAxis = xAxis;
        series2.yAxis = yAxis;
        series2.tooltipTemplate = this.seriesTooltip;

        chart.series.add(series1);
        chart.series.add(series2);

        // chart.markerOutlines = [ "#7446B9", "#9FB328", "#2E9CA6", "#525251", "#dcbf3f", "#F96232"];

public createSeries() {
        const sizeScale = new IgxSizeScaleComponent();
        sizeScale.minimumValue = 10;
        sizeScale.maximumValue = 60;

        const series = new IgxBubbleSeriesComponent();
        series.title = "Countries";
        series.dataSource = SampleScatterStats.getCountries();
        series.showDefaultTooltip = true;
        series.xMemberPath = "population";
        series.yMemberPath = "gdpTotal";
        series.radiusMemberPath = "gdpPerCapita";
        series.radiusScale = sizeScale;
        series.xAxis = this.xAxis;
        series.yAxis = this.yAxis;

        this.chart.series.clear();
        this.chart.series.add(series);
    }
}

series1.title = "Large Countries";
            series1.markerType = MarkerType.Circle;
            series1.dataSource = SampleScatterStats.getCountriesWithLargePop();
            series1.showDefaultTooltip = true;
            series1.xMemberPath = "population";
            series1.yMemberPath = "gdpTotal";
            series1.radiusMemberPath = "gdpPerCapita";
            series1.radiusScale = sizeScale;
            series1.xAxis = this.xAxis;
            series1.yAxis = this.yAxis;

            const brushScale2 = new IgxCustomPaletteBrushScaleComponent();
            brushScale2.brushes = ["#FFFFFF", "#b56ffc"];
            brushScale2.brushSelectionMode = BrushSelectionMode.Interpolate;

            const series2 = new IgxBubbleSeriesComponent();
            series2.name = "series2";
            series2.title = "Small Countries";
            series2.markerType = MarkerType.Circle;
            series2.dataSource = SampleScatterStats.getCountriesWithSmallPop();
            series2.showDefaultTooltip = true;
            series2.xMemberPath = "population";
            series2.yMemberPath = "gdpTotal";
            series2.radiusMemberPath = "gdpPerCapita";
            series2.radiusScale = sizeScale;
            series2.xAxis = this.xAxis;
            series2.yAxis = this.yAxis;

            this.chart.series.clear();
            this.chart.series.add(series1);
            this.chart.series.add(series2);

this.chart.series.clear();
            this.chart.series.add(series1);
            this.chart.series.add(series2);

        } else if (seriesType === "Bubble") {
            const sizeScale = new IgxSizeScaleComponent();
            sizeScale.minimumValue = 10;
            sizeScale.maximumValue = 60;

            const brushScale1 = new IgxValueBrushScaleComponent();
            brushScale1.brushes = ["#FFFFFF", "#b56ffc"];
            brushScale1.minimumValue = 10;
            brushScale1.maximumValue = 60;

            const series1 = new IgxBubbleSeriesComponent();
            series1.name = "series1";
            series1.title = "Large Countries";
            series1.markerType = MarkerType.Circle;
            series1.dataSource = SampleScatterStats.getCountriesWithLargePop();
            series1.showDefaultTooltip = true;
            series1.xMemberPath = "population";
            series1.yMemberPath = "gdpTotal";
            series1.radiusMemberPath = "gdpPerCapita";
            series1.radiusScale = sizeScale;
            series1.xAxis = this.xAxis;
            series1.yAxis = this.yAxis;

            const brushScale2 = new IgxCustomPaletteBrushScaleComponent();
            brushScale2.brushes = ["#FFFFFF", "#b56ffc"];
            brushScale2.brushSelectionMode = BrushSelectionMode.Interpolate;

public createSeries(data: any, title: string) {
        const sizeScale = new IgxSizeScaleComponent();
        sizeScale.minimumValue = 10;
        sizeScale.maximumValue = 60;

        const id = "series" + this.chart.series.count;

        const series1 = new IgxBubbleSeriesComponent();
        series1.name = id;
        series1.title = title;
        series1.markerType = MarkerType.Circle;
        series1.dataSource = data;
        series1.showDefaultTooltip = true;
        series1.xMemberPath = "population";
        series1.yMemberPath = "gdpTotal";
        series1.radiusMemberPath = "gdpPerCapita";
        series1.radiusScale = sizeScale;
        series1.xAxis = this.xAxis;
        series1.yAxis = this.yAxis;

        this.chart.series.add(series1);
    }
}