Refreshing chart Ionic 2 Chart.js

Question

I need to update a a doughnut chart when navagating back to a component but as it is at the moment it is not.

renderChart(oplTitle, oplScore, oplScoreDifference) {
 this.options = {
  type: 'doughnut',
  data: {
    labels: ["Opl progress", ""],
    datasets: [{
      borderWidth: 0,
      data: [oplScore, oplScoreDifference],
      backgroundColor: [
        'rgba(250, 203, 27, 0.9)',
        'rgba(255, 255, 255, 1)'
      ],
      borderColor: [
        'rgba(250, 203, 27, 1)',
        'rgba(250, 203, 27, 1)'
      ],
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: oplTitle,
      position: 'bottom'
    },
    tooltips: {
      enabled: false,
      backgroundColor: 'rgba(250, 203, 27, 1)'
    },
    legend: {
      display: false,
      labels: {
        boxWidth: 20
      }
    }
  }
  }
  }

I call renderChart when page loads

 ionViewDidLoad() {
    this.renderChart(this.title, this.score, this.difference);
 }

In the Html

<chart [options]="options"></chart>

As it is at the moment the chart renders but when navigating away and values get updated, it doesnt refresh when returning to the page. How can I 'refresh'

so basically what you want is that you can set a value or call a function when `navCtrl.pop()` is executed on a child page of the chart's? — Ivar Reukers, Nov 03 '16 at 13:42
because in that case the top answer on this question will provide a decent answer I believe. http://stackoverflow.com/questions/36325641/how-to-reload-the-ion-page-after-pop-in-ionic2 — Ivar Reukers, Nov 03 '16 at 13:53

score 2 · Accepted Answer · answered Nov 03 '16 at 22:52

The issue is because, like you can see in the docs, the ionViewDidLoad event...

Runs when the page has loaded. This event only happens once per page being created. If a page leaves but is cached, then this event will not fire again on a subsequent viewing. The ionViewDidLoad event is good place to put your setup code for the page.

And since the page is being cached, the event just is being executed once (when the page is created). Use the ionViewDidEnter page event instead since it...

Runs when the page has fully entered and is now the active page. This event will fire, whether it was the first load or a cached page.

You can find further information here.

Refreshing chart Ionic 2 Chart.js

1 Answers1