Nativescript - Chart is not displaying - nativescript

Question

I follow nativescript-ui-samples-angular https://github.com/NativeScript/nativescript-ui-samples-angular
and can see charts when running the application. When I use the same code in my application, there is no chart showing up on IOS and Android. I have no idea what's wrong. Do I miss some configurations? Thanks
chart.component.html
<RadCartesianChart tkExampleTitle tkToggleNavButton>
<CategoricalAxis tkCartesianHorizontalAxis lastLabelVisibility="Hidden" ios:firstLabelVisibility="Hidden"
ios:plotMode="OnTicks">
</CategoricalAxis>
<LinearAxis tkCartesianVerticalAxis></LinearAxis>
<AreaSeries tkCartesianSeries [items]="categoricalSource" categoryProperty="Country" valueProperty="Amount">
</AreaSeries>
</RadCartesianChart>
chart.component.ts
import { Component,ElementRef, ViewChildren, QueryList, OnInit } from "#angular/core";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { DataService } from "./data.service";
import { Country } from "./country";
#Component({
selector: "ns-charts",
moduleId: module.id,
templateUrl: "./chart.component.html",
styleUrls: ['./chart.component.css']
})
export class ChartComponent implements OnInit {
private _categoricalSource: ObservableArray<Country>;
constructor(private _dataService: DataService) { }
get categoricalSource(): ObservableArray<Country> {
return this._categoricalSource;
}
ngOnInit() {
this._categoricalSource = new ObservableArray(this._dataService.getCategoricalSource());
console.log(this._categoricalSource);
}
}
country.ts
export class Country {
constructor(public Country?: string, public Amount?: number, public SecondVal?: number, public ThirdVal?: number, public Impact?: number, public Year?: number) {
}
}
data.service.ts
import { Country } from "./country";
import { Injectable } from '#angular/core';
#Injectable()
export class DataService {
getCategoricalSource(): Country[] {
return [
{ Country: "Germany", Amount: 15, SecondVal: 14, ThirdVal: 24, Impact: 0, Year: 0 },
{ Country: "France", Amount: 13, SecondVal: 23, ThirdVal: 25, Impact: 0, Year: 0 },
{ Country: "Bulgaria", Amount: 24, SecondVal: 17, ThirdVal: 23, Impact: 0, Year: 0 },
{ Country: "Spain", Amount: 11, SecondVal: 19, ThirdVal: 24, Impact: 0, Year: 0 },
{ Country: "USA", Amount: 18, SecondVal: 8, ThirdVal: 21, Impact: 0, Year: 0 }
];
}
}
app-routing.module.ts
import { NgModule } from "#angular/core";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { Routes } from "#angular/router";
import { ChartComponent } from "./chart/chart.component";
const routes: Routes = [
{ path: "", redirectTo: "/charts", pathMatch: "full" },
{ path: "charts", component: ChartComponent }
];
#NgModule({
imports: [NativeScriptRouterModule.forRoot(routes)],
exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }
package.json
{
"nativescript": {
"id": "org.nativescript.boardgamehelper",
"tns-android": {
"version": "6.0.1"
},
"tns-ios": {
"version": "6.0.1"
}
},
"description": "NativeScript Application",
"license": "SEE LICENSE IN <your-license-filename>",
"repository": "<fill-your-repository-here>",
"dependencies": {
"#angular/animations": "~8.0.0",
"#angular/common": "~8.0.0",
"#angular/compiler": "~8.0.0",
"#angular/core": "~8.0.0",
"#angular/forms": "~8.0.0",
"#angular/http": "~8.0.0-beta.10",
"#angular/platform-browser": "~8.0.0",
"#angular/platform-browser-dynamic": "~8.0.0",
"#angular/router": "~8.0.0",
"nativescript-angular": "~8.0.0",
"nativescript-theme-core": "~1.0.4",
"nativescript-ui-chart": "^5.0.0",
"reflect-metadata": "~0.1.12",
"rxjs": "~6.5.0",
"tns-core-modules": "6.0.2",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular/compiler-cli": "~8.0.0",
"#ngtools/webpack": "~8.0.0",
"nativescript-dev-webpack": "~1.0.0",
"typescript": "3.4.5"
},
"gitHead": "8c1a4866a66daab09bf5ef8e5a96472687192373",
"readme": "NativeScript Application"
}

Answer 1

You have to import the chart module in your module.ts e.g
import { NativeScriptUIChartModule } from "nativescript-ui-chart/angular";