Nativescript Lazy Loaded Page Not Loading Charts

Question

Before I implemented Lazy Loading into my Nativescript Angular Application, the financial and area charts would have no problem loading data.

After implementing it, I noticed the chart would load but I would get the following message that no data has loaded on Android (it's also affecting iOS, but no message appears):

NoHorizontalAxis
NoVerticalAxis
NoSeries

I can definitely confirm that data is being sent to the chart.

Here's what my html chart component looks like:

<StackLayout borderRadius="3" minHeight="200">
  <StackLayout *ngIf="chartItems$; else loading">
    <StackLayout *ngIf="hasData; else noData;">
      <GridLayout rows="*">
          <RadCartesianChart row="0">
            <CategoricalAxis
              majorTickInterval="10"
              tkCartesianHorizontalAxis>
            </CategoricalAxis>
            <LinearAxis
              horizontalLocation="Right"
              [maximum]="max"
              [minimum]="min"
              labelLayoutMode="Outer" 
              tkCartesianVerticalAxis>
            </LinearAxis>
            <AreaSeries
              tkCartesianSeries
              seriesName="Area" 
              showLabels="false"
              [items]="chartItems$ | async"
              stackMode="Stack"
              categoryProperty="Date" 
              valueProperty="Amount" 
              selectionMode="None">
            </AreaSeries>
            <RadCartesianChartGrid 
              tkCartesianGrid>
            </RadCartesianChartGrid>
            <Palette tkCartesianPalette seriesName="Area">
              <PaletteEntry
                  tkCartesianPaletteEntry 
                  [strokeColor]="lineColor">
              </PaletteEntry>
              <PaletteEntry 
                  tkCartesianPaletteEntry>
              </PaletteEntry>
            </Palette>
            </RadCartesianChart>
      </GridLayout>
    </StackLayout>
    <ng-template #noData>
      <StackLayout class="center-center" height="100%">
          <Label text="No Chart Data Available" class="font-color textsize-reg-md" textWrap="true"></Label>
      </StackLayout>
    </ng-template>
  </StackLayout>
  <ng-template #loading>
      <ActivityIndicator margin="10" rowSpan="3" color="#ffffff" busy="true"></ActivityIndicator>
  </ng-template>
</StackLayout>

The ts file (abbreviated here):

SetChartData(chartData: Observable<FinancialChart[]>) {
    **console.log(chartData); // <---- Has correctly formatted data**
    this.chartItems$ = chartData
}

The big issue is that both financial chart and area chart worked before the lazy load transition, but no longer work (but can confirm the component is being rendered) afterward.

Any ideas?

razorsyntax razorsyntax · Accepted Answer · 2019-07-07T22:14:59

In case anyone else runs into this...

The answer was to move

import { NativeScriptUIChartModule } from 'nativescript-ui-chart/angular/chart-directives';

into another module I was using for components.

Originally, this was inside the app.module.ts file.

Nativescript Lazy Loaded Page Not Loading Charts

1 Answers