I cannot seem to get the igx-legend to work with my igx-data-chart. I have been following this example: https://stackblitz.com/angular/aroopaaamqe?file=package.json

I even copy and pasted the code into my project. I get the following error..I am running an Angular 8 app using typescript. 

NOTE: The graphs work perfectly fine without the legend. But when trying to apply the legend, I get this error every time. 

ERROR TypeError: Cannot read property 'resolveLegendItemTemplate' of null
at LineSeriesView.SeriesView.bi (SeriesViewer_combined.js:16359)
at LineSeries.Series.jt (SeriesViewer_combined.js:12981)
at LineSeries.get [as jv] (SeriesViewer_combined.js:12959)
at LineSeries.Series.hp (SeriesViewer_combined.js:13228)
at LineSeries.Series.iy (SeriesViewer_combined.js:12817)
at LineSeries.MarkerSeries.iy (SeriesViewer_combined.js:13631)
at LineSeries.CategorySeries.iy (CategoryBucketCalculator_combined.js:925)
at LineSeries.AnchoredCategorySeries.iy (AnchoredCategorySeries_combined.js:183)
at LineSeries.HorizontalAnchoredCategorySeries.iy (HorizontalAnchoredCategorySeries.js:187)
at LineSeries.iy (LineSeries_combined.js:96)

HTML

ngOnInit()

if (this.legend) {
console.log(this.chart);
this.chart.legend = this.legend;
}
this.chart.series.clear();
const series1 = new IgxLineSeriesComponent();
series1.name = "series1";
series1.markerType = MarkerType.None;
series1.valueMemberPath = "USA";
series1.title = "USA";
series1.xAxis = this.xAxis;
series1.yAxis = this.yAxis;
series1.thickness = 2;

const series2 = new IgxLineSeriesComponent();
series1.name = "series1";
series2.markerType = MarkerType.None;
series2.valueMemberPath = "RUS";
series2.title = "Russia";
series2.xAxis = this.xAxis;
series2.yAxis = this.yAxis;
series2.thickness = 2;

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