1

I am using Chart.js of version 3.2.1 and ng2-charts of version 3.0.0-beta.9. I was upgrading a project with this versions. I started with mock data and everything was ok: the charts were showing up as expected.

Until I started testing with the real data, I get from the backend. The axes, labels, legends are not updating and charts are not showing up.

I reproduced the problem here: https://stackblitz.com/edit/chart-js-321-ng2-charts-300-beta9-rest?file=src%2Fapp%2Fapp.component.ts

HTML:

<canvas baseChart 
    [datasets]="barChartData" 
    [labels]="barChartLabels" 
    [options]="barChartOptions" 
    [legend]="barChartLegend" 
    [type]="barChartType">
</canvas>

TS:

    public barChartOptions: ChartOptions = {
        indexAxis: 'y',
        responsive: true,
        scales: {
          x: {
            min: 0
          }
        }
      };
      public barChartLabels: string[] = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
      public barChartType: ChartType = 'bar';
      public barChartLegend = true;
      public barChartPlugins = [];
      public barChartData: ChartDataset[] = [
        {
          data: [], //comment it out to see that chart loads with mock data below
          // data: [65, 59, 80, 81, 56, 55, 40],
          backgroundColor: 'green',
          label: 'Series A'
        },
        {
          data: [], //comment it out to see that chart loads with mock data below
          // data: [28, 48, 40, 19, 86, 27, 90],
          backgroundColor: 'red',
          label: 'Series B '
        }
      ];
    
      @ViewChild(BaseChartDirective, { static: true }) chart: BaseChartDirective;
ngOnInit() {
    //comment http out to see that chart loads with mock data above
    this.subscription = this.http
      .get('https://api.ratesapi.io/api/2020-05-10')
      .subscribe(data => {
        this.barChartData[0].data = [
          data.rates.GBP,
          data.rates.HKD,
          data.rates.IDR,
          data.rates.PLN,
          data.rates.DKK,
          data.rates.LVL,
          data.rates.INR
        ];
        this.barChartData[1].data = [
          data.rates.CHF,
          data.rates.MXN,
          data.rates.CZK,
          data.rates.SGD,
          data.rates.THB,
          data.rates.BGN,
          data.rates.MYR
        ];
        this.barChartLabels = ['1', '2', '3', '4', '5', '6', '7'];
        this.barChartData[0].label = 'Label1';
        this.chart.update();
      });
  }

Here I'm using the old versions and everything works: https://stackblitz.com/edit/chart-js-293-ng2-charts-232-rest?file=src%2Fapp%2Fapp.component.ts

Neon
  • 111
  • 11
  • Please post the relevant code as codeblocks in your question. This question becomes useless if (..when!!) the links die. Having the stackblitzes are awesome, but need some code in question itself :) – AT82 May 09 '21 at 06:16

1 Answers1

1

https://github.com/valor-software/ng2-charts/issues/1313

Instead of chart.update() temporarily use chart.render().

EDIT: in ng2-charts@3.0.0-rc.2 this issue is solved. You can use update() or even NO update() method at all.

Neon
  • 111
  • 11