RadCartesianChart Blank screen

Question

I am new in Nativescript development, I was trying to use Nativescript-ui-chart in my app, but when I load the page I wrote, the screen becomes blank, and nothing is displayed.

I followed this guide https://docs.nativescript.org/angular/ui/professional-ui-components/ng-Chart/getting-started. I also downloaded and tested the Sample code from Git-Hub, and it works: but when I copy the code it does the same thing I said before.

At this point I think it's something about the libraries I use, maybe some incompatibility with the charts

I used the same code found on the link I posted above...

<RadCartesianChart>
   <CategoricalAxis tkCartesianHorizontalAxis></CategoricalAxis>
   <LinearAxis tkCartesianVerticalAxis></LinearAxis>
   <LineSeries tkCartesianSeries [items]="categoricalSource" 
               categoryProperty="Country" valueProperty="Amount">
   </LineSeries>
</RadCartesianChart>

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 }
    ];


  }
}


@Component({
  selector: "ns-service-detail",
  templateUrl: "./service-detail.component.html",
  styleUrls: ["./service-detail.component.scss"],
  moduleId: module.id,
  providers: [DataService],
})
export class ServiceDetailComponent {

  ngOnInit() {

      this._categoricalSource = new ObservableArray(this._dataService.getCategoricalSource());

  }

  private _categoricalSource: ObservableArray<Country>;



  get categoricalSource(): ObservableArray<Country> {
    return this._categoricalSource;
  }

}


export class Country {
  constructor(public Country?: string, public Amount?: number, public SecondVal?: number, public ThirdVal?: number, public Impact?: number, public Year?: number) {
  }
}

In the console log, I can't see any error, so it is quiete difficult to me to debug it.

Answer 1

I have created a playground here. You should wrap your chart inside a Layout.

<GridLayout rows="*" height="1000px">
                <RadCartesianChart row="0">
                    <CategoricalAxis tkCartesianHorizontalAxis></CategoricalAxis>
                    <LinearAxis tkCartesianVerticalAxis></LinearAxis>
                    <LineSeries tkCartesianSeries [items]="categoricalSource"
                        categoryProperty="Country" valueProperty="Amount"></LineSeries>
                </RadCartesianChart>
            </GridLayout>