[Chartjs]-Custom empty screen for ng2-charts

by

1👍

✅

You have to check data variable length like

html

<div style="display: block;" *ngIf="lineChartData[0]['data'].length">
  <canvas baseChart width="400" height="400"
    [datasets]="lineChartData"
    [labels]="lineChartLabels"
    [options]="lineChartOptions"
    [colors]="lineChartColors"
    [legend]="lineChartLegend"
    [chartType]="lineChartType"
    [plugins]="lineChartPlugins">
  </canvas>
</div>

<div *ngIf="lineChartData[0]['data'].length === 0 ">
  No Data Available
</div>

ts

export class AppComponent  {
  public lineChartData: ChartDataSets[] = [
    { data: [], label: 'Series A' },
  ];
}

1👍

You could use *ngIf‘s else block:

<div style="display: block;" *ngIf="lineChartData; else elseBlock">
  <canvas baseChart width="400" height="400"
    [datasets]="lineChartData"
    [labels]="lineChartLabels"
    [options]="lineChartOptions"
    [colors]="lineChartColors"
    [legend]="lineChartLegend"
    [chartType]="lineChartType"
    [plugins]="lineChartPlugins">
  </canvas>
</div>
<ng-template #elseBlock>No Data Available.</ng-template>

Stackbliz demo here.

If lineChartData can be just empty ([]) and you wish to also hide the chart in this case, you can use:

<div style="display: block;" *ngIf="lineChartData && lineChartData.length; else elseBlock">

Stackblitz demo 2 here.

And/or if you want to guard the data variable as well, do:

<div style="display: block;" *ngIf="lineChartData && lineChartData.length && lineChartData[0].data.length; else elseBlock">

Demo here.

Leave a comment