CODEWITHSUNDEEP
angularchart.jsng2-charts
Daniel Andros
Daniel Andros

Reputation: 23

ERROR Error: ng-charts configuration error, data or datasets field are required to render chart line

I am using ng-charts 2.4.0 and chart.js 2.9.3 for loading charts in Angular 10.0.14 version.

Charts are loading but an error coming up in console as,

ERROR Error: ng-charts configuration error, data or datasets field are required to render chart line

Why I'm getting this error? Any suggestions to fix this?

this is my HTML code

<div style="display: block;" *ngIf="chartDataReady">
  <canvas baseChart 
    [datasets]="barChartData"
    [labels]="barChartLabels"
    [options]="barChartOptions"
    [colors]="chartColor"
    [plugins]="barChartPlugins"
    [legend]="barChartLegend"
    [chartType]="barChartType">
  </canvas>
</div>

My type Script code

 public barChartOptions: object;
 public barChartLabels: Label[];
 public barChartType: ChartType = 'line';
 public barChartLegend = true;
 public barChartPlugins = [];
 public chartColor = [];
 public barChartData: any[];

  this.barChartData = [
      {
        data: [
          '427.107858491441',
          '583.107858491441',
          '693.848606343664',
          '843.107858491441',
          '953.848606343664'
        ],
        backgroundColor: 'rgba(0, 165, 165, 1)',
        borderColor: 'rgba(0, 165, 165, 1)',
        fill: false,
        label: 'High 95'
      },
      {
        data: [
          '234.085360485402',
          '390.085360485402',
          '420.873571820389',
          '650.085360485402'
        ],
        backgroundColor: "rgba(187, 41, 25,1)",
        borderColor: "rgba(187, 41, 25,1)",
        fill: false,
        label: "Low 80"
      }
    ];
    this.barChartLabels = ["Jun 1, 2017", "Jul 1, 2017", "Aug 1, 2017", "Sep 1, 2017", "Oct 1, 2017", "Nov 1, 2017", "Dec 1, 2017", "Jan 1, 2018", "Feb 1, 2018", "Mar 1, 2018", "Apr 1, 2018", "May 1, 2018", "Jun 1, 2018", "Jul 1, 2018", "Aug 1, 2018", "Sep 1, 2018", "Oct 1, 2018", "Nov 1, 2018", "Dec 1, 2018"]
    this.barChartOptions = {
      legend: {
        display: true,
        position: 'top',
        labels: {
          fontColor: '#000080'
        }
      },
      title: {
        display: false,
        text: 'Extreme Intervals'
      },
      tooltips: {
        mode: 'index',
        intersect: false
      },
      scales: {
        xAxes: [
          {
            display: true,
            scaleLabel: {
              display: true,
              labelString: 'X-axis Low',
              fontColor: '#000080'
            }
          }
        ],
        yAxes: [
          {
            display: true,
            scaleLabel: {
              display: true,
              labelString: 'Y-axis High',
              fontColor: '#000080'
            }
          }
        ]
      }
    };
    this.chartColor = [
        {
          borderColor: 'rgba(0, 165, 165, 1)',
          backgroundColor: 'rgba(0, 165, 165, 1)'
        },
        {
          borderColor: 'rgba(187, 41, 25,1)',
          backgroundColor: 'rgba(187, 41, 25,1)'
        }
      ]

This is my type and HTML code loading this data on ngOnInit()

Upvotes: 1

Views: 1373

Answers (1)

Rukshan Jayasekara
Rukshan Jayasekara

Reputation: 1985

Try to create the chart after you have received your data.

When you've built your chart, assign a variable like this.

chartDataReady = true;

In your HTML, you can wrap the chart with a *ngIf like this.

*ngIf="chartDataReady"

Upvotes: 1

Related Questions