Ng2-charts: options should update/refresh the chart on ngOnChanges

[randbrown]

Currently only changes to the data and labels are considered to redraw/refresh the chart. In my case I need to set the chart's title, axis labels, etc dynamically based on data I load from my server. Please add this or let me know how to work around this in my app. Thanks

[ryan-morris]

Experiencing same issue. Any update on this?

[kaedwen]

I have the same problem. The 'options' Objects is missing in the ngOnChanges Method implementation. Only 'data' changes are recognized for some reason.

    ChartComponent.prototype.ngOnChanges = function (changes) {
        var _this = this;
        if (this.chart && changes['data']) {
            var currentValue_1 = changes['data'].currentValue;
            ['datasets', 'labels', 'xLabels', 'yLabels'].forEach(function (property) {
                _this.chart.data[property] = currentValue_1[property];
            });
            this.chart.update();
        }
    };

But for some reason if I update the options Object, chartjs stops working.

  ChartComponent.prototype.ngOnChanges = function (changes) {
    var _this = this;
    if (this.chart) {

      if(changes['data']) {
        var currentValue_1 = changes['data'].currentValue;
        ['datasets', 'labels', 'xLabels', 'yLabels'].forEach(function (property) {
          _this.chart.data[property] = currentValue_1[property];
        });
      }

      if(changes['options']){
        Object.assign(this.chart.options, changes['options'].currentValue);
      }

      this.chart.update();

    }
  };

I need to update the yAxis Label so the following is enough for me, but this needs to be generic!

    ChartComponent.prototype.ngOnChanges = function (changes) {
        var _this = this;
        if (this.chart) {

          if(changes['data']) {
            var currentValue_1 = changes['data'].currentValue;
            ['datasets', 'labels', 'xLabels', 'yLabels'].forEach(function (property) {
              _this.chart.data[property] = currentValue_1[property];
            });
          } 

          if(changes['options']){
            this.chart.options.scales.yAxes[0].scaleLabel.labelString = changes['options'].currentValue.scales.yAxes[0].scaleLabel.labelString
          }

          this.chart.update();

        }
    };

[hoLiFuk]

If I update the x-axis labels with new labels, e.g., from [2008,2009,2010,2011,2012,2013,2014,2015,2016] to [2012,2013,2014,2015,2016], the chart continues to show the old labels, and draws the chart data incorrectly, from 2008 onwards. This issue seems to have come up for chart.js https://github.com/chartjs/Chart.js/issues/593 -- and they are saying they have fixed it. So the Angular-2 side needs to reflect that fix.

[dantavo]

I have the same issues.. I have to change labels for new data arriving from the backend.
Data change correctly doing the clone of the array but for label not.

[ryan-morris]

I've been working around this with the following.

import { BaseChartDirective } from 'ng2-charts';

In class

ViewChild(BaseChartDirective) private _chart;

And when you need to force a refresh

forceChartRefresh() {
        setTimeout(() => {
            this._chart.refresh();
        }, 10);
    }

This is less than elegant and didn't seem to work for me without the setTimeout but it's getting us by until this is fixed.

[dantavo]

Thank you it is work ;)

[zechfox]

@ryan-morris I used your working around, but failed when compile my code: TS2341: Property ‘refresh’ is private and only accessible within class ‘BaseChartDirective ’.”
And refresh() was defined as private. Do you have any other suggestion?
Thanks~

[matheushf]

thanks @ryan-morris!

[stefanSlalom]

@zechfox I had the same error and got around the typescript compiler by using this:

(<any>this._chart).refresh()

However, this still only updated datasets for me, so I ended up forcing Angular to refresh the whole canvas by doing this (noting that my <canvas> has *ngIf="graph":

this.graph = undefined;
this.changeDetector.markForCheck();
setTimeout(() => { 
    this.graph = newDataAndColorsAndOptions;
    this.changeDetector.markForCheck();
},0);

[fullstackfool]

@stefanSlalom Thanks for the tip, was the solution for me.

Just to expand on using (<any>this._chart).refresh() , a slightly cleaner way to resolve the compiler gripes - especially if you plan to use refresh() in multiple places - is to update your directive declaration, eg:

@ViewChild(BaseChartDirective) chartWidget: BaseChartDirective;

to

@ViewChild(BaseChartDirective) chartWidget: any;

[AlexanderKozhevin]

I had a simplier solution :)
Just use wrapper canvas inside the div and ngIf for it.

1. Then set it to false show variable.
2. Change data
3. Set show variable to true inside setTimeout(()=>{this.show = true}, 0)

Impossible stupid, but working.

[BrianJSvehaug]

Thank you, @AlexanderKozhevin! After hours of frustration, this resolved this for me.

[longhairguy]

can you help me i am new to angular 2 and i am using chart.js to make a dynamic chart i have created node.js backend api which give data to an angular 2 service .The problem is that all the variables required to make the chart gets updated but the chart is not getting updated until reload i want to update it without reloading the page.Could you please help me with this thanks in advance.

[AlexanderKozhevin]

@longhairguy
I'm a code-mentor. It's my job to help people.
https://www.codementor.io/alexander-k

[paviad]

Closed by ef5d2f4

[iversonLv]

I've been working around this with the following.

import { BaseChartDirective } from 'ng2-charts';

In class

ViewChild(BaseChartDirective) private _chart;

And when you need to force a refresh

forceChartRefresh() {
        setTimeout(() => {
            this._chart.refresh();
        }, 10);
    }

This is less than elegant and didn't seem to work for me without the setTimeout but it's getting us by until this is fixed.

For now, setTiemout + ngOnChanges() works
Thanks man, really don't know why such weird behavior.

[aarji]

@stefanSlalom Thanks for the tip, was the solution for me.

Just to expand on using (<any>this._chart).refresh() , a slightly cleaner way to resolve the compiler gripes - especially if you plan to use refresh() in multiple places - is to update your directive declaration, eg:

@ViewChild(BaseChartDirective) chartWidget: BaseChartDirective;

to

@ViewChild(BaseChartDirective) chartWidget: any;

Works Thanks