Ng2-Charts Linechart shows only the first two values

Question

I am launching a new Angular application that I initialized with Angular -CLI (beta 22.1). But when I add test data (5 values) to my chart, they seem to be erroneous and show only the first two values ​​and stretch them along the entire length of the graph (see Figure).

The project is otherwise empty and does not contain CSS at all.

My app.component.html :

 <div> <canvas baseChart [datasets]="_numbers" [labels]="_labels" [options]="_chartOpt" [colors]="_chartColours" [legend]="_chartLegend" [chartType]="_chartType" width="600px"> </canvas> <div> 

app.component.ts

 import { Component } from '@angular/core'; import { BaseChartDirective } from "ng2-charts/ng2-charts"; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { private _numbers: any[] = [ { label: "Test", data: [10,2,6,7] // should cause 4 points in the chart } ]; private _chartOpt: any = { responsive: true }; public _chartColours:any[] = []; private _labels: string[] = []; private _chartLegend: boolean = false; private _chartType: string = "line"; } 

The chart.js library is added via angular-cli.json :

 "scripts": [ "../node_modules/chart.js/dist/Chart.bundle.min.js" ], 

I really don't know where I am going wrong. I tried many different options ( responsive: true/false , maintainAspectRatio : true/false , wrapping <canvas> in <div> and without, CSS styles, width / height attributes, ...), but it seems to work. I even downgraded the version of ng2 diagrams to the one I worked with, but no luck.

Let me know if you need more code.

Answer 1

labels property must be defined along with the values. According to the documentation for properties :

labels (? Array) - labels of the x axis. This is necessary for diagrams: line, bar and radar.

Thus, specifying the actual values ​​for the labels will do the trick.

Answer 2

You need to put the condition in the canvas, for example, show it when loading data or array.length > 0

Example:

 <canvas baseChart *ngIf="showMyChart" [datasets]="_numbers" [chartType]="_chartType" width="600px"> </canvas>