Ngx-Charts - XAxisTicksComponent.html: this.adjustedScale is not a function

I'm developing an application in Angular 5, where I make use of Ngx Charts. When I run the application, it gives me this error in the browser console:

ERROR TypeError: this.adjustedScale is not a function
at XAxisTicksComponent../src/common/axes/x-axis-ticks.component.ts.XAxisTicksComponent.tickTransform (index.js:8509)
at Object.eval [as updateRenderer] (XAxisTicksComponent.html:4)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:14689)
at checkAndUpdateView (core.js:13803)
at callViewAction (core.js:14149)
at execEmbeddedViewsAction (core.js:14107)
at checkAndUpdateView (core.js:13799)
at callViewAction (core.js:14149)
at execComponentViewsAction (core.js:14081)
at checkAndUpdateView (core.js:13804)

This error occurs whenever I mouse-hover over the area where the graph is.

GRAPH COMPONENT HTML:

<div class="col-md-12 graphClass" #gh>
 <ngx-charts-line-chart  
    [view]="view"
    class="chart-container"
    [scheme]="colorScheme"
    schemeType="ordinal"
    [results]="dateData"
    (legendLabelClick)="onLegendLabelClick($event)"
    gradient="false"
    xAxis="true"
    yAxis="true"
    showXAxisLabel="true"
    showYAxisLabel="true"
    xAxisLabel="{{ xAxisLabel}}"
    yAxisLabel="{{ yAxisLabel}}"
    timeline="true"
    showGridLines="true"
    [curve]="curve"
 >

  </ngx-charts-line-chart> 
</div>

TS COMPONENT:

import { Component, Input, OnInit, Output, EventEmitter,ElementRef, ViewChild, OnChanges  } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
//import { StockServices } from '../../services/stock.services';
import * as d3 from 'd3';
import { colorSets as ngxChartsColorsets } from '@swimlane/ngx-charts/release/utils/color-sets';

@Component({
    selector: 'app-graph-sales',
    templateUrl: './graph-sales.component.html',
    styleUrls: ['./graph-sales.component.less'],
//  providers: [StockServices]
})

export class GraphSalesComponent implements OnInit, OnChanges {
    @Output() close_button = new EventEmitter();
    @Input() dateData = [];
    @Input() xAxisLabel = '';
    @Input() yAxisLabel = '';
    @ViewChild('gh') elementView: ElementRef;

    view = undefined;

 //line interpolation
    curveType: string = 'Linear';
    curve = d3.curveLinear;

    colorScheme: any;
    schemeType: string = 'ordinal';
    selectedColorScheme: string;


    constructor() {
        this.setColorScheme('cool');


    }

    ngOnInit(): void {
    }

    ngOnChanges(){
        this.view = [this.elementView.nativeElement.offsetWidth,this.elementView.nativeElement.offsetHeight];
    }

    select(data): void {
        console.log('Item clicked', data);
    }

    setInterpolationType(curveType) {
        this.curveType = curveType;
        if (curveType === 'Basis') {
            this.curve = d3.curveBasis;
        }
        if (curveType === 'Cardinal') {
            this.curve = d3.curveCardinal;
        }
        if (curveType === 'Catmull Rom') {
            this.curve = d3.curveCatmullRom;
        }
        if (curveType === 'Linear') {
            this.curve = d3.curveLinear;
        }
        if (curveType === 'Monotone X') {
            this.curve = d3.curveMonotoneX;
        }
        if (curveType === 'Monotone Y') {
            this.curve = d3.curveMonotoneY;
        }
        if (curveType === 'Natural') {
            this.curve = d3.curveNatural;
        }
        if (curveType === 'Step') {
            this.curve = d3.curveStep;
        }
        if (curveType === 'Step After') {
            this.curve = d3.curveStepAfter;
        }
        if (curveType === 'Step Before') {
            this.curve = d3.curveStepBefore;
        }
    } 

    setColorScheme(name) {
        this.selectedColorScheme = name;
        this.colorScheme = ngxChartsColorsets.find(s => s.name === name);
    }

    onLegendLabelClick(entry) {
        console.log('Legend clicked', entry);
    }

}