title: ERROR Error: ng-charts configuration error, data or datasets field are required to render chart line
body: <p>I am using <strong>ng-charts 2.4.0</strong> and <strong>chart.js 2.9.3</strong> for loading charts in <strong>Angular 10.0.14</strong> version.</p>
  <p>Charts are loading but an error coming up in console as,</p>
  <pre><code>ERROR Error: ng-charts configuration error, data or datasets field are required to render chart line
  </code></pre>
  <p>Why I'm getting this error? Any suggestions to fix this?</p>
  <p>this is my HTML code</p>
  <pre><code>&lt;div style=&quot;display: block;&quot; *ngIf=&quot;chartDataReady&quot;&gt;
    &lt;canvas baseChart 
      [datasets]=&quot;barChartData&quot;
      [labels]=&quot;barChartLabels&quot;
      [options]=&quot;barChartOptions&quot;
      [colors]=&quot;chartColor&quot;
      [plugins]=&quot;barChartPlugins&quot;
      [legend]=&quot;barChartLegend&quot;
      [chartType]=&quot;barChartType&quot;&gt;
    &lt;/canvas&gt;
  &lt;/div&gt; 
  </code></pre>
  <p>My type Script code</p>
  <pre><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: &quot;rgba(187, 41, 25,1)&quot;,
          borderColor: &quot;rgba(187, 41, 25,1)&quot;,
          fill: false,
          label: &quot;Low 80&quot;
        }
      ];
      this.barChartLabels = [&quot;Jun 1, 2017&quot;, &quot;Jul 1, 2017&quot;, &quot;Aug 1, 2017&quot;, &quot;Sep 1, 2017&quot;, &quot;Oct 1, 2017&quot;, &quot;Nov 1, 2017&quot;, &quot;Dec 1, 2017&quot;, &quot;Jan 1, 2018&quot;, &quot;Feb 1, 2018&quot;, &quot;Mar 1, 2018&quot;, &quot;Apr 1, 2018&quot;, &quot;May 1, 2018&quot;, &quot;Jun 1, 2018&quot;, &quot;Jul 1, 2018&quot;, &quot;Aug 1, 2018&quot;, &quot;Sep 1, 2018&quot;, &quot;Oct 1, 2018&quot;, &quot;Nov 1, 2018&quot;, &quot;Dec 1, 2018&quot;]
      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)'
          }
        ]
  </code></pre>
  <p>This is my type and HTML code loading this data on ngOnInit()</p>